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