You can choose between 4 integration modes to display your experience on your website.
🟢 Smart Embed Classic
🔵. Smart Embed Fullscreen Carrousel
🟣 Smart Embed Banner
🔴 IFrame
🟢 Smart Embed Classic
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F13899432-eaf7-4454-81c6-2f7c7fb89e6a%2FUntitled.png?table=block&id=788b793c-4307-467b-a9a9-9dadfda8884a&cache=v2)
- Desktop : Display of the experience as a carousel directly integrated in the website content.
- Mobile : Display of an insert and it will open as an overlay.
How to integrate it?
1/ Paste this code before the closing of the </body> tag of your website:
<script defer src="https://static.fastory.io/pkgs/embed/v2/runtime/embed.min.js"></script>
2/ Paste this code on the area where you want to display your experience:
<div id="fs-root" data-story-id="FC3OwLJ5"></div>
Remplace data-workspace-id by your workspace ID (you'll find it in the url of your workspace).
Remplace data-slug by the end of the experience url
These codes are also available directly in the platform in the publish tab of each game.
🔵 Smart Embed Fullscreen Carrousel
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ff6757f71-d1e5-466e-b077-fa08e541f7ec%2FUntitled.png?table=block&id=5a5d9de8-df15-45b8-9ff3-478eac78f9ac&cache=v2)
- Desktop : Display of an insert then opening of the experience in overlay as a carousel.
- Mobile : Display of an insert and it will open as an overlay.
How to integrate it?
1/ Paste this code before the closing of the </body> tag of your website:
<script defer src="https://static.fastory.io/pkgs/embed/v2/runtime/embed.min.js"></script>
2/ Paste this code on the area where you want to display your experience:
<div id="fs-root" data-story-id="FC3OwLJ5"></div>
Remplace the different information bellow:
data-workspace-id : get your workspace ID
data-slug : end of the experience url
data-consent : 0 ou 1 depending on if you want to display our cookie consent
data-btn-color : customize the insert button color
🟣 Smart Embed Banner
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F17c0b4c6-defa-43aa-a64e-26f5d167482d%2FUntitled.png?table=block&id=7eb0da0b-0a07-44c3-aa60-76bcaec3d1ef&cache=v2)
- Desktop : Display of an insert then opening of the experience in overlay as a mobile view.
- Mobile : Display of an insert and it will open as an overlay.
How to integrate it?
1/ Paste this code before the closing of the </body> tag of your website:
<script defer src="https://static.fastory.io/pkgs/embed/v2/runtime/embed.min.js"></script>
2/ Paste this code on the area where you want to display your experience:
<div id="fs-root" data-story-id="FC3OwLJ5"></div>
Remplace the different information bellow:
data-workspace-id : get your workspace ID
data-slug : end of the experience url
data-consent : 0 ou 1 depending on if you want to display our cookie consent
data-btn-color : customize the insert button color
🔴 IFRAME
Warning: this type of integration is not mobile-first and is only thought for desktop. We recommend you to use one of the Smart embeds above.
⚠️ Keep “?mobile” at the end of the experience url
<iframe id="fs-embed" src="https://story.tl/onboarding-test?mobile&consent=0" width="480px" height="800px"></iframe>
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fca711e41-a180-4955-ad5f-8c91b1a4f5a2%2FUntitled.png?table=block&id=fe27d6af-7924-484a-9a3a-dbb5f55a032b&cache=v2)