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.
Some websites may not appear when previewing your app on the web. We recommend previewing with the Thunkable Live app on a device.
Properties
Web Viewer
Advanced Properties
Layout
Style
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.
Function Blocks
Call Web Viewer's Reload
The "call web viewer's reload" block reloads the web viewer.
Call Web Viewer's Back
The "call web viewer's back" block navigates the user back to the previous page visited.
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.
Call Web Viewer's Post Message
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.
You may also find connecting to a Web API helpful for sending and receiving information between your app and a website.
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.
Properties Blocks
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.
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.
The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).
Last updated