Website Viewer On App Inventor

App Inventor has a component called WebViewer. We can load a webpage/website into an app using WebViewer component. To do that, we can just drag the WebViewer component to Screen1 window and set the HomeUrl property of the WebViewer to the webpage we want to view when the app boots up. Note that including a network protocol such as http or https is important, otherwise, the webpage won’t load. If you try, it won’t work, but will work. For our sample app, we will have a text box where a user can specify a URL and press Go button to load the webpage. We will also have previous and next buttons to navigate through pages.

This is how our app would look like-


We can set the HomeUrl either on the viewer/designer window or on the blocks editor. If you’ve taken a look at the blocks snapshot below, we have set the HomeUrl on the blocks editor under Screen1.Initialize event. There, we also set the previous and next buttons Enabled property to false. When a user taps on Go button, we first check if the URL in the text box contains http:// or https://, if it does, we simply load the webpage; if it doesn’t, we append http:// at the beginning of the specified URL and load. Since we were able to load a webpage, we set the previous button’s Enabled property to true. Note that if the text box is empty and user presses Go, the viewer will try to load http:// which obviously is not valid. You can always check if the text box is empty. If empty, don’t load anything. We didn’t here because we want to see the default behavior when a URL is invalid.


Cool Web Viewer blocks


When previous button is pressed, we enable the next button since there’s a page we can forward to. We also check if any other pages we can go back to by using CanGoBack procedure of WebViewer component. We do the opposite when next button is pressed.

Download the source of this app CoolWebViewer.


Hardware Back Button Support

So far we have done ok. But, we can only go back by pressing Previous button, not using hardware back button. If we press device back button, app closes. Let’s modify the app. We are going to add another screen. Don’t worry we don’t need to do that. I am doing that because someone asked in the comment section below. First screen will only have a button that opens Screen2 if pressed and Screen2 will have the components we had in the app above. Let’s see what we mean-


Going to Screen2 is easy. On Screen1‘s Button1.Click event we do-


As you can see, we only opened Screen2. open another screen block can be found under Control drawer on Blocks window. We have to modify what we did in our first app above to achieve the functionality we want. Let’s take a look at the complete blocks view on Screen2-


It’s very similar to what we did in our first app above. Changes are – we created a procedure named GoBack so that both PrevButton.Click and Screen2.BackPressed can use it. The only thing you need to pay attention to is Screen2.BackPressed event. We first check if there’s a page to go back to, if we do, we call GoBack procedure. If none, we close the current screen. Hence, we are going to the previous screen as we didn’t close Screen1.

That’s it.

