In some cases, you may want to host your app within an existing web page. Technically, the app is hosted within an iframe element that is embedded on the web site. In fact, this is exactly how the app emulators work on the AppSheet web site.
Please be aware that some functionality does not work when your app is hosted in an iframe. Offline behavior is severely limited, the scanner does not work, the camera behavior is altered, and upcoming mobile-only features like push notifications will not work. Some authentication providers (notably Google and Dropbox) will not allow sign-in in an iFrame. Some browsers (notably Mobile Safari) do not support authentication to an iFrame. So, in general this will only work with apps that do not require sign-in.
To host your app on a webpage
- Get the ID of your app --- the easy way to find this is to open your app editor and click on the link above the emulator that says "Preview other device sizes". Look at the URL bar in the browser. It should show a URL of the form www.appsheet.com/template/mobilepreview?appId=b3756bde-b741-4609-bf7d-e2eee77852d6. The ID of this app is b3756bde-b741-4609-bf7d-e2eee77852d6. Each app has a unique ID, so make sure to get the ID of the app you want.
- Add an HTML element to your web page --- Use the following type of iframe code structure: <iframe src="https://www.appsheet.com/preview/b3756bde-b741-4609-bf7d-e2eee77852d6" />. Make sure to replace the app ID in this example with the ID of the app you actually want to show. You can set width and height settings appropriately. For example, to show the approximate dimensions of a mobile phone, try: <iframe src="https://www.appsheet.com/preview/b3756bde-b741-4609-bf7d-e2eee77852d6" width="320" height="568"/>.
- If you want the hosted app to automatically refresh the app definition and the data every time the web page is opened, you can set a "refresh" option. Likewise, if you want the hosted app to abandon any unsaved data every time it is opened, you can set a "wipe" option. Here is an example of embedding an app with both options enabled:
<iframe src="https://www.appsheet.com/preview/b3756bde-b741-4609-bf7d-e2eee77852d6?refresh=1&wipe=1" width="320" height="568"/>