# How to send/receive a message using js

**URL:** <https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709>\
**Category:** Questions about Thunkable X\
**Created:** [June 25, 2021, 11:12am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709 "2021-06-25T11:12:19Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [June 25, 2021, 11:12am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/1 "2021-06-25T11:12:19Z")

</div>

Hi all.  
Hope you all are having a great Day!

I am Working on a project that connects to my website.

I want to send a message from My web app.  
And receive a message in My web app.

However When i search the Community/Google.  
I can’t find any Working answer.

Can you Guys show me An example of the codes needed to send messages to my app and receive Them in My web app?

Thank You

Cheers  
Luke

---

<div class="post-metadata">

**Author:** ![jaythemanchs](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jaythemanchs/32/92809_2.png) [@jaythemanchs](https://community.thunkable.com/u/jaythemanchs)\
**Post date:** [June 25, 2021, 11:26am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/2 "2021-06-25T11:26:31Z")

</div>

Hi Luke,

You might have heard of this but just to confirm.

> **[thunkable/webviewer-extension](https://github.com/thunkable/webviewer-extension/)**
>
> Communicate between the Thunkable Web Viewer and a website - thunkable/webviewer-extension

An example of the code goes as such.  
**Send Message to Website**

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

**Receive Message on Website**

```auto
ThunkableWebviewerExtension.receiveMessage(function(message) {
  // Do something with your message
  alert(message)
});

```

**Send a Message From Your Website to Thunkable**

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

**Receive Message from Website**

```
ThunkableWebviewerExtension.postMessage('hello world');

```

Happy Coding,

Jay

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 25, 2021, 11:52am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/3 "2021-06-25T11:52:37Z")

</div>

I explained here how to use the web viewer block to send data to .html file and receive data from .html file.

> [@Date operations (No API)](https://community.thunkable.com/t/date-operations-no-api/1355407/3):
>
> I made a simple JavaScript code to get the date after certain number of days. [image] This is giving today’s date but if I add some days I get the future date in the label. [image] All managed by a web viewer extension running .html file added to the project as an asset… The Google sheet solution is still a viable solution and it works just as good. This is the blocks of the project This is the JavaScript Code \<!DOCTYPE html\> \<html\> \<head\> \<script src="https://thunkable.github.…

---

<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:** [June 25, 2021, 12:29pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/4 "2021-06-25T12:29:30Z")

</div>

Thanks @jaythemanchs that helps out a lot.

> [@muneer](#):
>
> I explained here how to use the web viewer block to send data to .html file and receive data from .html file.

I didn’t see that one.

---

<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:** [June 25, 2021, 2:46pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/5 "2021-06-25T14:46:18Z")

</div>

Hi all.  
I’ve just added the post message code to my web app with this code:  
`ThunkableWebviewerExtension.postMessage(xmlText);`  
but nothing happens:  
blocks:  
 ![Screenshot 2021-06-25 4.45.44 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/d/2d41daeacb6c45ee7f2f1bffaee7925ac2b15cfa.png)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 25, 2021, 2:53pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/6 "2021-06-25T14:53:02Z")

</div>

Have you added the Thunkable library?  
Have you tested your html/js code that is runs and the `xmlText` actually has a value?

---

<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:** [June 25, 2021, 2:55pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/7 "2021-06-25T14:55:55Z")

</div>

Yes

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 25, 2021, 2:57pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/8 "2021-06-25T14:57:45Z")

</div>

Did you check the `Dev Tools` and notices no errors?

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

---

<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:** [June 25, 2021, 3:02pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/9 "2021-06-25T15:02:55Z")

</div>

i am looking into it.

---

<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:** [June 25, 2021, 3:11pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/10 "2021-06-25T15:11:28Z")

</div>

it does throw some errors.  
i am looking into the Google community seem to be not t he only one with this error.  
Here is the error:

```auto
Uncaught ReferenceError: ThunkableWebviewerExtension is not defined
    at dGkXWjzwOBzA:519

```

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 25, 2021, 3:16pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/11 "2021-06-25T15:16:25Z")

</div>

Can you start with a vanilla setup.

```auto
<!DOCTYPE html>
<html>
<head>
<script 
    src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"
    type="text/javascript">
</script>
</head>

<script>
    const textData = "This is from my page";
    ThunkableWebviewerExtension.postMessage(textData);
});
</script>
</html>

```

See if this works then you know it is not the extension. If you save if to .html file and call it from your `web viewer` it should give you the result in the `receive message` event.

---

<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:** [June 25, 2021, 5:05pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/12 "2021-06-25T17:05:57Z")

</div>

Hi @muneer the console doesn’t show a error anymore.

Had to change a Line of code.  
However i am not sure CodePen is having server issues at the moment ☹  
And can’t debug Because of this.

Anyways Thanks for helping

---

<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:** [June 26, 2021, 9:51am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/13 "2021-06-26T09:51:40Z")

</div>

Hi @muneer i got this error message in console while debugging:

```auto
Uncaught DOMException: Failed to execute 'postMessage' on 'Window': HTMLUnknownElement object could not be cloned.
    at Object.postMessageToWebview [as postMessage] (https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js:6:21)
    at HTMLDocument.<anonymous> (https://cdpn.io/lukeplays33/debug/eYvJBEa/WPALYROwJVwk:532:33)
    at n (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14784)
    at Object.fireWith (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:15553)
    at Function.ready (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:9773)
    at HTMLDocument.B (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2:14348)

```

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 26, 2021, 10:23am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/14 "2021-06-26T10:23:38Z")

</div>

This means you are declaring the Thunkable library in a wrong section of the .html file or it could not be parsed to the file.

Can you try my earlier suggestion of the vanilla file.

> [@How to send/receive a message using js](https://community.thunkable.com/t/how-to-send-receiver-a-message-using-js/1363709/11):
>
> Can you start with a vanilla setup. \<!DOCTYPE html\> \<html\> \<head\> \<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"\> \</script\> \</head\> \<script\> const textData = "This is from my page"; ThunkableWebviewerExtension.postMessage(textData); }); \</script\> \</html\> See if this works then you know it is not the extension. If you save if to .html file and call it from your web viewer it should give you the result in the…

---

<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:** [June 26, 2021, 10:39am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/15 "2021-06-26T10:39:53Z")

</div>

doesn’t work either ☹

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 26, 2021, 11:09am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/16 "2021-06-26T11:09:12Z")

</div>

When you copy anything from the community posts, check the quotation marks, the community app converts them to accented marks while development environments expects simple quotations.

This could be a reason that prevents your .html file from being processed correctly.

---

<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:** [June 28, 2021, 8:54am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/17 "2021-06-28T08:54:28Z")

</div>

Hi @muneer  
Thank you so much with helping.  
Managed to make it work.  
Thanks a lot!!

---

<div class="post-metadata">

**Author:** ![niluki.liyanagexne](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/niluki.liyanagexne/32/106841_2.png) [@niluki.liyanagexne](https://community.thunkable.com/u/niluki.liyanagexne)\
**Post date:** [July 1, 2021, 4:28am UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/19 "2021-07-01T04:28:24Z")

</div>

Hi  
Good Luck on your project 💯

---

<div class="post-metadata">

**Author:** ![kumarvinod12601mp](https://avatars.discourse-cdn.com/v4/letter/k/ac91a4/32.png) [@kumarvinod12601mp](https://community.thunkable.com/u/kumarvinod12601mp)\
**Post date:** [October 28, 2021, 6:38pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/20 "2021-10-28T18:38:42Z")

</div>

Thank you mam

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:20pm UTC](https://community.thunkable.com/t/how-to-send-receive-a-message-using-js/1363709/21 "2024-11-08T13:20:05Z")

</div>