How can I integrate my experience into my website?

Integrate your experience into your website in order to increase your participant number.

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

 

You can also integrate your Hub:

🟡 Hub integration

 

🟱 Smart Embed Classic

 
Notion image
 
  • 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
 
  • 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
 
  • 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
 

🟡 Hub Integration

 

You can integrate your Hub thanks to an iframe : test here.

Your Hub contains the experiences that you want to display.

  • Go to the Settings tab and copy-paste this iFrame:
 
Notion image
 
Did this answer your question?
😞
😐
đŸ€©