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

Qu'est-ce qu'une intégration unique des widgets ?

Cela permet, via une unique intégration sur le template d'une page, d'afficher différents widgets sur différentes pages.

Cela permet d'être autonome dans l'édition des contenus directement depuis l'outil JOIN.

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. Pour éviter le CLS, il 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 domainName = "MY_DOMAIN_NAME";
 const alias = "MY_ALIAS";
 const defaultAlias = "MY_DEFAULT_ALIAS";
 const divId = "MY_DIV_ID";

 const loadWidget = (alias) => {
  const script = document.createElement("script");
  script.src = `https://${domainName}/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 il faudra remplacer plusieurs variable :

MY_ALIAS
MY_DOMAIN_NAME
MY_DEFAULT_ALIAS
MY_DIV_ID

MY_DOMAIN_NAME doit être remplacé par votre nom de domaine JOIN que vous pouvez facilement retrouver dans le script d'un de vos widget.

MY_DEFAULT_ALIAS doit être remplacé par l'alias du widget qui doit s'afficher si aucun widget n'a été crée pour la page.

MY_DIV_ID doit être remplacé par l'id de la div copiée dans le code initial.

MY_ALIAS doit être remplacé par un identifiant unique de la page, comme par exemple son slug.

Tout identifiant peut être utilisé, mais nous recommandons d'opter pour le slug, car il est plus facile à récupérer par la personne créant le contenu.

Une fois le code intégré, il suffira de créer un nouveau widget en utilisant l'identifiant de la page en tant d'alias du widget :

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.

Dès que le widget est publié, il apparaitra sur le site.