# How to insert an input text into a webpage

**URL:** <https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671>\
**Category:** Questions about Thunkable X\
**Created:** [January 31, 2022, 1:42am UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671 "2022-01-31T01:42:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![freepremiumgrammarly](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@freepremiumgrammarly](https://community.thunkable.com/u/freepremiumgrammarly)\
**Post date:** [January 31, 2022, 1:42am UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/1 "2022-01-31T01:42:14Z")

</div>

hi guys  
first of all, I am sorry as I am new and beginner, I am trying to build an app that gets access details from firebase to insert the text in the webpage at a specific portion using ID/String

for instance:  
I have a premium account and I would like customers to access a premium account without knowing the username and password, the data fitched from firebase and inserted in the login section and login successfully

sorry for my bad English and poor description

Thanks for your support

---

<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:** [January 31, 2022, 9:41am UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/2 "2022-01-31T09:41:29Z")

</div>

You can accomplish this by using `Web Viewer Extension`.

See this

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

See this one of my examples

> [@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:** ![freepremiumgrammarly](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@freepremiumgrammarly](https://community.thunkable.com/u/freepremiumgrammarly)\
**Post date:** [January 31, 2022, 10:52pm UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/3 "2022-01-31T22:52:27Z")

</div>

Thanks for your reply @muneer, but still, I do not understand how to insert text on the webpage… if you can help in showing any login example, I will be really thankful for your support

---

<div class="post-metadata">

**Author:** ![freepremiumgrammarly](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@freepremiumgrammarly](https://community.thunkable.com/u/freepremiumgrammarly)\
**Post date:** [February 2, 2022, 1:21am UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/4 "2022-02-02T01:21:29Z")

</div>

@muneer Could you please help if its possible, thanks in advance

---

<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:** [February 2, 2022, 10:13am UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/5 "2022-02-02T10:13:24Z")

</div>

Did you see what I have sent you. There were 2 examples, one from Thunkable and one by me.

Anyway,  
Let me take you through a simple scenario.  
Suppose you have this html file already in your website.

```auto
<!DOCTYPE html>
<html>
<head>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
</head>
<body>
    <h1>Welcome to Thunkable</h1>
    <p id="demo"></p>
<script>
  ThunkableWebviewerExtension.receiveMessage(function(message) {
    document.getElementById("demo").innerHTML = "Hello <strong>" + message +"</strong>";
});
</script>
</body>
</html>

```

In your Thunkable project, you need a `Web Viewer` component with the URL pointing to your HTML file  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/1/312da2a5b73e72ec60c1453420cea06822d02376.png)

I added a button to the screen and have this code in the `button click` block  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/3/d32900e8f8b5e134dfbfcfa14ecc1257d9a3edad.png)

When I test my project, I first see this  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/c/fc15efaedf24f519740da3059866e8949222c1be.png)

When I click the button, the web page will show whatever name I pass to it.  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/e/4e5322e7d48cf815377c52f97bd8149f19fba996.png)

Hope this makes it clear to you.

---

<div class="post-metadata">

**Author:** ![freepremiumgrammarly](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@freepremiumgrammarly](https://community.thunkable.com/u/freepremiumgrammarly)\
**Post date:** [February 2, 2022, 1:00pm UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/6 "2022-02-02T13:00:27Z")

</div>

Thanks, @muneer, last time even I saw this topic, but it wasn’t easy if the website is public anyway I will try to implement but I am sure it won’t work

---

<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:** [February 2, 2022, 1:28pm UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/7 "2022-02-02T13:28:23Z")

</div>

> [@freepremiumgrammarly](#):
>
> wasn’t easy if the website is public

Whether the website is public or private has no real effect in the solution.

All you need is a site that you can edit the pages not a website that you have no control over.

---

<div class="post-metadata">

**Author:** ![freepremiumgrammarly](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@freepremiumgrammarly](https://community.thunkable.com/u/freepremiumgrammarly)\
**Post date:** [February 3, 2022, 12:04am UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/8 "2022-02-03T00:04:19Z")

</div>

@muneer thanks for your feedback… I found a similar topic previously posted but seems was not possible to use X Thunkable [Using Javascript in webviewer? - #6 by franco\_amato](https://community.thunkable.com/t/using-javascript-in-webviewer/74358/6)

---

<div class="post-metadata">

**Author:** ![freepremiumgrammarly](https://avatars.discourse-cdn.com/v4/letter/f/71e660/32.png) [@freepremiumgrammarly](https://community.thunkable.com/u/freepremiumgrammarly)\
**Post date:** [February 15, 2022, 5:15pm UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/10 "2022-02-15T17:15:50Z")

</div>

if it’s a public website how its possible to add this below line in HTML!!

\<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" ......

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [May 16, 2022, 5:16pm UTC](https://community.thunkable.com/t/how-to-insert-an-input-text-into-a-webpage/1705671/11 "2022-05-16T17:16:34Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.