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.
Be aware only apps that do not require sign-in can be hosted in an iframe. In addition, some functionality will 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 mobile-only features like push notifications will not work.
To host your public 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
appsheet.com/template/mobilepreview?appId=b3756bde-b741-4609-bf7d-e2eee77852d6. The ID of this app isb3756bde-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://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 setwidthandheightsettings appropriately. For example, to show the approximate dimensions of a mobile phone, try:<iframe src="https://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://appsheet.com/start/b3756bde-b741-4609-bf7d-e2eee77852d6?refresh=1&wipe=1" width="320" height="568"/>