Making a Input Alert

Hello all,

I recently came across this when playing around with Thunkable X.

This is a way to add alerts with text inputs (at least on iOS, idk about android)

To do this, you will need the following components:

  • Webviewer

You will also need a simple HTML File, this is what calls the alert, I have included a sample to download here, you will need to open it in your word-editing software, and change what the alert should be, labelled “Prompt” and the background color to match your app. You will also need to re-download this as a .html file. (Community wont let me upload)

HTML Download:
alert.txt (152 Bytes)

Then its time to get coding,

Open a new project in Thunkable X, and upload the HTML file to your files, then set the url of the Webviewer to what you named your .html file, open up your app, and you see that an alert with a input pops up!

Example:

I hope this helps you all out!

Best,
Ian

4 Likes

This is great. I can see many use cases for this. Thanks for sharing @ianphaas!

2 Likes

Thanks,

Any idea on how to send that information back to Thunkable X?

Because right now it doesn’t do anything.

2 Likes

I love it! :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: :heart: :heart:

1 Like

@ianphaas i am not getting how to upload it in my app please share a sample project

i found the way thank you for this tutorial

hmm.
thts like permissons

@ekansh_devs_oo what do you mean by permission

@ianphaas i have a doubt how can we get the text that user has written

yes initialize vars and do

I have attached an improved script below. You can use the “When WebViewer Receives Message” block to get the value the user input.

alert.txt (152 Bytes)

You will need to follow the directions in this post to set it up with Thunkable.

1 Like

@ianphaas i tried already that and tried again with the improved script it gives nothing

@ianphaas The last file you sent is the same as the one above.

1 Like

Sorry, I must have sent the wrong file, try this one again, alertv2.txt (304 Bytes)

2 Likes

nice one @ianphaas looks like there is a problem in your txt file here is the completed one - alertv2.txt (305 Bytes)

in your file you wrote

<!DOCTYPE html>
<html>
<head>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
<script>
var answer = prompt("Insert Text Here");
ThunkableWebviewerExtension.postMessag(answer);
</script>
</head>
<body>
<body>
</html>

at postMessage you missed “e”

here is mine -

<!DOCTYPE html>
<html>
<head>
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
<script>
var answer = prompt("Insert Text Here");
ThunkableWebviewerExtension.postMessage(answer);
</script>
</head>
<body>
<body>
</html>
3 Likes

Sorry about the typo! I was just trying to type it fast so I could get it done! My apologies!

2 Likes