Transcript
In today's video, I'm going to teach you how to embed a Softr page into a website. By the end, you'll know how to prepare your Softr app for embedding, grab the correct link, and place it neatly on any website or page builder. First, let's make sure your Softr app can be displayed inside another site.
In your Softr Studio, head to Settings, then Advanced Settings, and turn on "Allow embedding." This tells Softr to let your pages load safely inside an iframe. If this is off, most browsers will block the page from appearing, so enabling it is highly recommended.
Only keep this on if you intend to embed your app and trust where it will appear. You can switch it off later if you no longer plan to embed. This setting helps your content display properly without security conflicts.
Next, decide which Softr page you want to embed and get its URL. If you want the homepage, you can use your main app address, such as https://yoursoftersubdomain.softr.app or your custom domain if you've set one up.
[.blog-callout]
Note from Softr: If you haven't built the pages you want to embed into your site yet, there is no need to set up everything manually right away. You can use the AI co-builder to instantly generate fully functional pages and core layouts, skipping the tedious manual app creation process.
[.blog-callout]
If you want a specific inner page, publish your app, navigate to that page in your browser, and copy the full address from the address bar. Make sure the page you're embedding is publicly accessible or viewers will see a sign-in screen. That's perfectly fine if your goal is to embed a members-only experience, just be aware of what the audience should see.
[.blog-callout]
Note from Softr: Integrating a members-only experience into an existing site is a powerful way of building client portals without needing to migrate your website. To streamline this process rather than assigning blocks manually, check out the available App templates to deploy a secure portal instantly.
[.blog-callout]
Now place the Softr page on your website. Open your site or page builder and look for an option to add custom code or an HTML embed block. Paste an iframe that points to your Softr page URL as the source.
Set the width to 100% so it spans the container and choose a height that fits your layout. Something like 700 to 900 pixels is a good start. Remove borders for a clean look and consider enabling lazy loading so the page doesn't slow down initial load.
On responsive sites, test the result on mobile and tablet to ensure the height works well. You can adjust the height or add CSS to handle different screen sizes. If your builder restricts code, check whether it offers a native embed widget and put the same iframe there.
When you're done, publish or update your website and preview the page. If the embed doesn't show, confirm: allow embedding is still on, the URL is correct and published, and that you're using HTTPS on both sides. That's it, you've enabled embedding in Softr, grabbed the right page URL, and embedded it into your site with a simple iframe.