You can Download the modified verion of the app – WebViewerWithScreens.



  1. Thank you very much for your tutorials, it helps a dummy like me to learn and understand the program better. I tried the example above, it works on some sites well but when I go I get a zoom effect of the website. Is there any way I can work around this? And how do I change the font size of the website in my screen? I have been looking everywhere for an example or tutorial for this, but have not found it yet. Please help. Thank you.

    • This should be handled by the website in question. When a webserver receives a request from a mobile device, they can serve a mobile friendly version. For example, you can try viewing this site on a mobile browser and you will see a stream down version of the site. WebViewer component just views the page you request, nothing more.

      • I have a similar issue and it doesn’t seem like it is the website. Just to test, I created an image with pixel markers every 100px where the size of the whole image is 800x900px and my phone resolution is 1280×720. When I set the URL just to the image (no html) it shows only about 320x550px and there is no way to zoom out to see the whole image. When I open the same URL in the standard Android browser on the same phone, I see the whole image and more, as one would expect.

  2. Thanks for the explanation Sajal Dutta, really appreciate it very much.

  3. Hi,Mr.Sajal. i’m nubie in app inventor. Is it possible to send or receive data using webviewer? By the way, how can i make a facebook login using app inventor? Thank you 4 ur attention and answers..

      • Hi Mr.Sajal,
        i’ve read ur post on Web Component – JSON Response On App Inventor. There is an url for the web component, the we can receive the JSON respond and we can decode for our needs in app inventor. To make a facebook login, in my app, what/where is the url ?

        Thank you 4 ur kind attention.

        • I am afraid you cannot do facebook integration with App Inventor as of the moment.

  4. Hi Sajal,

    I have created an app with 2 screens, 1st as a welcome screen and when visitor clicks a button 2nd screen loads where I have put the webviewer option and mh website opens. But when I press back button on website, it sends me back to 1st screen and not on the earlier page. How can I solve this issue?

    Thank you

    • I extended the tutorial above and added “Hardware Back Button Support”.

  5. Hi Mr.Sajal,
    Can we get Web view Current Url by
    Set global variable to Web view Current Url ?

    When i try it, it returns empty string.

    Or should i use Set Textbox text to retrieve the value of Web View Current Url?

    Thank you

    • See the second section above (Hardware Back Button Support). On NextButton.Click event and GoBack procedure, I setup text box’s text with the current url.

  6. Dear, I can not able to view youtube videos from the webviewer, any recommendation you can give me? Thank you

  7. hi. i want to be able to choose an image from the Internet and put that image into another screen. is this possible and how?

    • You just need to use the url of the image as the picture source as an instance.

  8. Hi there Mr Sajal. How can i mask an image that i get from the internet with some coloyred blocks that wen clicked will disappear???

    • Try using a semi transparent color rectangle as the same as the picture you have and put it on top of the image from blocks window.

  9. Hi Mr. Sajal.I was thinking of making a web browser which could read the text on it.But I am unable to get the text.How can I extract the text from a web page to speak using Text To Speech???
    Plz help me.

  10. Hi Sajal,

    Actually I have two questions. First: I’m trying to build an app for a school, where there’s a class schedule (days and subjects of the day for each classroom), I could create a screen for every day and every classroom, but there would be too many screens. How can I use tinyDB component to make it easier?
    Second: When click a link in the webviewer the goback button isn’t enabled.
    Thanks in advance.

  11. Buon giorno
    quando utilizzo web viewer insieme alla pagina nel diplay appare anche il pulsantino di zoom
    Posso eliminarlo?
    Se si, come faccio?

  12. I have a web with html 5 and h264 videos. All runs perfect with web viewer except to play the videos. Do you know if i can do anythink to solve this?

    • Are those videos playable on pre-loaded phone browser (e.g. Chrome)?

  13. Hi Sajal,
    I’ve a question regarding using webviewer in AppInventor.
    Is there a way to display the latest url, after the user has clicked other link and opened other webpage than the original webpage that was opened by key-in the UrlTextBox?
    Thanks in advance.

  14. Hi Sajal
    From this tutorial it seems you first developed screen2 and then added screen1. If so, how did you change in App Inventor the Start Screen; i.e. the screen displayed when you open the app?
    Thank you in advance

    • Hi again
      Just as a clarification of my question… I mean if you first develop CoolWebViewer screen logic and then add to the project Screen1 logic (renaming CoolWebViewer screen as Screen2), does App Inventor allow to switch Start Screen from CoolWebViewer/Screen2 to Screen1?

      • First screen is always Screen1 which is your start screen. You can always go from one to another.

  15. Can you explain how to add the id or the words in the link that has been set by the two text boxes and can be displayed via the web viewer?

    xxx I want to specify and can be opened with a web viewer

  16. Can you integrate a recipe api with app inventor

  17. This is terrific!

    I spent a lot of time checking out “create your own app” options before stumbling across AppInventor (which I wish had happened first).

    I have two questions – 1: would it be possible to have the previous/next navigation buttons overlap the web viewer? I have round, semi-transparent icons that I’d love to put in the upper left and right corners.

    2: is it possible to have the web-viewer default to a “zoomed-out” mode? I’ve deleted the URL entry part of your sample and used the web-viewer to display a WordPress site. The main page of my theme displays perfectly, but the links (to posts) display zoomed in first. They can be zoomed out – is there a way to make that default?

    Before you refer to this maybe being a theme issue, let me say that one of the aforementioned “make-your-own-app” gizmos I tried (don’t ask which one – none of them worked for me so I disregarded each one) displayed the linked pages as “optimized-for-mobile” …meaning the largest elements were zoomed out to fit the screen.

    Is it possible to have pages display that way?

      • Argh, that is frustrating. When I view the page on my S4’s native browser (not Chrome) it formats the pages perfectly. It’s a site with a responsive ‘optimized for mobile’ theme. Chrome (and some other browsers) show the page zoomed to the first column of text.

        Thanks for the reply; looks like I’m going to have to make a suggestion for the developers.

  18. i have a question that i already use app using MIT app inventor2
    but i want to know that my website(URL) has some downloading link..
    but in web view of android app i can’t download that file directly…
    no feedback to follow that URL..
    can this Resolved?????

    • If you open your url on your phone using Chrome/Browser, can you download it?

  19. i am pulling data from a fusion table. I have a data column called URL. How do I make a button that appears and is clickable to load the URL that is part of the data row…for example, city, category, restaurant, url. I have all the other parts build except the url button part.

    • You should be able to create your custom UI using a text field column showing URLs, another column that says ‘Visit’ to visit the URL.

  20. Hi,

    Just would like to check. I already create the the apps using webviewer to my website. I manage to point it to my website. in my website I have few fields for me to input some data.

    I manage to input all the text field but when it comes to the image field, the browse button on my website didn’t work. therefor I am not able to upload or capture image from mobile. the browse button doesn’t seem to work.

    Appriciate your help on how I can solve this issue.


    • This sounds like a bug. Can you please file an issue on app inventor site?

  21. Hi,
    Is it possible to have an offline map with specific pins in order to zoom in or zoom out, or we have to make it differently as with an image?

  22. Hi Sajal, I made a media app when I use a button that I Rename to (GOBack)from Screen2 to Screen1.

    When I use webviewer1 to open the video from youtube It’s work.

    BUT the problem when I Press Button Goback to (Screen1) the Sound doesn’t stop it’s still works while I’m in the Screen1.


  23. Hi Sajal

    I made a media app and use two screen when I’m in the screen2 and the WebViewer is work from youtube or any video or sound website .

    BUT when I press the button Goback tho return from the screen2 to screen1 It’s return to the screen1 with the sound .

    How Can I Solve This Problem????

    thank you

  24. Is it possible to use webviewer to browse localhost and have your app essentially browser a website that is all locally stored on the phone? Using something like Palapa webserver?

    • As long as you can load using normal browser in device, yes it should be possible.

  25. Hi Sajal ,

    I have created an app with the Web Viewer. The site which shows the Webviewer has a link that includes a phone number. In the browser on my phone he sees the link as a phone number , but the Webviewer sees the link as a website. How can I ensure that the Webviewer sees the link as a phone number.

  26. I have a webviewer page that allows for URL input and navigation. I have my back and forward buttons enabled to false and a predefined website loading in the webviewer when the page initialises. What I would like to do is have my back button enable if you go to a link within the website and also display that link in the text box I have for the URL.

    Is this at all possible? I ask a this would make it feel more like being on a full web browser like Chrome.

    • Yes, it’s possible. Say your predefined website is If you want to enable only links within, you can just check if the url they are trying to go back to or forward to contains or the like domains/subdomains.

  27. How can I zoom a image in a buttom.
    Basically I want set a image in screen 1, which can be zoomed without using url

  28. Hello sir, how to add my admod on the app. Thanks

  29. Hi Sajal,
    I’ve tried your tutorial to my app. I have a question to you,
    How to run Javascript that include in my web can run on webviewer app?
    cause some command in my website can’t run properly when I open to these app.
    Many thanks.

  30. Dear Sajal:
    How to get the webview action response as your first sample?
    When user press the hyperlink or button of webview content of first sample, then program well go on next screen with the hyperlink or buuton click.
    Thanks for your help.


  31. how do I add animation or text while opening a web page.

    • You can use a Notifier to show a text message. You can use a tiny canvas (e.g. a canvas with 100% width and 10% height) at the bottom to show animation.

      • Thanks brother, I managed to insert a text notification on my app , but for a loading animation still appear even if the web already performed. sorry for my bad english.. 🙂

        • Hide the canvas (Visible = false) when ‘CurrentPageTitle’ is not empty and not the same as the previous one or use a Clock and after some seconds, hide the canvas and deactivate the Clock.

  32. Hi My client wishes to havean iOS and Android app when opened it directs to their corporate web site(it is responsive). I believe above is the way to do it? aslo for these type of app can we still have it in app store? I wonder if they will still allow in app store as the app it self is only a outer shell to go to website? can you please advise us?

    • App Inventor is only for Android. And yes, that’s the way to do it.

  33. Dear Sajal Dutta,

    I am going to make an app that sends text and pictures to a web server. Is it possible with App Inventor?

    Could you tell me briefly the steps I should do.

    THank you so much.

  34. Hello, Please Do not show the address page on the WebViewer training when not connected to the Internet to tell.

    • You can remove the text box if you don’t want to show the url.

  35. hi Sajal dear
    Please help me, if it is possible to build a project on the Web Weaver show that when you disconnect another message

  36. Hi thanks for help
    Do not show problems of general hardware application menu like example:
    about this application
    Help me please. Thank

  37. Your post is very effective. Thank you for sharing a good post and knowledge

  38. Hello , I have an application in html5 , jQuery , Bootstrap and php ..

    The mistake is in trying to load a local image to the site , he did not open the gallery to choose the photo .

    How can I fix this?

    Recalling that on my block only has Screen1 inicializer and BackPressed …

    Sorry a typo , I’m using google translator

  39. Hi,

    I’m trying to use the web viewer to insert a widget into my app. I have the embed code of the widget in the form of an html. However, I don’t know how to format the Home URL so that it would link to the widget properly.
    I tried this:
    ” :file:///android_asset/index.html” but it didn’t work.

    I would appreciate it if you could advise me on that.


  40. I am trying to make a screen that you can type in your employee work id number and it will retrieve and save the QR Code using googles api. I can get it to retrieve the Qr Code but can’t figure out how to save the Qr Code that is named Chart.jpg. Any suggestions…

  41. Hi Sajal
    I am trying to get app inventor to load an external html5 file with this path:


    but fails – saying file not found. The file is actually there when I use a file manager on my phone.

    Is my path missing something?…

  42. Dear Sajal

    Thanks so much for the tutorial and the support you have been giving.

    My question was about downloading photos and songs using appinventor2 webviewer.

    Their website says “App Inventor doesn’t (yet) include any way to store files on the SD card. It also doesn’t (yet) include a way to list the files on the SDCard. You’ll have to use other applications or the Android phone file manager for that.”

    So is there are way to call another application/file manager to store stuff coming through the webviewer?


  43. Hi…how to control ptz ip camera using appinventor app like pan tilt ..zoom

    • Your phone camera’s behavior has nothing to do with AI2. Can you please explain what you are trying to do?

Submit a Comment

Your email address will not be published. Required fields are marked *