# JavaScript Web Bridge

{% hint style="info" %}
JavaScript Web Bridge is currently in a public beta testing phase.
{% endhint %}

## Overview

JavaScript Web Bridge is a code editor tool that allows Creators to write their own Javascript and turn it into block-based format for use within their projects.

## Add a JavaScript Web Bridge to Your App <a href="#add-a-web-api-to-your-app" id="add-a-web-api-to-your-app"></a>

To add a JavaScript Web Bridge component to your app:

* Go to your Blocks tab.
* Scroll to the bottom of your blocks panel on the left side and find the `Advanced` section.
* Click the expand chevron to show the Advanced invisible components.
* Click the ⊕ icon next to `JavaScript Web Bridges`.&#x20;

  <div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FXdQag4GblDBoTD46NCzZ%2Fadvanced_components.png?alt=media&#x26;token=6ead53f2-aa6b-45d1-805f-40138319f45f" alt=""><figcaption></figcaption></figure></div>

A JavaScript Web Bridge component properties dialog launches. See the chart below for descriptions of the various properties. Click **Submit** to create the JavaScript Web Bridge component, or **Delete** to dismiss the dialog without creating the component.

| Property | Description                                                                                                                                                                                                                                     | Data Type |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| URL      | Set the URL for the location of the code (e.g. Github Repository). HTML files can also be uploaded into a project as an [asset](https://docs.thunkable.com/settings/assets) and the asset name can be used in the URL string (e.g. index.html). | String    |

## Event Blocks

**When JavaScript Web Bridge Receives Message**

The "when JavaScript Web Bridge receives message" block fires when the **JavaScript Web Bridge** receives a message from the the source URL or the HTML asset listed in its settings. It returns the "message" output, text that contains the message that was received.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FaM2vEt1AIV56CKCP463c%2Fjswebridge_receieve.png?alt=media&#x26;token=5dab7da9-5fec-43e0-84dc-0dcd89f9c4a9" alt=""><figcaption></figcaption></figure></div>

## Function Blocks

**Call Web Viewer's Post Message**

If you own the web page listed in the settings of the JavaScript Web Bridge, you can send and receive messages between your web page and the JavaScript Web Bridge using Javascript code. The "call JavaScript Web Bridge's post message" sends a string that can then be used by the web page.

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/).

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fa4norGe4YZclDBOrrBHR%2Fjswebbridge_postmessage.png?alt=media&#x26;token=d0c61ace-3054-41d0-9c6a-ee2d9f56d7bd" alt=""><figcaption></figcaption></figure></div>

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

The "call JavaScript Web Bridge's value from post message" block returns any message received from the webpage using the "JavaScript Web Bridge's post message" block.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FqUqXvhugoyrS2EUYzhSv%2Fjswebbridge_value.png?alt=media&#x26;token=1adf0e6c-a699-4b9e-aa6a-7ecc21633f5c" alt=""><figcaption></figcaption></figure></div>
