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:
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:
- Open the app in the app editor.
- Select Security
> Options.
- 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
Public apps can be embedded in an iframe on any web site.
To embed a public app in an iframe, do the following:
-
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.
-
- 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" />
- Optionally, set
width
andheight
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. - 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"/>
- 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
Embed a restricted app in an iframe
Restricted apps require user sign-in.
Consider the following when running a restricted app in an iframe:
- At this time, restricted apps can only be embedded in a Google Sites web site. Use of a custom domain for your site isn't supported.
- App users must use a web browser that:
- Is a chromium-based browser (supports IntersectionObserverV2 API).
- Doesn't block third-party cookies.
Restricted apps use third-party cookies. Browsing in Incognito mode in Chrome or setting your browser to block third-party cookies will prevent credentials from being passed in an embedded context. If using Chrome, it's recommended to be in a standard user profile session.
To embed a restricted app in an iframe, do the following:
-
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.
-
- Create or open a Google Sites site.
- 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
- 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.
- 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.
- 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
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:
- Select My account > Policies.
- Click + Organization Policy or + Team Policy to add an account or team policy, respectively.
- Select Disallow apps in iframes from the Policy Template drop-down.
- Click Next.
- 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])
- Click Save.