Communication between a WP page and Thunkable/app via web viewer (question)

Hi there,

I’ve been using Wordpress as an easy backend for my app and integrated the site to my app via the web viewer. I’ve used the following kind of script structure to simply send messages from my site to the app via the web viewer:

And then on the Thunkable/app side, I’ve utilized the following block structure to receive the message:

And it has worked well.

Now, I’ve been wondering could I somehow use the javascript to send a message to the app web viewer about the particular user that’s logged in and using the site. So, the script should be modified to contain the Wordpress user id for the user who’s currently logged in on the site. I searched for some script examples, and evidently this can be done, but as I was a bit unsure, I decided to ask if anyone here would know how to do this?

I’d be really happy if you could help me out here. Thank you!

Maybe @jared @muneer or some others might know?

1 Like

You basically need to add a JavaScript Event Listener for the event you want to report to the app and in the listener you need to call ThunkableWebviewerExtension.postMessage() and provide whatever information you want to pass to the app in this function.

1 Like

Thank you!

However, I was wondering if you @muneer or anyone else had particular experience from using javascript to send a message containing the user id of a user that’s logged in onto the Wordpress site that’s at that moment on display on the web viewer (or merely on a regular browser for that matter). Maybe this is not even hard, but as I came across a few different examples for javascript, I was wondering if anyone here had experience of this kind of script usage. Just a javascript newbie here. :slight_smile:

I have lots of experience but none with Wordpress. Is there a way in WordPress to identify when a message has been posted to an iFrame or to any other element?

1 Like

Thanks for the reply @jared – although I have no clue whether this can be done.

But what I’ve found out, related to my original intent, is that you’ll have a php function on Wordpress for getting the id of the current user (that’s logged in). And somehow the output of this function should then be passed on to javascript – which should then be, eventually, posted as a message for the web viewer.

For getting the user id with php & javascript combination, I found for example this: plugin development - Print WordPress username id inside JavaScript - WordPress Development Stack Exchange

So, ultimately, I should somehow enclose this php/javascript magic for getting the user id of the logged in user inside the post message javascript function that I’ve already been using. I was wondering if anyone here knew how to put these pieces together. :slight_smile:

The benefit of this would be that when I let the user view my web page on the web viewer, and the user is logged in on the site and interacting there, I could then inform my app that a particular user is now browsing the site, which would then allow me to customize things better on the app side.

1 Like

The function.php of WordPress is a solution but not very much the ideal one for the Thunkable code.

You see, Thunkable requires that you first add the their script in the HEAD tag of the HTML page and then use your own script in the end of the BODY tag to be able to detect actions within the page.

You will need to install the Header Footer PLUGIN of WordPress and then in the plugin use the header part to include

<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>

Then use the footer part of the plugin to paste your script.

1 Like

Thank you! I’ll try this out & tinker with the examples, and see how far I can get. :slight_smile:

1 Like