# Simple Javascript Web Bridge example?

**URL:** <https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881>\
**Category:** Questions about Thunkable X\
**Tags:** javascript\
**Created:** [December 28, 2024, 6:34pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881 "2024-12-28T18:34:02Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [December 28, 2024, 6:34pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/1 "2024-12-28T18:34:02Z")

</div>

Does anyone have a working example of a Javascript Web Bridge? The sample projects in the [documentation](https://docs.thunkable.com/blocks/advanced-app-features/javascript-web-bridge) have expired links so I can’t view them. I’ve tried the scripts provided there as well as my own at [https://github.com/tatiang/scripts/blob/main/javascriptWebBridgeDemo.html](https://github.com/tatiang/scripts/blob/main/javascriptWebBridgeDemo.html) but I don’t get a response in the app when previewed in a browser.

### My Project

> **[Thunkable](https://x.thunkable.com/copy/73b9f8b329d2e8bed0fd391f565e77ef)**

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/3/a39cc8655b92bf0a2c198834b1b48c3f89076b4d.png)

### Code from Github link above:

```auto
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Include the Thunkable Web Viewer Extension -->
    <script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
    <title>Thunkable Web Bridge Demo</title>
  </head>
  <body>
    <!-- Optional: Display received messages -->
    <span id="messageDisplay"></span>
  </body>
  <script type="text/javascript">
    // Function to handle incoming messages that expect a return value
    ThunkableWebviewerExtension.receiveMessageWithReturnValue(function(message, callback) {
      // Create the response by prefixing the received message with "demo: "
      const response = 'demo: ' + message;
      
      // Optionally display the received message on the webpage
      document.getElementById('messageDisplay').innerText = response;
      
      // Send the response back to the Thunkable app
      callback(response);
    });

    // Optional: Handle incoming messages that do not expect a return value
    ThunkableWebviewerExtension.receiveMessage(function(message) {
      // Display the received message with "demo: " prefix
      const response = 'demo: ' + message;
      document.getElementById('messageDisplay').innerText = response;
    });
  </script>
</html>

```

---

<div class="post-metadata">

**Author:** ![sketch](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/sketch/32/109058_2.png) [@sketch](https://community.thunkable.com/u/sketch)\
**Post date:** [December 28, 2024, 6:56pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/2 "2024-12-28T18:56:47Z")

</div>

Hi @tatiang could you try and add a wait block before the call?  
When I do that it works

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [December 28, 2024, 7:00pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/3 "2024-12-28T19:00:47Z")

</div>

The label still isn’t changing for me:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/7/67832e10f2cfe439f0ca0cb94ecdb0184b76be3d.png)

---

<div class="post-metadata">

**Author:** ![shrey](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/shrey/32/105637_2.png) [@shrey](https://community.thunkable.com/u/shrey)\
**Post date:** [December 28, 2024, 7:14pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/4 "2024-12-28T19:14:46Z")

</div>

Maybe try using this url:  
~~[https://html-preview.github.io/?url=https://github.com/tatiang/scripts/blob/main/javascriptWebBridgeDemo.html](https://html-preview.github.io/?url=https://github.com/tatiang/scripts/blob/main/javascriptWebBridgeDemo.html)~~

This one works:  
[https://rawcdn.githack.com/tatiang/scripts/99e8ee6dd2ddd91cb9e051c9564cab2117b794f7/javascriptWebBridgeDemo.html](https://rawcdn.githack.com/tatiang/scripts/99e8ee6dd2ddd91cb9e051c9564cab2117b794f7/javascriptWebBridgeDemo.html)

I used [this website](https://raw.githack.com/) to host your HTML file.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [December 28, 2024, 7:42pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/5 "2024-12-28T19:42:52Z")

</div>

> [@shrey](#):
>
> [Thunkable Web Bridge Demo](https://rawcdn.githack.com/tatiang/scripts/99e8ee6dd2ddd91cb9e051c9564cab2117b794f7/javascriptWebBridgeDemo.html)

Thank you for your help with this. I was able to get a response from the Web Viewer (but not the Javascript bridge) using your hosted file. But I’m not sure why the labels’ text isn’t changing.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/a/aa0b81a945b98a465eb3589fe85a1ac061895f31.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/3/f3a919b5b6cb6c73011c93e50ff7519818557ad6.png)

---

<div class="post-metadata">

**Author:** ![shrey](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/shrey/32/105637_2.png) [@shrey](https://community.thunkable.com/u/shrey)\
**Post date:** [December 28, 2024, 7:57pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/7 "2024-12-28T19:57:15Z")

</div>

For the Post Message block, change it to Value from Post Message, then it should work!

---

<div class="post-metadata">

**Author:** ![shrey](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/shrey/32/105637_2.png) [@shrey](https://community.thunkable.com/u/shrey)\
**Post date:** [December 28, 2024, 7:59pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/8 "2024-12-28T19:59:12Z")

</div>

I’m not sure why the Javascript Bridge doesn’t work, but you can still use the Webviewer for the same purpose

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [December 28, 2024, 8:12pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/9 "2024-12-28T20:12:31Z")

</div>

This isn’t working for me either:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/9/29acff2082bf59b3ba38394bd6f1e80bd4e86af2.png)

---

<div class="post-metadata">

**Author:** ![shrey](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/shrey/32/105637_2.png) [@shrey](https://community.thunkable.com/u/shrey)\
**Post date:** [December 28, 2024, 8:14pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/10 "2024-12-28T20:14:17Z")

</div>

Change the blocks in Screen 1 Opens, not what you did, and delete the receives message blocks. Then, it should work

---

<div class="post-metadata">

**Author:** ![shrey](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/shrey/32/105637_2.png) [@shrey](https://community.thunkable.com/u/shrey)\
**Post date:** [December 28, 2024, 8:20pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/11 "2024-12-28T20:20:07Z")

</div>

Similar to this:

 ![Screenshot_20241228-141928_Chrome](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/9/d95ab5e1339365a7979a4863222f4e10b9377ac0.jpeg)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [December 28, 2024, 8:58pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/12 "2024-12-28T20:58:36Z")

</div>

Okay that works, thank you!

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/d/adc08e4314ac720a2fea4627d3e27d6eb2a8cb23.png)

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/9/a927087515ae1b6d0dffbd74cfd3586e461716d9.png)

---

<div class="post-metadata">

**Author:** ![brianl](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@brianl](https://community.thunkable.com/u/brianl)\
**Post date:** [January 3, 2025, 10:27pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/13 "2025-01-03T22:27:52Z")

</div>

Looks like I’m a little late to this and you got it figured out, but here is some more information that should help: [GitHub - bliu95/webviewer-ext](https://github.com/bliu95/webviewer-ext)

It was made for web viewers but it works the same for js web bridges.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [January 3, 2025, 11:12pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/14 "2025-01-03T23:12:42Z")

</div>

Yes and no… I’ve had inconsistent results and I’m sure it’s my ignorance about Javascript and hosting scripts. The link is really helpful… thanks!

1. In general, should my html-wrapped Javascript code work as a local asset or do I need to host it in the cloud?
2. If I host it in the cloud, is it okay to use the Github share link that includes “blob” or do I need to use “raw” in the url? Or do I need to host it elsewhere?

---

<div class="post-metadata">

**Author:** ![brianl](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@brianl](https://community.thunkable.com/u/brianl)\
**Post date:** [January 3, 2025, 11:23pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/15 "2025-01-03T23:23:33Z")

</div>

I like setting up my code in github (since its free and pretty simple to use). If you are a coding expert and can do it in one go, I would say local is fine, but otherwise, I would recommend any cloud hosting. The reason is if you do local hosting, anytime you want to make even a minor code change, it will be a hassle. You have to delete the old one, and replace with a new one (and you have to use a different file name than the one one). With cloud or github, I can just push the new code and I know that it’ll reflect in Thunkable since the url doesn’t change.

For hosting, however you do it should be fine as long as it is publicly access-able. I’m using [Github pages](https://pages.github.com/) and that’s what I would recommend. If you are unsure, I would just try it in a webviewer and have it console log something just see if it is working

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [January 4, 2025, 12:06am UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/16 "2025-01-04T00:06:00Z")

</div>

> [@brianl](#):
>
> The reason is if you do local hosting, anytime you want to make even a minor code change, it will be a hassle.

I agree. I definitely want to host it on Github if possible. I have a public repository but the Web viewer won’t load the page unless I host the file on [https://rawcdn.githack.com](https://rawcdn.githack.com). I’ll try a Github page. Thanks again.

**Edit** I can see the script file publicly ([Test Page](https://tatiang.github.io/scripts/simple_test.html)) now but this project is still not displaying any messages in a browser preview:

[https://x.thunkable.com/copy/17d659bc6c2fb67ec3d20437000aab71](https://x.thunkable.com/copy/17d659bc6c2fb67ec3d20437000aab71)

---

<div class="post-metadata">

**Author:** ![brianl](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@brianl](https://community.thunkable.com/u/brianl)\
**Post date:** [January 6, 2025, 10:01pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/17 "2025-01-06T22:01:30Z")

</div>

You are missing the [src](https://github.com/bliu95/webviewer-ext?tab=readme-ov-file#setup) in your script. In the console, you will see an error that says

```auto
Uncaught ReferenceError: ThunkableWebviewerExtension is not defined

```

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [January 17, 2025, 5:00am UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/18 "2025-01-17T05:00:10Z")

</div>

Whoops! That’s embarrassing. That’s what I get for using ChatGPT to write my code. Thanks for catching that!

---

<div class="post-metadata">

**Author:** ![brianl](https://avatars.discourse-cdn.com/v4/letter/b/f14d63/32.png) [@brianl](https://community.thunkable.com/u/brianl)\
**Post date:** [January 21, 2025, 10:26pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/19 "2025-01-21T22:26:06Z")

</div>

No problem, it happens.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [April 21, 2025, 10:26pm UTC](https://community.thunkable.com/t/simple-javascript-web-bridge-example/3438881/20 "2025-04-21T22:26:51Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.