How do I embed my experience on my website?

Fastory lets you display your experience (game, campaign, or web story) directly on your own website, right where your visitors already are. Four embed modes are available, from the smoothest (Smart Embed) to the simplest technically (IFrame).

What is it for?

Embedding your experience on your website allows you to:

Reach the audience already visiting your pages directly, without redirecting them elsewhere.

Increase the number of participants in your game or campaign.

Keep visitors on your site while offering them an interactive experience.

Available embed modes

Fastory offers four modes. Three are based on the Smart Embed (recommended, designed mobile first) and one uses a classic IFrame.

Smart Embed Classic

Desktop: the experience is displayed in carrousel mode, directly within your page content.

Mobile: a widget is displayed, then the experience opens as an overlay.

Smart Embed Fullscreen Carrousel

Desktop: a widget is displayed, then the experience opens as an overlay, in carrousel mode.

Mobile: a widget is displayed, then the experience opens as an overlay.

Smart Embed Banner

Desktop: a widget is displayed, then the experience opens as an overlay in mobile mode (no carrousel navigation).

Mobile: a widget is displayed, then the experience opens as an overlay.

IFrame

A format designed for desktop use only. Reserve it for cases where a Smart Embed is not suitable (see the warning below).

How do I set up a Smart Embed?

The method is identical for all three Smart Embed modes (Classic, Fullscreen Carrousel, and Banner). Only the parameters to fill in vary.

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

<script defer 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="FC3OwLJ5"></div>

Fill in your own values in this code (see the parameters below).

Good to know: these code snippets are also available, already pre-filled, directly in the platform, in the Publish tab of each of your games. This is the simplest and most reliable way to get the right code.

Parameters to customize

For all three Smart Embeds:

data-workspace-id: your workspace ID, which you can find in your workspace URL.

data-slug: the end of your experience's URL.

For the Fullscreen Carrousel and Banner modes, two additional parameters are available:

data-consent: 0 or 1, depending on whether you want to display our cookie consent banner (see Disable the cookie consent banner).

data-btn-color: the color of the widget's button, to customize according to your brand guidelines.

How do I embed with an IFrame?

Warning: this IFrame embed type is not mobile first, it is designed for desktop use. We recommend using one of the Smart Embeds above instead.

Make sure to keep the ?mobile at the end of the URL / slug, otherwise the display will not be correct.

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

Best practices

Choose a Smart Embed over an IFrame: Smart Embeds are designed mobile first and offer a better experience.

Get the pre-filled code from the Publish tab of your game to avoid any typing errors.

Place the <div> exactly where the experience should appear, and the <script> just before the </body> tag.

Set the data-consent parameter in line with your cookie policy.

Always test the display on both desktop and mobile before publishing your page.

Concrete use cases

If you want to display the experience directly within a page

Go with the Smart Embed Classic: on desktop, the experience is displayed as a carrousel within your content itself.

If you want an immersive fullscreen display

Choose the Smart Embed Fullscreen Carrousel: a widget invites the click, then the experience opens as an overlay with carrousel navigation.

If you want a discreet banner that triggers the experience

Use the Smart Embed Banner: the widget opens the experience as an overlay in mobile format, without carrousel navigation.

If you need a fixed desktop display

Use the IFrame, keeping in mind that it is not suited for mobile.

FAQ

Which embed modes does Fastory offer?

Fastory offers four modes: Smart Embed Classic, Smart Embed Fullscreen Carrousel, Smart Embed Banner, and IFrame. The three Smart Embeds are recommended, while the IFrame is reserved for desktop use.

Where can I find the embed code for my Fastory experience?

The code is available directly in the platform, in the Publish tab of each of your games. It comes pre-filled with the right values, so you don't have to enter your parameters manually.

Which mode should I choose for a good mobile experience?

Choose one of Fastory's three Smart Embeds, which are designed mobile first. The IFrame, on the other hand, is built for desktop use and is not suited for mobile.

How do I find my workspace ID on Fastory?

Your workspace ID can be found in the URL of your Fastory workspace. This is the value you enter in the data-workspace-id parameter.

Can I hide the cookie consent banner?

Yes, in the Fullscreen Carrousel and Banner modes, the data-consent parameter accepts the value 0 or 1 to show or hide Fastory's cookie consent banner. To go further, see Disable the cookie consent banner.

Can I customize the color of the widget's button?

Yes, in Fastory's Fullscreen Carrousel and Banner modes, the data-btn-color parameter lets you match the widget button's color to your brand guidelines.

Why do I need to keep the `?mobile` in the IFrame URL?

This parameter at the end of the URL is required for your Fastory experience to display correctly in the IFrame. If you remove it, the rendering will not be correct.