Embedding Your App in a Web Page
In the settings of your app, you can choose whether to allow embedding of your app into other web pages.
In the Sidebar menu, choose Settings, then Embedding. Tick the checkbox next to “Allow this app to be embedded in other pages”.
If embedding is disabled, your app will be served with the X-Frame-Options: deny header, and browsers will refuse
to load your app if it is embedded inside another page.
Running your app in an IFrame
If embedding is enabled and your app is published, you’ll see an HTML snippet you can copy and paste into any page.
<script src="https://anvil.works/embed.js" async></script>
<iframe style="width:100%" data-anvil-embed src="https://online-store.anvil.app"></iframe>The <script> tag automatically resizes the <iframe> to fit the vertical space used by your apps. If you omit the
<script> tag entirely, your apps will still load, but the <iframe> will no longer automatically
resize.
Embedding Multiple Apps
You can embed multiple apps into one page using multiple <iframe>s with different src URLs.
If you are embedding multiple apps into one page, you only need to include the <script> tag once.
<!-- Include the Anvil script that handles automatic vertical resizing of the IFrame -->
<script src="https://anvil.works/embed.js" async></script>
<!-- Embed one app -->
<iframe style="width:100%" data-anvil-embed src="https://online-store.anvil.app"></iframe>
<!-- Embed another app -->
<iframe style="width:100%" data-anvil-embed src="https://chatbot.anvil.app"></iframe>Do you still have questions?
Our Community Forum is full of helpful information and Anvil experts.