Run an app in an iframe on a web site

In some cases, you may want to host an app within an existing web site. Technically, the app is hosted within an iframe (inline frame) element that is embedded on the web site. In fact, this is how the app emulators work on the AppSheet web site.

To run an app in an iframe on a web site, you must:

1. Turn on app embedding
2. Embed an app in an iframe

To prevent app creators from running their apps in an iframe, see Prevent app creators from embedding apps in an iframe.

Turn on app embedding

To allow an app to run in an iframe on a web site, turn on app embedding as follows:

1. Open the app in the app editor.
2. Select Security  > Options.
3. Turn on Allow app embedding.

Embed an app in an iframe

The following sections describe how to embed an app in an iframe based on whether the app is public or restricted.

• Embed a public app in an iframe
• Embed a restricted app in an iframe

Embed a public app in an iframe 

Public apps can be embedded in an iframe on any web site.

To embed a public app in an iframe, do the following:

1. Get the ID of the app by using one of the following options:

   • Open the Share dialog, click Share links, and copy the Open in browser link, as described in Notify users about your app.
     
     

   • Open the app in the app editor and copy the appId value in the URL:

     https://www.appsheet.com/template/AppDef?appName=NewApp-2959733&appId=f88b2122-4e1c-4e1f-111f-12eb567c89cf 

   • View and copy the App ID by selecting Settings > Integrations.

2. Add an HTML iframe element to the web site. Use the following iframe code structure and replace the appId value with the app ID copied in step 1:
   <iframe src="https://www.appsheet.com/start/appId" />
3. Optionally, set width and height settings. For example, to display using the approximate dimensions of a mobile phone, try the following settings: <iframe src="https://www.appsheet.com/start/b3756bde-b741-4609-bf7d-e2eee77852d6" width="320" height="568"/>.
    
   Important: In order for users to be able to interact with your app, the entire app must be visible on the screen. Set width and height settings so as not to exceed the screen size of your target audience.
4. Optionally, configure the following options:
   • If you want the hosted app to automatically refresh the app definition and the data every time the web site is opened, you can turn on the refresh option.
   • If you want the hosted app to abandon any unsaved data every time it is opened, you can turn on the wipe option.

   The following shows an example iframe element with both options enabled:
   <iframe src="https://www.appsheet.com/start/b3756bde-b741-4609-bf7d-e2eee77852d6?refresh=1&wipe=1" width="320" height="568"/>

Embed a restricted app in an iframe 

Restricted apps require user sign-in.

To embed a restricted app in an iframe, do the following:

1. Get the ID of the app by using one of the following options:

   • Open the Share dialog, click Share links, and copy the Open in browser link, as described in Notify users about your app.
     
     

   • Open the app in the app editor and copy the appId value in the URL:

     https://www.appsheet.com/template/AppDef?appName=NewApp-2959733&appId=f88b2122-4e1c-4e1f-111f-12eb567c89cf 

   • View and copy the App ID by selecting Settings > Integrations.

2. Create or open a Google Sites site.
3. To add an HTML iframe element to the web site, select Insert > Embed > By URL and enter the following URL, replacing the appId value with the app ID copied in step 1:
   https://www.appsheet.com/start/appId
4. Resize the iframe in the Google Sites editor.
   Important: In order for users to be able to interact with your app, the entire app must be visible on the screen. Adjust the size of the frame so as not to exceed the screen size of your target audience.
5. Optionally, configure the following options:
   • If you want the hosted app to automatically refresh the app definition and the data every time the web site is opened, you can turn on the refresh option.
   • If you want the hosted app to abandon any unsaved data every time it is opened, you can turn on the wipe option.

Prevent app creators from embedding apps in an iframe

Prevent app creators from being able to run their apps in an iframe by using the "Disallow apps in iframes" policy, as described below. For more information, see Define governance policies.

To prevent app creators from being able to run their apps in an iframe:

1. Select My account > Policies.
2. Click + Organization Policy or + Team Policy to add an account or team policy, respectively.
3. Select Disallow apps in iframes from the Policy Template drop-down.
4. Click Next.
5. The policy is preconfigured for you. You can modify any of the field values. See Add a predefined policy for a description of each field. 

   Important: If you modify the Condition field, ensure that you retain the functionality defined below:
   NOT([AllowAppInIFrame])

6. Click Save.