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. Pour les pages produits, dans le template par exemple. 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.

Section suivantes :

Configurez vos analytics de conversions

Intégrer un widget dynamique pour page templatée (sans flux)

Qu'est-ce qu'une intégration dynamique ?

Comment ça fonctionne ?