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

Vous disposez de deux modes d'intégration pour afficher votre expérience sur votre site web : un encart Smart Embed, ou un iframe classique.

À quoi ça sert ?

Intégrer une expérience sur votre site web vous permet d'engager les visiteurs déjà présents, sans les renvoyer vers un lien externe. C'est un excellent moyen d'augmenter le nombre de participants tout en gardant l'expérience sous votre propre domaine.

Smart Embed

Le Smart Embed affiche votre expérience directement dans le contenu de votre site, sur desktop comme sur mobile.

Comment l'intégrer

Collez ce code une seule fois, avant la fermeture de la balise </body> de votre site web :

<script defer type="module" 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="VOTRE_ID_EXPERIENCE"></div>

Remplacez VOTRE_ID_EXPERIENCE par l'identifiant de votre expérience.

Vous n'avez besoin d'ajouter aucun autre attribut : la valeur data-story-id est la seule information nécessaire pour charger votre expérience.

Les deux extraits de code sont également disponibles prêts à copier directement dans la plateforme, dans l'onglet Publier de votre expérience.

IFrame

Attention : ce mode d'intégration n'est pas pensé mobile first, mais pour un usage desktop. Nous vous recommandons d'utiliser le Smart Embed ci-dessus autant que possible.

Conservez ?mobile à la fin de l'URL de l'expérience :

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

Bonnes pratiques

Copiez toujours le code prêt à l'emploi depuis l'onglet Publier de votre expérience plutôt que de le retaper à la main, pour éviter toute erreur sur l'identifiant.

Testez votre intégration en navigation privée après avoir publié les modifications de votre site.

Préférez le Smart Embed à l'iframe pour un résultat adapté au mobile.

Cas d'usage concrets

Si vous voulez augmenter la participation sur votre trafic existant

Intégrez l'encart Smart Embed sur votre page d'accueil ou une landing page. Les visiteurs peuvent jouer sans quitter votre site.

Si vous avez besoin d'une intégration rapide desktop uniquement

Utilisez le mode iframe lorsque vous souhaitez simplement afficher l'expérience sur une page desktop, sans besoin d'un affichage optimisé mobile.

FAQ

Comment intégrer une expérience Fastory sur mon site web ?

Collez le script d'embed avant la fermeture de la balise </body> de votre site, puis collez <div id="fs-root" data-story-id="VOTRE_ID_EXPERIENCE"></div> à l'endroit où vous souhaitez afficher l'expérience, en remplaçant VOTRE_ID_EXPERIENCE par l'identifiant de votre expérience. Les deux extraits sont également disponibles prêts à copier dans l'onglet Publier de votre expérience.

Quel attribut dois-je modifier dans le code d'embed ?

Uniquement data-story-id. Remplacez-le par l'identifiant de votre expérience. Aucun autre attribut n'est nécessaire pour que le Smart Embed fonctionne.

Quelle est la différence entre le Smart Embed et l'iframe ?

Le Smart Embed s'adapte au desktop et au mobile et s'intègre au contenu de votre site. L'iframe est une intégration plus simple, à taille fixe, pensée pour le desktop uniquement.

Où trouver le code d'embed prêt à l'emploi pour mon expérience ?

Ouvrez votre expérience et rendez-vous dans l'onglet Publier. Le script et le code de la div correspondant à votre expérience y sont disponibles, prêts à copier.