Web Viewer

With the Web Viewer component, you can open up any website within your app to display.

Set URL

To open up a website in your app, you need to provide the Web Viewer with a URL.

A URL is kind of like a street address - it tells the web viewer the location of the website on the internet.

  • URL: Enter in the link to the website or an image. The URL must include https:// or http://.

With the blocks above, www.thunkable.com will be opened up on screen 1 through the web viewer.

Note: Can also accept .html files that have been uploaded to the app (great for offline use). Additionally, the Web Viewer currently permits full-screen viewing of videos on iOS only

Edit Web Viewer size

You can set how tall the Web Viewer is using the height property and set how wide it is using the width property.

Height

  • Fill container - The Web Viewer fills the entire screen vertically

  • Fit contents - The Web Viewerโ€™s height changes to fit the contents it contains

  • Relative size - The Web Viewer fills the specified percentage of the screen

  • Absolute size - Sizes the Web Viewer to a specified number of pixels

Width

  • Fill container - The Web Viewer fills the entire screen horizontally

  • Fit contents - The Web Viewerโ€™s width changes to fit the contents it contains

  • Relative size - The Web Viewer fills the specified percentage of the screen

  • Absolute - Sizes the Web Viewer to a specified number of pixels

Add spacing

You change the spacing and positioning of the Web Viewer with the Margin and Padding properties.

Margin

  • You can specify how much space you want between the border and the contents of Web Viewer using either pixel or percent values.

Padding

  • You can specify how much space you want between the edges of the Web Viewer and the screen using either pixel or percent values.