You are currently viewing the new Anvil Editor Docs.
Switch to the Classic Editor Docs
You are currently viewing the Classic Editor Docs.
Switch to the new Anvil Editor Docs

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”.

The Publish dialog with the 'Embed my app in a web page' box checked and the relevant Iframe code hint shown.

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.