Ask AI

Page and Block Embed

Embedding Softr content on an external source.

๐Ÿ‘‰
Page and block embed is available for users on the Basic plan and above.

Softr allows you to embed any block or page on third-party site. Letโ€™s see how that works.

Block embed

The Block Embed option is located at the bottom of the Features tab in block settings. Using this feature, you can embed the block on another website. Just copy the block code snippet and paste it wherever needed.

Notion image

Getting the block embed code

Page embed

You can embed any Softr page on an external website using the following code:

<iframe id="softr-we-erw45hrubuyt23" src="https://example.softr.app/page1" width="100%" height="1000" scrolling="no" frameborder="0" style="border:none;"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script>
<script> iFrameResize({ checkOrigin: false, log: true }, '#softr-we-erw45hrubuyt23');</script>

Adjust the code:

  1. Replace example.softr.app under src with your app's Softr subdomain or your custom domain if you've connected one. Add the page path you would like to embed e.g. my_softr_domain.com/page1. If you want to embed the Home page, no page path is needed.
  1. Inside the value of id ("softr-we-erw45hrubuyt23" in the above code), replace the part that comes after softr- with the actual ID of your page, which is the last component of the page's URL when it's open in the Softr Studio (see below).
Locating the page ID
Locating the page ID
Did this answer your question?
๐Ÿ˜ž
๐Ÿ˜
๐Ÿคฉ

Last updated on April 2, 2024