How do I embed my experience on my website? – Fastory

You have two embed options to display your experience on your website: a Smart Embed widget, or a classic iframe.

What is it for?

Embedding an experience on your website lets you engage the visitors already there, without sending them to an external link. It is a great way to increase the number of participants while keeping the experience under your own domain.

Smart Embed

The Smart Embed displays your experience directly within your site's content, on desktop as well as on mobile.

How to embed it

Paste this code once, before the closing </body> tag of your website:

<script defer type="module" src="https://static.fastory.io/pkgs/embed/v2/runtime/embed.min.js"></script>

Paste this code exactly where you want your experience to appear:

<div id="fs-root" data-story-id="YOUR_EXPERIENCE_ID"></div>

Replace YOUR_EXPERIENCE_ID with your experience's identifier.

You don't need to add any other attribute: the data-story-id value is the only information required to load your experience.

Both code snippets are also available ready to copy directly in the platform, in the Publish tab of your experience.

IFrame

Warning: this embed option is not designed mobile first, but for desktop use. We recommend using the Smart Embed above whenever possible.

Keep ?mobile at the end of the experience URL:

<iframe id="fs-embed" src="https://story.tl/your-experience-slug?mobile&consent=0" width="480px" height="800px"></iframe>

Best practices

Always copy the ready-to-use code from the Publish tab of your experience rather than typing it by hand, to avoid any mistake in the identifier.

Test your embed in a private browsing window after publishing your site changes.

Prefer the Smart Embed over the iframe for a mobile-friendly result.

Concrete use cases

If you want to increase participation from your existing traffic

Embed the Smart Embed widget on your homepage or a landing page. Visitors can play without leaving your site.

If you need a quick desktop-only embed

Use the iframe option when you simply want to display the experience on a desktop page, with no need for a mobile-optimized display.

FAQ

How do I embed a Fastory experience on my website?

Paste the embed script before the closing </body> tag of your site, then paste <div id="fs-root" data-story-id="YOUR_EXPERIENCE_ID"></div> where you want the experience to appear, replacing YOUR_EXPERIENCE_ID with your experience's identifier. Both snippets are also available ready to copy in the Publish tab of your experience.

Which attribute do I need to change in the embed code?

Only data-story-id. Replace it with your experience's identifier. No other attribute is needed for the Smart Embed to work.

What is the difference between the Smart Embed and the iframe?

The Smart Embed adapts to desktop and mobile and blends into your site's content. The iframe is a simpler, fixed-size embed designed for desktop only.

Where can I find the ready-to-use embed code for my experience?

Open your experience and go to the Publish tab. The script and the div code matching your experience are available there, ready to copy.