Comment intégrer mon expérience à mon site web ?

Fastory vous permet d'afficher directement votre expérience (jeu, campagne ou web story) sur votre propre site web, là où vos visiteurs sont déjà présents. Vous disposez pour cela de quatre modes d'intégration, du plus fluide (Smart Embed) au plus simple techniquement (IFrame).

À quoi ça sert?

Intégrer votre expérience à votre site web vous permet de :

Toucher directement l'audience qui visite déjà vos pages, sans la rediriger ailleurs.

Augmenter le nombre de participants à votre jeu ou à votre campagne.

Garder vos visiteurs sur votre site tout en leur proposant une expérience interactive.

Les modes d'intégration disponibles

Fastory propose quatre modes. Trois reposent sur le Smart Embed (recommandé, pensé mobile first) et un utilise une IFrame classique.

Smart Embed Classic

Desktop : affichage de l'expérience en mode carrousel, directement dans le contenu de votre page.

Mobile : affichage d'un encart, puis ouverture de l'expérience en overlay.

Smart Embed Fullscreen Carrousel

Desktop : affichage d'un encart, puis ouverture de l'expérience en overlay, en mode carrousel.

Mobile : affichage d'un encart, puis ouverture de l'expérience en overlay.

Smart Embed Banner

Desktop : affichage d'un encart, puis ouverture de l'expérience en overlay en mode mobile (pas de navigation en mode carrousel).

Mobile : affichage d'un encart, puis ouverture de l'expérience en overlay.

IFrame

Format pensé pour un usage desktop uniquement. À réserver aux cas où un Smart Embed ne convient pas (voir l'avertissement plus bas).

Comment intégrer un Smart Embed?

La méthode est identique pour les trois modes Smart Embed (Classic, Fullscreen Carrousel et Banner). Seuls les paramètres à renseigner varient.

Collez ce code juste avant la fermeture de la balise </body> de votre site web :

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

Collez ce code à l'endroit exact où vous souhaitez afficher votre expérience :

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

Renseignez vos propres valeurs dans ce code (voir les paramètres ci-dessous).

Bon à savoir : ces codes sont également disponibles, déjà pré-remplis, directement dans la plateforme, dans l'onglet Publier de chacun de vos jeux. C'est le moyen le plus simple et le plus fiable de récupérer le bon code.

Les paramètres à personnaliser

Pour les trois Smart Embed :

data-workspace-id : votre workspace ID, que vous retrouvez dans l'URL de votre workspace.

data-slug : la fin de l'URL de votre expérience.

Pour les modes Fullscreen Carrousel et Banner, deux paramètres supplémentaires sont disponibles :

data-consent : 0 ou 1, selon que vous souhaitez afficher ou non notre bandeau de consentement cookies (voir Désactiver le bandeau du consentement cookies).

data-btn-color : la couleur du bouton de l'encart, à personnaliser selon votre charte.

Comment intégrer en IFrame?

Conservez bien le ?mobile à la fin de l'URL / du slug, sans quoi l'affichage ne sera pas correct.

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

Bonnes pratiques

Privilégiez un Smart Embed plutôt qu'une IFrame : les Smart Embed sont pensés mobile first et offrent une meilleure expérience.

Récupérez le code déjà pré-rempli depuis l'onglet Publier de votre jeu pour éviter toute erreur de saisie.

Placez le <div> à l'endroit précis où l'expérience doit apparaître, et le <script> juste avant la balise </body>.

Réglez le paramètre data-consent en cohérence avec votre politique cookies.

Testez toujours l'affichage sur desktop et sur mobile avant de publier votre page.

Cas d'usage concrets

Si vous voulez afficher l'expérience directement dans une page

Optez pour le Smart Embed Classic : sur desktop, l'expérience s'affiche en carrousel au sein même de votre contenu.

Si vous voulez un affichage plein écran immersif

Choisissez le Smart Embed Fullscreen Carrousel : un encart invite au clic, puis l'expérience s'ouvre en overlay avec navigation en carrousel.

Si vous voulez une bannière discrète qui déclenche l'expérience

Utilisez le Smart Embed Banner : l'encart ouvre l'expérience en overlay au format mobile, sans navigation en carrousel.

Si vous avez besoin d'un affichage desktop figé

Utilisez l'IFrame, en gardant à l'esprit qu'elle n'est pas adaptée au mobile.

FAQ

Quels modes d'intégration propose Fastory?

Fastory propose quatre modes : Smart Embed Classic, Smart Embed Fullscreen Carrousel, Smart Embed Banner et IFrame. Les trois Smart Embed sont recommandés, l'IFrame étant réservée à un usage desktop.

Où trouver le code d'intégration de mon expérience Fastory?

Le code est disponible directement dans la plateforme, dans l'onglet Publier de chacun de vos jeux. Il y est déjà pré-rempli avec les bonnes valeurs, ce qui vous évite de saisir manuellement vos paramètres.

Quel mode choisir pour une bonne expérience sur mobile?

Privilégiez l'un des trois Smart Embed de Fastory, qui sont pensés mobile first. L'IFrame, elle, est conçue pour un usage desktop et n'est pas adaptée au mobile.

Comment récupérer mon workspace ID sur Fastory?

Votre workspace ID se trouve dans l'URL de votre workspace Fastory. C'est cette valeur que vous renseignez dans le paramètre data-workspace-id.

Puis-je masquer le bandeau de consentement cookies?

Oui, sur les modes Fullscreen Carrousel et Banner, le paramètre data-consent accepte la valeur 0 ou 1 pour afficher ou non le bandeau de consentement cookies de Fastory. Pour aller plus loin, consultez Désactiver le bandeau du consentement cookies.

Puis-je personnaliser la couleur du bouton de l'encart?

Oui, sur les modes Fullscreen Carrousel et Banner de Fastory, le paramètre data-btn-color vous permet d'adapter la couleur du bouton de l'encart à votre charte graphique.

Pourquoi faut-il conserver le `?mobile` dans l'URL de l'IFrame?

Ce paramètre en fin d'URL est nécessaire au bon affichage de votre expérience Fastory dans l'IFrame. Si vous le supprimez, le rendu ne sera pas correct.