Does anyone have a working example of a Javascript Web Bridge? The sample projects in the documentation 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 but I don’t get a response in the app when previewed in a browser.
<!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>
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.
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!
In general, should my html-wrapped Javascript code work as a local asset or do I need to host it in the cloud?
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?
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 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
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. I’ll try a Github page. Thanks again.
Edit I can see the script file publicly (Test Page) now but this project is still not displaying any messages in a browser preview:
