# How to use "call Postmessage" and "Whene receives message" with Web viewer?

**URL:** <https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168>\
**Category:** Questions about Thunkable X\
**Created:** [March 20, 2020, 10:29am UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168 "2020-03-20T10:29:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![altsoftcode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/altsoftcode/32/62708_2.png) [@altsoftcode](https://community.thunkable.com/u/altsoftcode)\
**Post date:** [March 20, 2020, 10:29am UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/1 "2020-03-20T10:29:29Z")

</div>

First of all I would like to congratulate the creators of the thunkable project. Very good.

Notice in advance that I am no expert. However, I would like to use the webviewer tool to access a url and be able to send and receive information by sending a message. Using javascript ([https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)).

Is this what the webviewer’s “call postmessage” and “whene receives message” methods are for?  
And if so, how does it work?

I have already made some attempts and research, but so far without success.

Could anyone give an example of how to use these methods? Thanks.

I take this opportunity to add that, another very useful function would be “onload” method.

Thank you all.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 20, 2020, 11:28am UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/2 "2020-03-20T11:28:25Z")

</div>

Can you provide more info? Do you have an example of the type of info you need to transmit?

I use API gets and posts to send and receive data

Here is one example post

> [@Help with POST and PHP](http://community.thunkable.com/t/help-with-post-and-php/518771):
>
> Hi my friends, i am tryng to send post data to a php server, in app inventor i have no problem but i can not achieve in thunkable x i have that blocks in app inventor. Please help me! pray pray pray

> [@altsoftcode](#):
>
> I have already made some attempts

Can you show block setups for what you’ve tried already? It’s possible you were on the right path and just a need a slight bump to stay on course

---

<div class="post-metadata">

**Author:** ![altsoftcode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/altsoftcode/32/62708_2.png) [@altsoftcode](https://community.thunkable.com/u/altsoftcode)\
**Post date:** [March 20, 2020, 1:55pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/3 "2020-03-20T13:55:48Z")

</div>

Thank you very much for your reply.  
In fact, I needed before testing the function, to know what is possible to do.

Using an API is not the same. I’m already using it on thunkable, but for other reasons and it works perfectly.

As I mentioned, the objective will be to use the “post message” method, in the same way that it is used in javascript ([https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)) for example when sending a message to an iframe - is this what we are talking about?  
If so, how does it work?

In javascript you can use:  
$ (function () {  
// Create IE + others compatible event handler  
var eventMethod = window.addEventListener? “addEventListener”: “attachEvent”;  
var eventer = window [eventMethod];  
var messageEvent = eventMethod == “attachEvent”? “onmessage”: “message”;

// Listen to message from child window  
eventer (messageEvent, function (e) {  
$ (’# div’). html (‘parent received message !:’ + e.data);  
}, false);  
});

Ideally, this function should be explained and documented in thunkble docs with examples.

Thank you very much.

---

<div class="post-metadata">

**Author:** ![altsoftcode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/altsoftcode/32/62708_2.png) [@altsoftcode](https://community.thunkable.com/u/altsoftcode)\
**Post date:** [March 21, 2020, 11:24am UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/4 "2020-03-21T11:24:45Z")

</div>

It is a little strange that there is no answer, no explanation, no tutorial for a function that exists on the thunkable platform …

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 31, 2020, 5:56pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/5 "2020-03-31T17:56:41Z")

</div>

Hey @daponto this is a brand new feature i think. I am wanting to learn more about this asap.

for example, i want to be able to pass data to a sheet liek this  
I am just learning react.js and basic javascript. (a newbie)  
I would think that i should be able to POST my data and then retrieve it with something like  
the post body would be an object with parameters like “data”:“1,2,3”  
and a short piece of script like this

`function doPost(e) { var data = e.parameter.data}`

and then somehow that gets passed into the code below (which was copied and pasted directly from google)

@actech do you have any insight into this? I’ve seen you reference passing data to the webvier many times.

````
      <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);

          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Year', 'Sales', 'Expenses'],
              ['2004', 1000, 400],
              ['2005', 1170, 460],
              ['2006', 660, 1120],
              ['2007', 1030, 540]
            ]);

            var options = {
              title: 'Company Performance',
              curveType: 'function',
              legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
          }
        </script>
      </head>
      <body>
        <div id="curve_chart" style="width: 900px; height: 500px"></div>
      </body>
    </html>```

````

---

<div class="post-metadata">

**Author:** ![altsoftcode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/altsoftcode/32/62708_2.png) [@altsoftcode](https://community.thunkable.com/u/altsoftcode)\
**Post date:** [April 1, 2020, 10:17am UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/6 "2020-04-01T10:17:19Z")

</div>

Hi @jared thank you for your answer.

I am not an expert maybe that is why i think it is a very confusing answer. Sorry.

---

<div class="post-metadata">

**Author:** ![henrikhngj5](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/henrikhngj5/32/67710_2.png) [@henrikhngj5](https://community.thunkable.com/u/henrikhngj5)\
**Post date:** [April 9, 2020, 10:55am UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/7 "2020-04-09T10:55:29Z")

</div>

I think the question is very valid and simple…

What is the intention with the PostMessage functionality, why is it there and what can we do with it?

I also miss other functionalities that are often present for webviews. Like can you notify me when the URL is changed? or even let me know what the URL is?

I know there is a getURL function, but it simply returns the URL I initially provided. If user navigate to another url, the same URL is returned from my webview, that is not nice.

Do not get me wrong, it is nice to have a webview, but we need more and we need examples 🙂

Just my 5 cents…

---

<div class="post-metadata">

**Author:** ![jonathanvalgarlh4ow](https://avatars.discourse-cdn.com/v4/letter/j/ecc23a/32.png) [@jonathanvalgarlh4ow](https://community.thunkable.com/u/jonathanvalgarlh4ow)\
**Post date:** [May 9, 2020, 11:07pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/8 "2020-05-09T23:07:36Z")

</div>

Hello,

I am trying to include payments in the app (i am aware of google policies).

The most known platform is Paypal. So i tried to do include it using 2 different ways:

- Web Api → [Paypal Api](https://developer.paypal.com/docs/api/overview/#make-rest-api-calls). I don´t get exactly the way of doing it. I didn´t find any tutorial or clear steps to do it. So after obtaining the Oauth2 (first step) i am stocked.

- Web Viewer → [Paypal Checkout](https://developer.paypal.com/docs/checkout/) Everything goes well till the moment i have to receive the answer after the transaction. In other words, i don´t get any answer using this method. ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/e/8e2acaf900e7120c68b3a5e13bea93ea82112e92.png)

Did anyone get the way of doing it?

Many thanks.

---

<div class="post-metadata">

**Author:** ![jonathanvalgarlh4ow](https://avatars.discourse-cdn.com/v4/letter/j/ecc23a/32.png) [@jonathanvalgarlh4ow](https://community.thunkable.com/u/jonathanvalgarlh4ow)\
**Post date:** [May 10, 2020, 5:27am UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/9 "2020-05-10T05:27:53Z")

</div>

I guess that the answer is related to this post: [How to use "call Postmessage" and "Whene receives message" with Web viewer?](http://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/7)

There is no documentation regarding to “Web Viewer” --\> “Receiving messages”

Could someone from the staff give us some guidance?

Thanks.

---

<div class="post-metadata">

**Author:** ![henrikhngj5](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/henrikhngj5/32/67710_2.png) [@henrikhngj5](https://community.thunkable.com/u/henrikhngj5)\
**Post date:** [May 10, 2020, 2:33pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/10 "2020-05-10T14:33:18Z")

</div>

Jonathan, Sorry to say, but we have been begging for some input on this for a while, as the function looks interesting - at least it has a great name, but nobody seem to step up and explain what it is for…

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 10, 2020, 2:59pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/11 "2020-05-10T14:59:17Z")

</div>

This is explained on github.

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

I have already used this as has actech in some examples.

The issue is that this forum is not to teach JavaScript. There are many forums that accomplish that task.

---

<div class="post-metadata">

**Author:** ![jonathanvalgarlh4ow](https://avatars.discourse-cdn.com/v4/letter/j/ecc23a/32.png) [@jonathanvalgarlh4ow](https://community.thunkable.com/u/jonathanvalgarlh4ow)\
**Post date:** [May 10, 2020, 4:10pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/12 "2020-05-10T16:10:38Z")

</div>

@jared You make me happy today!

I really apreciate.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 10, 2020, 4:36pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/13 "2020-05-10T16:36:29Z")

</div>

If you do get it working, please post your solution here. I think other community members would love to see the solution, as well as me!

---

<div class="post-metadata">

**Author:** ![jonathanvalgarlh4ow](https://avatars.discourse-cdn.com/v4/letter/j/ecc23a/32.png) [@jonathanvalgarlh4ow](https://community.thunkable.com/u/jonathanvalgarlh4ow)\
**Post date:** [May 10, 2020, 5:31pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/14 "2020-05-10T17:31:32Z")

</div>

I just got it working. This would be the way (Using WebViewer)

**In thunkable** → When i press the Button3 the webviewer goes to the adress where the html is. And when the purchase is done, it receives the message from html file.

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

**In the html file** → I placed the text of the Prueba.txt.  
[Prueba.txt](https://community.thunkable.com/uploads/short-url/lsnuGKcIOFAmLJB8rOO04t1EJGl.txt) (1.9 KB)

So, the process would be: You click Button3 in Thunkable, the webviewer goes to your web page where you will see paypal buttons, you click on them, you accept (as a buyer) to send the money. Then when everything is completed, you will receive in Thunkable the message with the order info.

I am sure that there are better ways to do it, but at least this seems to be working.

Regards!

---

<div class="post-metadata">

**Author:** ![henrikhngj5](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/henrikhngj5/32/67710_2.png) [@henrikhngj5](https://community.thunkable.com/u/henrikhngj5)\
**Post date:** [May 10, 2020, 7:17pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/15 "2020-05-10T19:17:31Z")

</div>

Jared, that is a bit harsh - a few lines of text on how to setup the communication is a fair level of documentation imho. Your 14 lines would suffice for most.

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [May 10, 2020, 7:23pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/16 "2020-05-10T19:23:50Z")

</div>

> [@henrikhngj5](#):
>
> communication is a fair level of documentation imho. Your 14 lines would suffice for most.

I’m sorry if you feel something I said is harsh. I don’t intend it to be so. I will try to choose my wording more carefully in the future.

I think that @jonathanvalgarlh4ow provided a good explanation there! Thank you!

---

<div class="post-metadata">

**Author:** ![jane](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jane/32/27575_2.png) [@jane](https://community.thunkable.com/u/jane)\
**Post date:** [May 21, 2020, 11:20am UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/17 "2020-05-21T11:20:54Z")

</div>

Hi everyone,

Sorry for the delay in adding these details to the [Web Viewer docs.](https://docs.thunkable.com/web-viewer)

The docs have been updated, giving a general overview of what the Post Message/Receives Message blocks do.

They point to the GitHub for greater detail about how to implement this, since at that point you’re getting into web development so it makes sense to point to an external resource.

Thanks for bringing this to our attention!

---

<div class="post-metadata">

**Author:** ![krunallathiya21.kl0b](https://avatars.discourse-cdn.com/v4/letter/k/e8c25b/32.png) [@krunallathiya21.kl0b](https://community.thunkable.com/u/krunallathiya21.kl0b)\
**Post date:** [August 27, 2020, 12:44pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/18 "2020-08-27T12:44:17Z")

</div>

I hope that you are using Axios as a network request library. [Axios](https://appdividend.com/2018/08/30/getting-started-with-axios-tutorial-example/) is promise-based, which gives you the ability to take advantage of JavaScript’s `async` and `await` for more readable asynchronous code.

I don’t know what is your response when the promise is resolved. Is it an error or plain HTML?

---

<div class="post-metadata">

**Author:** ![maxb](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/maxb/32/35200_2.png) [@maxb](https://community.thunkable.com/u/maxb)\
**Post date:** [September 18, 2020, 4:13pm UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/19 "2020-09-18T16:13:48Z")

</div>

I’m interested in paying with paypal too, can you help me better understand what to do in the app?  
Thx

---

<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, 11:29am UTC](https://community.thunkable.com/t/how-to-use-call-postmessage-and-whene-receives-message-with-web-viewer/525168/20 "2024-11-08T11:29:05Z")

</div>