WebView Tutorial

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

Tim Tietz avatar
Written by Tim Tietz
Updated over a week ago

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:

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.

Note: While previewing your app on the Control Panel or through the Preview App link, your validated URL may not display as it would on the native app. Once your app is live, you will be able to view this feature completely.

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.

What are some related articles?

In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage:

Still have questions? No problem! Reach out to us and we’d be happy to help :)

Did this answer your question?