Passer au contenu principal
Toutes les collectionsIntégrez sur votre website (Pretashop, Magento, Salesforce...)Intégrer vos widgets
2 - Intégrer des widgets sur plusieurs pages (page produits, pages collections...)
2 - Intégrer des widgets sur plusieurs pages (page produits, pages collections...)
Nicolas Goudemant avatar
Écrit par Nicolas Goudemant
Mis à jour il y a plus de 2 semaines

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.

  1. Dans l'onglet intégration d'un widget, récupérez le code d'intégration du widget.

  2. 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.

Avez-vous trouvé la réponse à votre question ?