Web Viewer

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

Video Tutorial

Some websites may not appear when testing your app on the web. You may need to Live Test the app on a device, or download and install the app, to see your web page.

Overview

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://

Note: Can also accept .html files that have been uploaded to the app (great for offline use).

Go Back/Forward

You can use blocks to navigate back through previously visited web pages. Once you have gone back, you can also use blocks to navigate forward through your visited pages again.

The Back block may not work when you test your app on the web, but will work when Live Testing your app and in downloaded apps

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.

Manage Permissions

You can toggle whether the Web Viewer automatically requests the user's location. Some websites require access to the user's location to work. However, if you do not plan on displaying a website that needs this permission in your app, then you may not want your app to request an unnecessary permission.

To set whether or not the Web Viewer requests the user's location, go to the Design tab and click on your Web Viewer. In the panel on the right hand side of the screen, click on the Advanced tab.

Advanced tab of Web Viewer component

Scroll down until you see a switch labeled Geolocation Enabled. Use this switch to toggle whether your Web Viewer requests the user's location.

Post Message/Receive Message

If you own the website being displayed in your Web Viewer, you can send and receive messages between your website and the Web Viewer using Javascript.

Example of Web Viewer 'Post Message' block
Example of Web Viewer 'Receives Message' block

You can see examples of sending/receiving messages and get further setup instructions here.

See Also

You may also find the Web API component useful for sending/receiving information between your app and a website.