# Web Viewer Component

## Overview

The web viewer component displays websites in your app. You can also use it to run HTML and JavaScript commands. For example, you can run a simple HTML URL to decode an image into base 64 text.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6CTgg5F9NZvzgso2%2Fweb-viewer-%E2%9C%95-fig-1.png?generation=1524497178606988\&alt=media)

{% hint style="info" %}
Some websites may not appear when previewing your app on the web. We recommend previewing with the [Thunkable Live app](https://docs.thunkable.com/getting-started/get-started/live-test#thunkable-live-app) on a device.
{% endhint %}

## Properties

### Web Viewer

<table><thead><tr><th width="134.33333333333331">Property</th><th width="488">Description</th><th>Data Type</th></tr></thead><tbody><tr><td>URL</td><td>Set the initial URL to be displayed in the web viewer. The URL should begin with HTTPS://. You can also type in the name of an HTML file that has been uploaded to the project to display in the web viewer.</td><td>URL</td></tr></tbody></table>

### Advanced Properties

<table><thead><tr><th width="212.33333333333331">Property</th><th width="392">Description</th><th>Data Type</th></tr></thead><tbody><tr><td>Geolocation Enabled (Android only)</td><td>Select if you want to enable geolocation functionality for Android apps.</td><td>True/False</td></tr></tbody></table>

### Layout

<table><thead><tr><th width="181.33333333333331">Property</th><th width="368">Description</th><th>Data Type</th></tr></thead><tbody><tr><td>X</td><td>The location of the top left corner of the web viewer is on the X-axis, where the left-hand side is X=0.</td><td>Number</td></tr><tr><td>Y</td><td>The location of the top left corner of the web viewer on the Y-axis, where the top side is Y=0.</td><td>Number</td></tr><tr><td>Height</td><td>Height of the web viewer in pixels.</td><td>Number</td></tr><tr><td>Width</td><td>Width of the web viewer in pixels.</td><td>Number</td></tr><tr><td>Resize Mode</td><td>Define dimensions of the web viewer component.</td><td>Select from list <code>[Stretch, Float in Place]</code></td></tr></tbody></table>

### **Style**

<table><thead><tr><th>Property</th><th width="334.3333333333333">Description</th><th>Data Type</th></tr></thead><tbody><tr><td>Visible</td><td>Toggle whether your end users can see the web viewer.</td><td>True/False</td></tr><tr><td>Border Style</td><td>Set whether border style is solid, dotted or dashed  (only visible if border width > 0)</td><td>Select from list <code>[solid, dotted, dashed]</code></td></tr><tr><td>Border Color</td><td>Color of border (only visible if border width > 0)</td><td>Color</td></tr><tr><td>Border Width</td><td>Width of border around the web viewer in pixels.</td><td>Number</td></tr><tr><td>Border Radius</td><td>Radius of corners of border on the web viewer in degrees.</td><td>Number</td></tr><tr><td>Shadow Color</td><td>Color of the web viewer's shadow.</td><td>Color</td></tr><tr><td>Shadow Opacity</td><td>Opacity of the web viewer's shadow.</td><td>Number between 0 and 100</td></tr><tr><td>Shadow Radius</td><td>Radius of corners of the web viewer's shadow in pixels.</td><td>Number</td></tr><tr><td>Shadow Offset</td><td>How far the web viewer's shadow should be offset, in height and width, in pixels.</td><td>Number</td></tr></tbody></table>

## Web Viewer Blocks

### Event Blocks

#### When Web Viewer Receives Message

The "when web viewer receives message" block fires when the web viewer receives a message from the web page it's displaying. It returns the "message" output, text that contains the message that was received.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhmtVpjOoDPOq0b7nzY%2F-MhmtYzrZilLwJN-WXCQ%2Fimage.png?alt=media&#x26;token=16d36188-5d58-40a5-8240-e8adda9180de" alt=""></div>

### Function Blocks

#### Call Web Viewer's Reload&#x20;

The "call web viewer's reload" block reloads the web viewer.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWZ9fsYSsJxH4WcN4Jj%2F-MWZFKZVPQjpjLAHDhtB%2Freload.png?alt=media&#x26;token=acf80c16-0043-43be-9bc7-43a41b7555b0" alt=""></div>

#### Call Web Viewer's Back

The "call web viewer's back" block navigates the user back to the previous page visited.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWZ9fsYSsJxH4WcN4Jj%2F-MWZF4-_JlBsk3H_JEBm%2Fback.png?alt=media&#x26;token=07f07caf-d3e1-489c-857a-f03276aed273" alt=""></div>

#### Call Web Viewer's Forward

The "call web viewer's forward" block navigates the user to the next page in the user's browser history.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWZ9fsYSsJxH4WcN4Jj%2F-MWZF5Cre8dysUUB7QGO%2Ffwd.png?alt=media&#x26;token=b5af3943-8191-42b4-9006-caab86949b13" alt="" width="375"></div>

#### Call Web Viewer's Post Message&#x20;

If you own the website displayed in the web viewer, you can send and receive messages between your website and the web viewer using Javascript. The "call web viewer's post message" block posts a message to the website.

You can see examples of sending and receiving messages and get further setup instructions here: [Thunkable Web Viewer Extensions](https://github.com/thunkable/webviewer-extension/).&#x20;

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhmoxYm2IJYSObeRlSr%2F-MhmsfzSZLwizhuivhBJ%2FScreen%20Shot%202021-08-23%20at%2012.59.10%20PM.png?alt=media&#x26;token=bdaeace0-bf67-4fff-b89f-5fc358c33912" alt="" width="563"></div>

{% hint style="info" %}
You may also find connecting to a [Web API](https://docs.thunkable.com/blocks/advanced-app-features/web-api) helpful for sending and receiving information between your app and a website.
{% endhint %}

#### Call Web Viewer's Value From Post Message

The "call web viewer's value from post message" block returns any message received after using the "call web viewer's post message" block.

<div align="left"><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhmoxYm2IJYSObeRlSr%2F-Mhmt4zE5L7UXBWALHUK%2FScreen%20Shot%202021-08-23%20at%201.02.00%20PM.png?alt=media&#x26;token=868ed4b7-40a8-4b61-83e3-534899cb3fb9" alt="" width="563"></div>

### Properties Blocks&#x20;

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.&#x20;

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block.&#x20;

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).