Ce type d'intégration nécessite un développeur.
Qu'est-ce qu'une intégration dynamique ?
L'intégration dynamique permet d'afficher des widgets sur différentes pages grâce à une intégration unique dans le modèle de page.
Cela signifie que vous pouvez modifier votre propre contenu directement à partir de l'outil JOIN.
Le code doit être intégré dans toutes les pages de produits où vous souhaitez que le widget apparaisse, à l'endroit convenu avec votre équipe.
Comment ça fonctionne ?
Le morceau de code devra être intégré sur toutes les pages où vous souhaitez faire apparaitre le widget. L'emplacement est donc à valider en amont avec votre équipe.
Attention, tous les widgets devront avoir la même forme et taille afin d'éviter le CLS, il vous faudra partir du script du widget par défaut.
Dans l'onglet intégration d'un widget, récupérez le code d'intégration du widget.
Modifier la dernière balise script pour la remplacer par le code suivant :
<script>
const teamName = "MY_TEAM_NAME"; // ASK CSM
const defaultAlias = "MY_DEFAULT_ALIAS";
const divId = "MY_DIV_ID";
// BELOW THE CODE TO RETRIEVE THE SLUG AS ALIAS
const currentPath = window.location.pathname;
const pageSlug = currentPath.substring(currentPath.lastIndexOf("/")+1);
const alias = pageSlug;
const loadWidget = (alias) => {
const script = document.createElement("script");
script.src = `https://${teamName}.my.join-stories.com/widgets/${alias}/index.js`;
script.setAttribute("data-join-widget-id", divId);
script.setAttribute("data-join-widget-alias", alias);
script.setAttribute("type", "text/javascript");
script.onerror = () => {
if (defaultAlias && alias !== defaultAlias) {
loadWidget(defaultAlias);
}
}
const div = document.getElementById(divId);
if (div) { div.appendChild(script); }
}
loadWidget(alias);
</script>
Dans le code fournit, vous devez remplacer plusieurs valeurs :
MY_TEAM_NAME | Vous pouvez le récupérer via votre CSM |
MY_DEFAULT_ALIAS | Doit être remplacé par l'alias du widget qui doit s'afficher si aucun widget n'a été crée sur le Studio pour la page en question |
MY_DIV_ID | doit être remplacé par l'id de la div copiée dans le code initial. (cf. Screenshot ci-dessous |
MY_ALIAS | par défaut nous récupérons le Slug de votre URL |
Screenshot pour récupérer MY_DIV_ID
alias doit utiliser un identifiant unique de la page. Nous prenons par défaut le Slug de votre page
Bien que vous puissiez utiliser n’importe quel identifiant, nous recommandons d’opter pour le slug. En effet, le slug est plus facile à récupérer pour la personne en charge de la création du contenu, ce qui simplifie la gestion et la maintenance de vos widgets.
Après avoir intégré le code, il vous suffira de créer un nouveau widget en utilisant l’identifiant de la page comme alias du widget.
Dans notre exemple, l’alias “chaussure” est utilisé pour identifier le widget correspondant.
Attention, pensez à ré-utiliser les mêmes formes et tailles de widget pour éviter le CLS. Il est possible de dupliquer un widget existant pour s'assurer que le design est le même.
Une fois votre widget publié, il apparaitra automatiquement sur le site.