Using Javascript in webviewer?

How to fill out a form of a webpage and click a button using some JavaScript.

This was possible in classic. wherein webviewer1.goToUrl: javascript:(function() {…}

Can this be done in Thunkable X Webviewer?
So that I can auto Login to my website, from App?


See the Canvas and HTML screens in this project.

If you need two-way data exchange between the app and WebViewer, then use FireBase and FireBase JavaScript for this.

Good morning, I have the same problem with you. Have you solved it?

Did you resolve your issue?
I need the app to auto fill user/pass into my webview too.
anyone have solution?

You should be able to accomplish this soon! I hired a developer on to do something like this for me. It cost 7$ in total.

1 Like

Assuming you own the website, you can write javascript to get a message from Thunkable that contains the username and password, and use that to fill in the webview. You’ll need to include thunkableWebviewerExtension.js on the webpage. There is a simple example linked on the page below


You’ll this be used to inject other types of data @paulmw. I’m thinking stuff like hosting a page with a google chart. Could I send the chart data and let my server render the image?

You can definitely have a chart in a webpage and pass data using these block (it’s one of the reasons I’ve implemented this).

So you should only send strings as messages. What I’d do is create a list or object in Thunkable that has the data you want, then use the “generateJSONFromObject” block to make a JSON string. Use the post message block with that string, and then in your website’s javascript use JSON.parse(message), and then you’ll have an object with all of your data.


Just made a graph example for you:
The code for the html is here:

Both are linked from the github page:

I like C3.js so I used that, but the concept is the same for other graphing libraries.



WOWWWW, :bowing_man:

Thanks!! I need to look into this more. I like this a lot! Is it safe to assume we can only pass along 1 piece of info or could more be passed along in an object? For example, i am using for my graphs currently, and i pass along in an API POST, custom tick marks for both X and Y axis, and coordinates for a trendline.


Yes you can use an object.

The key is that the post message block only takes in strings. But as long as you use the generateJSONFromObject block (like in my example), you can convert a list or object into a string. In my example I converted the shuffled list into a string, then used JSON.parse(message) to get the list back so I could use it in the graph.


Thanks @paulmw, I will have to study this. I see how you got the first item (i think), you when you bindto “#chartScreen Shot 2020-04-05 at 12.11.35 AM that takes what was in the JSON string and concatenates the string to the correct place in [‘data’],

and then this code overwrites(?) the original code where the bindto method is.

If that’s close, I thank and the couple hours of javascript i have under my belt. If not, I drop my head in shame and i’ll go study some more. lol

Thanks for all of your help!!

Yeah, you got it mostly correct. The code is essentially copied from the c3 documentation:

“bindto” basically finds the element with id “chart” and now the library knows where it should generate the graph.

columns:[ ['data1'] ] sets the initial data of the data1 series, which is empty to start. If I wrote columns:[ ['data1', 5,6, 7] ], then there would be 3 data points on the graph, (0,5), (1, 6), and (2, 7).

Running chart.load() overwrites the previous column data (which was empty when the graph was initialized). If my message was [7,8,9], then the value of columns is [['data1, 7, 8, 9]], and my graph would have point (0,7), (1,8), and (2, 9).

1 Like

@Kartik14 @inspiringtec1wvk @manyone @cttricks, you may be interested in this thread!

Yes! I was just reading that in their docs! so if i understand then, i could create the entire JSON on my end in the app, and send it to the file. instead of ['data1']concat.(messageList) , i would use chart.Load(messageList);

the first just concatenate the 2 arrays, so i could just replace the entire JSON body i think.
is that correct?

if so, I’ll take a crack at a built up example!

There are lots of ways of handling this, that’s one of them. Try it out, and post if you have questions. I can post another more complicated example with more options if people need it.

I’m stoked! Thanks so much #teamThunkable and @paulmw for all the great features. Man, this is really exciting for me. I really am a graph lover, it’s part of my profession. My app users see between 1-5 graphs every day they use their app. If i size things correctly, I will be able to have much nicer AND interactive graphs!

My most complicated graph JSON looks like this from (which uses chart.js libraries).

  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
      	label: 'Corrects',
      	data: [ 10, 60, 70, 180, 190 ], borderWidth:1,pointBackground:'green',
	fill: false,
    	  label: 'Incorrects',
     	 data: [ .10, 20, 30, 40, 50 ], 
	fill: false, 
	borderColor: 'red', pointStyle:'star', pointRadius:4, borderWidth:1
  options: {
    	title: {
     	 display: true,
      	fontColor: 'Black',
      	fontSize: 32,
    	legend: {
      	position: 'bottom',
    	scales: {
      	yAxes: [{ type: 'logarithmic', 
        	ticks: {
        	autoSkip: false,
        	min:.001, max: 1000,callback: function (value, index, values) {if( value==.001 || value==.01 || value==.1 || value==1 || value==10 || value==100 || value==1000){return value + ' per minute';}},}}],},},}

Random unsolicited advice for how to approach this:
I’m guessing some information displayed in your graph comes from your app. I would only send the information generated from the app to the webpage using postMessage. Then read the message in your webpage and use it to generate the JSON you’ll use for Don’t try making this entire JSON object in Thunkable. For maintainability, you’ll want to use the fewest blocks possible to make this work.

1 Like

That makes sense and thank you for the advice, I probably wouldn’t have thought twice about it. I have been limited with what I could do until now.

If you find the time, could you provide an example where more than 1 parameter is sent in an object and parsed by the HTML page? for example, the data, name of what is being graphed, a chart title, and a Y-axis title :smiley_cat: If not, I will probably just send the entire JSON body for now, which works but i’d love to clean up the code.

Currently, I have to compose and send that code 5 times in an API POST and only receive a static chart image. This new block and option really make graphs look much nicer! (and other things web-related much more convenient!)

also, I obviously still have a lot of coding to learn so thank you!

nice thank you I’m adding framework 7 to thunkable right now !
but I have one problem I added all files to thunkable assets added index.html to the webview but I don’t know wheere to href and src my files… for the moment I sync them to my domaine

would like to have them on thunkable… I tryed with / and without

how can I tell if i click in webview a button that i goes on a screen in thunkable ?

If you have already built an app using FW7, why package in a Thunkable App,

I mean, it seems like a cool idea, but wouldn’t it be easier to package/compile this with cordova(?)