Wix Mobile Apps: Adding a WebView to Your Own App

Embed web content in your own native mobile app with the WebView element to enable seamless viewing without the need for an external browser. You can add content from your own site or an external source, making the content feel like an integral part of the app. By adding the WebView element, users don't need to open an external browser to view the content.

You can customize the size of the embedded content and control the display of embedded website headers and footers within the WebView element.

Note:

This element is only available for your own mobile app, make sure to purchase a Mobile App Premium plan.

To add a WebView element to your own app:

Dashboard

1. Go to Mobile App in your dashboard.

2. Click the tab with the name of your own mobile app.

3. Click Edit Mobile App.

4. Click the Screen drop-down at the top and choose the screen you want to edit.

5. Click Elements on the left.

6. Click Embed and select the WebView element.

7. Customize the following in the panel on the right:

   • Content: Enter the page URL of the site you want to embed.

   • Layout: Choose a height for your WebView:

     • Dynamic: The height of the WebView auto-adjusts with the screen.

     • Fixed: Set the height of the WebView in pixels.

   • Display: Enable the toggles to show the website header and footer.

     

   • Margins: Drag the Margins sliders to adjust the padding around the WebView.

     Note: Click the Edit individually icon

     

     to separately adjust the margins.

   • General Settings: Click General Settings and choose which device to show this element on: All, Android, or iOS.

     Note: You can show or hide elements of your site depending on what operating system your members are using on their mobile devices. Your elements are visible on all operating systems by default, but you can decide what to show on iOS, Android, or both.

8. Click Save.

Wix app

1. Go to your site in the Wix app.

2. Tap Manage

   

   at the bottom.

3. Tap Mobile App.

4. (If needed) Switch to editing your own mobile app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select Mobile App Builder.

5. Tap Edit.

6. Tap the Screen drop-down at the top and choose the screen you want to edit.

7. Tap + Add Element in the relevant location.

8. Tap Embed at the top, then tap WebView.

9. Customize your element using the options below:

   • Content: Enter the page URL of the site you want to embed.

   • Layout: Choose a height for your WebView:

     • Dynamic: The height of the WebView auto-adjusts with the screen.

     • Fixed: Set the height of the WebView in pixels.

   • Display: Enable the toggles to show the website header and footer.

     

   • Margins: Drag the Margins sliders to adjust the padding around the WebView.

     Note: Click the Edit individually icon

     

     to separately adjust the margins.

   • General Settings: Choose which screen and device you want this element to appear on.

     • Visibility: Choose which device to show this element on: All, Android or iOS.

       Note: You can show or hide elements of your site depending on what operating system your members are using on their mobile devices. Your elements are visible on all operating systems by default, but you can decide what to show on iOS, Android, or both.

     • Location: Select which screen you want the button displayed on.

9. Tap Add.

Wix Studio app

1. Go to your site in the Wix Studio app.

2. Tap Mobile App.

3. (If needed) Switch to editing your own mobile app:

   1. Tap the member app name at the top (e.g. Spaces by Wix App).

   2. Select Mobile App Builder.

4. Tap Edit.

5. Tap the Screen drop-down at the top and choose the screen you want to edit.

6. Tap + Add Element in the relevant location.

7. Tap Embed at the top, then tap WebView.

8. Customize your element using the options below:

   • Content: Enter the page URL of the site you want to embed.

   • Layout: Choose a height for your WebView:

     • Dynamic: The height of the WebView auto-adjusts with the screen.

     • Fixed: Set the height of the WebView in pixels.

   • Display: Enable the toggles to show the website header and footer.

     

   • Margins: Drag the Margins sliders to adjust the padding around the WebView.

     Note: Click the Edit individually icon

     

     to separately adjust the margins.

   • General Settings: Choose which screen and device you want this element to appear on.

     • Visibility: Choose which device to show this element on: All, Android or iOS.

       Note: You can show or hide elements of your site depending on what operating system your members are using on their mobile devices. Your elements are visible on all operating systems by default, but you can decide what to show on iOS, Android, or both.

     • Location: Select which screen you want the button displayed on.

9. Tap Add.