❗️ ⚠ Attention, ce type d'intégration nécessite un développeur ayant accès aux templates des pages du site. ⚠️
Qu'est-ce qu'une intégration dynamique des widgets ?
Cela permet de ne faire qu'une seule intégration pour toutes les pages produits, en collant un petit bout de code directement dans le template de la page produit.
Cela afin d’être autonome dans l'ajout de widget sur des pages déterminées à l'intégration.
Intégrer le bout de code sur toutes les pages produits du site, à l'emplacement qui a été validé avec votre équipe.
Pour éviter le CLS, sélectionnez le script correspondant au format du widget souhaité :
Pour le format bulle :
<div id="join-widget-{{DYNAMIC_ALIAS}}" style="display:block;"></div> <style> #join-widget-{{DYNAMIC_ALIAS}} { margin: 5px 2px; min-height: 114px; width: 100%; } @media (min-aspect-ratio: 3/4) { #join-widget-{{DYNAMIC_ALIAS}} { min-height: 132px; } } </style> <script src="https://workspaceID.my.join-stories.com/widgets/{{DYNAMIC_ALIAS}}/index.js" data-join-widget-id="join-widget-{{DYNAMIC_ALIAS}}" data-join-widget-alias="{{DYNAMIC_ALIAS}}" type="text/javascript" ></script>
Pour le format card :
<div id="join-widget-{{DYNAMIC_ALIAS}}" style="display:block;"></div> <style> #join-widget-{{DYNAMIC_ALIAS}} { margin: 5px 2px; min-height: 225.44px; width: 100%; } @media (min-aspect-ratio: 3/4) { #join-widget-{{DYNAMIC_ALIAS}} { min-height: 283px; } } </style> <script src="https://workspaceID.my.join-stories.com/widgets/{{DYNAMIC_ALIAS}}/index.js" data-join-widget-id="join-widget-{{DYNAMIC_ALIAS}}" data-join-widget-alias="{{DYNAMIC_ALIAS}}" type="text/javascript" ></script>
Dans le code fournit il faut donc remplacer DYNAMIC_ALIAS par une partie unique récupérée dynamiquement sur la page.
Par exemple le nom du produit, son id, la fin de l'url de la page etc. (Cela peut se faire très facilement en JS ou autre par un développeur).
Il faudra également remplacer (https://workspaceID.my.join-stories.com/) par votre nom de domaine JOIN que vous pouvez facilement retrouver dans le script d'un de vos widget.
Il faut juste s'assurer que le DYNAMIC_ALIAS choisi soit facile à identifier pour la personne qui créera les Stories et les widgets chez JOIN (fin de l'url, nom du produit, id du produit etc.)
Par exemple pour la page produit https://nomdedomaine.fr/products/apres-shampoing-lavande-demelant, le DYNAMIC_ALIAS peut être : apres-shampoing-lavande-demelant
Ensuite, de ce fait la personne qui créera un widget sur l'interface JOIN pourra tout simplement nommer l’alias de son widget de la même manière que le DYNAMIC_ALIAS pour matcher avec la page voulue.
Dès que le widget est créé et avec des stories, il apparaitra sur le site.
❗️À savoir : Lorsque ce code est intégré sur toutes les pages produits, cela reprend le format que vous avez choisi sur l’outil JOIN, c’est pour cela que nous vous conseillons d’utiliser le même type de widget. Les stories seront placées au même endroit sur les pages produits.