WebView Tutorial

Modified on Fri, 27 Oct, 2023 at 4:49 AM

WebView Tutorial

The WebView Plugin is one of the most versatile plugins to use in the system. Learn how to use it here.

What is the WebView Plugin?

The WebView Plugin is a great way to bring content from a website into your app, and is one of our most versatile plugins!

What are some use cases of WebView Plugin?

Some use cases of this feature include:

  • If you are creating an app for your church, you can bring a digital version of the Bible into your app using this plugin.

  • If you have an online store, you can use the WebView to direct user to that store and its products.

  • If you’re a social blogger, you can bring your blog into the app with this plugin

  • What is the WebView Plugin’s primary function and what are the steps to accomplish it?

    The WebView Plugin provides you with the ability to bring a website’s content into your app which is why it’s so versatile. If it’s on a website, it can be brought into the app with this amazing plugin! Let’s go over how to use it:

    How To Link To A Website And Its Contents

    Step 1: Enter in the URL into the “URL” field

    Simply copy the URL (or link) of the site that you want to bring into the app and paste it into the “URL” field.

    Step 2: Validate Your URL

    To make sure that you entered in a valid URL, click the “Validate” button.

    Step 3: Adjust the WebView Setting if Needed

    The WebView plugin has three settings:

    • Native In-App - The URL is embedded in what’s known as an iFrame that appears in the app.

    • In-App Popup Window - The URL opens up in a popup window, which is still opened in-app.

    • Device's Default External Browser - The URL is opened in the user’s device’s default browser, Chrome for Android users and Safari for iOS users.

    Different URLs will display better in some settings than others due to their coding. Choose the best setting to display your site here.

  • What are some Pro Tips you should know about to take your app to the next level?

    Having worked with apps for years, we’ve learned a thing or two. So, to both help your app stand out and accomplish your primary goals, here are some tips you should consider.

    Pro Tip 1: Play Around With the WebView’s Settings

    Different URLs will display better in some settings than others due to their coding. Some sites, such as those that require you to log-in to an account, don’t allow themselves to be embedded in an iFrame. This means that the “Native in app” setting won’t work for these sites and you should try the “In app popup window” setting instead.

    Pro Tip 2: You Can Use the WebView Plugin to Link to Files or Forms

    You can also link to files such as pdfs or forms. This is perfect if you already have these files hosted on your website, or another service such as DropBox. If you’re using DropBox, I encourage you to check out the article that we’ve created on how to use this service which you can find here.

    Pro Tip 3: Make Sure You Don’t Use Too Many WebView Plugins

    When linking to websites we recommend that you use a maximum of 3 WebView plugins in your app in order to adhere to Apple’s current guidelines. 

    Note: If you’re linking to a file (such as a pdf) you can use more than 3 WebView plugins

    Pro Tip 4: For the Best User Experience, Make Sure Your Site is Mobile Friendly

    Before linking to a website, make sure that it is designed to be mobile friendly. The easiest way to test this is by going to the website in your phone’s browser (Chrome for Android and Safari for iOS) which should give you an idea of how it will look in the WebView plugin.

    Pro Tip 5: Set Sites Where you can Make a Purchase to “Device's default external browser”

    If you are linking to an online store, taking payments through a web page, or are taking donations on a page, you must have the link open outside of the app by setting the WebView to “Device’s default external browser”. If you don’t do this the app will get rejected by Apple and Google in the submission review process. This is due to Apple and Google’s current app store policies.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article