Intégration classique

👩‍💻 Tutoriel vidéo

1. Accéder à l'Onglet Integration

Rendez-vous depuis le détail de votre widget sur l'onglet "Integration."

2. Copier le code du widget

Cliquez sur le bouton "Copy" pour copier le code du widget.

Vous devez publier une première fois votre widget avant de pouvoir accéder au code d'intégration.

3. Coller le code intégration sur votre site

Après avoir copier le code de votre widget, collez le directement à l'endroit désiré dans le code de votre site.

Vous avez la possibilité de modifiez l'aspect de votre widget tels que la couleur, les bordures et les covers depuis l'onglet "Settings".

Cliquez sur le bouton « Publier » pour mettre à jour vos modifications directement sur votre site.

Si vous souhaitez changer le type du widget (sticky, standalone...) vous devrez récréer un nouveau widget.

Pour une intégration plus poussée, vous pouvez séparer le script du div afin de coller le script dans le head de votre site.

Il vous suffira ensuite de coller le div à l'endroit souhaité.

Intégration dynamique (page produits, collections...)

Attention, ce type d'intégration nécessite un développeur.

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

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 bout 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_DOMAIN_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.