Web View

This article describes how to configure the Web View component and each of its properties.

The Web View component allows you to display web content within a Squirrel project. This could be a website, a Google map, or even another Squirrel project!

Select Web View from the Containers category of the component library. Move the mouse cursor over the canvas, and click to add a Web View component to your project:

Web View Properties

There are two property drawers, a WEB VIEW PROPERTIES drawer and a DYNAMIC VISIBILITY drawer. This guide will not describe the dynamic visibility properties as these are generic to each visible component, a separate guide and tutorial on dynamic visibility can be found here.

The Web View property settings of the Web View are described below:

URL – In the property field enter the address of the website to be displayed. Type or paste the URL into the property field, or bind it to a cell in the spreadsheet that contains the web address:
- The website will load in the web view component. If it doesn’t, see the note below and check it meets the criteria for display.
- Responsive web content will display according to the size of the web view component; the default width of 400 px will most likely show the mobile version of a website, and at wider widths tablet or desktop versions will be shown.

The Web View component is not able to display content that is prevented from being displayed in an Iframe (learn more).

Squirrel projects hosted on a secured (https://…) website cannot show content from an unsecured (http://…) website.

Connect to External Parameters – Check this option to pass data to a Squirrel project shown in the Web View component. (See the External Parameters description to find out more.)
Enable Scrollbars – If the web content is larger than the Web View component, click the Enable Scrollbars option in the properties panel. Scrollbars will be added automatically to the vertical and/or horizontal depending on the direction of the overflow.

Enter Debug or Preview mode to interact with the Web View content.

For more information about using the Web View component in your projects take a look at these two blog articles:

PreviousContainer NextRepeat Container

Last updated 1 month ago

Web View Properties

The Web View property settings of the Web View are described below:

URL – In the property field enter the address of the website to be displayed. Type or paste the URL into the property field, or bind it to a cell in the spreadsheet that contains the web address:

The website will load in the web view component. If it doesn’t, see the note below and check it meets the criteria for display.
Responsive web content will display according to the size of the web view component; the default width of 400 px will most likely show the mobile version of a website, and at wider widths tablet or desktop versions will be shown.

The Web View component is not able to display content that is prevented from being displayed in an Iframe (learn more).

Squirrel projects hosted on a secured (https://…) website cannot show content from an unsecured (http://…) website.

Connect to External Parameters – Check this option to pass data to a Squirrel project shown in the Web View component. (See the External Parameters description to find out more.)

Enable Scrollbars – If the web content is larger than the Web View component, click the Enable Scrollbars option in the properties panel. Scrollbars will be added automatically to the vertical and/or horizontal depending on the direction of the overflow.

Enter Debug or Preview mode to interact with the Web View content.

For more information about using the Web View component in your projects take a look at these two blog articles: