# \[closed\] Insert static data into WebApp via URL or other method

**URL:** <https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422>\
**Category:** Questions about Thunkable X\
**Created:** [October 19, 2021, 5:24pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422 "2021-10-19T17:24:19Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hdawc](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hdawc/32/119068_2.png) [@hdawc](https://community.thunkable.com/u/hdawc)\
**Post date:** [October 19, 2021, 5:24pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/1 "2021-10-19T17:24:19Z")

</div>

Is there a way to insert (simple) data to a webapp before it loads?

The scenario is that I have a web app and it will be displayed on a few screens, but each screen has different info…

There is a short setup screen to choose the identity which represents the physical placement of the screen.

From that point it works fine.

However. When the device is restarted (or if there is a power outage), it goes back to the setup screen because the browser is not cached (this is a remote kiosk device, so can’t be setup every time)

So, is there a way to feed a webapp information either from the browser or within the URL itself, for example:  
`/?location=1234`  
And have the webapp grab that data?

I don’t want to create a load of cloned apps so I’m hoping there is a solution to this, such as somehow setting/getting the location via static text or even via a WebAPI (I build my own).

Thank you.

---

<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:** [October 19, 2021, 5:41pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/2 "2021-10-19T17:41:40Z")

</div>

When you say webapp, do you mean the Web Viewer component? Are you trying to open a url that may change? If so, just read that url from an external data source such as a Google Sheet, Airtable or Firebase.

---

<div class="post-metadata">

**Author:** ![hdawc](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hdawc/32/119068_2.png) [@hdawc](https://community.thunkable.com/u/hdawc)\
**Post date:** [October 19, 2021, 5:43pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/3 "2021-10-19T17:43:22Z")

</div>

Perhaps something using this:

> **[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

The webapp will be embedded in my own webpage, and although I don’t know JavaScript, I do have full control over what goes in the HTML.

Is there a way I can automatically send the webapp a ‘message’, so when the page loads, it gets the message from the JS above or below the iframe the webapp is in?  
(maybe this? [GitHub - thunkable/webviewer-extension: Communicate between the Thunkable Web Viewer and a website](https://github.com/thunkable/webviewer-extension/#basic-message-passing))

---

<div class="post-metadata">

**Author:** ![hdawc](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hdawc/32/119068_2.png) [@hdawc](https://community.thunkable.com/u/hdawc)\
**Post date:** [October 19, 2021, 5:50pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/4 "2021-10-19T17:50:15Z")

</div>

Hi, no, sorry, I do mean WebApp

To clarify, I would like to setup the WebApp (e.g. [https://thunkable.site/w/myappid](https://thunkable.site/w/myappid)) so that it receives some data from the browser itself, or uses some function to get device specific data, for example the hostname or (local) IP address.

The reason being, each device needs to self-identify and tell the webapp that data so it can display the correct.

If I can put something in the HTML of the webpage I create that holds the iframe for the WebApp, that the WebApp reads, that would be very useful 🙂  
e.g.

```auto
<html>
<script>some identification data here</script>
<iframe src="https://thunkable.site/w/K0XDxMqwl" title="Chop Down the Tree Thunkable App" height = 500 width = 500></iframe>
</html>

```

Then the WebApp reads that identification data (and uses it).

---

<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:** [October 19, 2021, 5:51pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/5 "2021-10-19T17:51:20Z")

</div>

If you have total control over your web page then you can send and receive messages between the web page and the Thunkable app using `Web Viewer Extension`.

---

<div class="post-metadata">

**Author:** ![hdawc](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hdawc/32/119068_2.png) [@hdawc](https://community.thunkable.com/u/hdawc)\
**Post date:** [October 19, 2021, 5:56pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/6 "2021-10-19T17:56:29Z")

</div>

So perhaps something like:

```auto
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
<div id="locationData">Location1234</div>
<script type="text/javascript">
    // when page loads, wait 1 second and send data
setTimeout(() => {
document.getElementById('locationData').onload = function() {
      ThunkableWebviewerExtension.postMessage('locationData');
    }
}, 1000);
 </script>
<iframe>......</iframe>

```

Again, I don’t know JS so this could be very wrong! 🙂

---

<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:** [October 19, 2021, 5:59pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/7 "2021-10-19T17:59:18Z")

</div>

Yes, basically this is how you will do it. In your app you will have a `Web Viewer` component to receive the message from your HTML file.

---

<div class="post-metadata">

**Author:** ![hdawc](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hdawc/32/119068_2.png) [@hdawc](https://community.thunkable.com/u/hdawc)\
**Post date:** [October 19, 2021, 6:00pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/8 "2021-10-19T18:00:34Z")

</div>

Thank you.

Will the WebViewer receive the data between the HTML DIV tags, or the whole HTML element with the relevant ID?

---

<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:** [October 19, 2021, 6:23pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/9 "2021-10-19T18:23:31Z")

</div>

It will send back whatever you pass to it whether a whole HTML element or a certain tag/property in the element.

See this example. I’m passing date elements to the HTML file and receiving a date object back.

> [@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:** ![hdawc](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hdawc/32/119068_2.png) [@hdawc](https://community.thunkable.com/u/hdawc)\
**Post date:** [October 19, 2021, 6:27pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/10 "2021-10-19T18:27:56Z")

</div>

Wait, so does the script have to be IN the WebView within the app itself, or can it be in the HTML that holds the iframe which displays the WebApp?

---

<div class="post-metadata">

**Author:** ![hdawc](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hdawc/32/119068_2.png) [@hdawc](https://community.thunkable.com/u/hdawc)\
**Post date:** [October 19, 2021, 6:39pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/11 "2021-10-19T18:39:01Z")

</div>

I do have it working, but only when the WebView navigates to the webpage with the script in it.

What I’m looking for is to put the script outside the iframe that holds the WebApp, I suppose that is not possible?

---

<div class="post-metadata">

**Author:** ![hdawc](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hdawc/32/119068_2.png) [@hdawc](https://community.thunkable.com/u/hdawc)\
**Post date:** [October 19, 2021, 9:01pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/12 "2021-10-19T21:01:14Z")

</div>

Please see this new post as it explains things more clearly, but also is a different topic as it is about getting device data, not inserting data into a URL.

> [@Can I get the device's WiFi or host name, local IP or other device identifier?](https://community.thunkable.com/t/can-i-get-the-devices-wifi-name-local-ip-or-other-device-identifier/1570641):
>
> I’m using a WebApp (not referring to a webview), to display data on a large screen. The data itself is irrelevant. What I need to do is have the WebApp get some data from either the device (Raspberry Pi running Chrome) or the local network, that tells the WebApp something unique about this device that is running the WebApp. For example, the local IP, or a device ID that I can reference in the WebApp itself. If Push Notifications worked I could use the OneSignal ID. But it doesn’t. I saw actec…

---

<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:14pm UTC](https://community.thunkable.com/t/closed-insert-static-data-into-webapp-via-url-or-other-method/1570422/13 "2024-11-08T13:14:46Z")

</div>