Comment ajouter plusieurs widgets à un site web avec JavaScript

Les instructions ci-dessous concernent uniquement les ordinateurs de bureau et portables.

Si vous gérez plusieurs propriétés tawk.to et souhaitez afficher plus d’un widget de discussion sur le même site web, vous pouvez le faire en utilisant une solution JavaScript personnalisée. Cela vous permet de faire fonctionner plusieurs widgets de manière indépendante — idéal pour la gestion de plusieurs marques ou d’équipes distinctes.


REMARQUE : Cette méthode nécessite des connaissances de base en programmation. Si vous n’êtes pas à l’aise avec HTML et JavaScript, envisagez de travailler avec un développeur.

Quelle est la différence entre une propriété et un widget ?

Comprendre la différence entre une propriété et un widget est essentiel pour gérer efficacement votre configuration tawk.to.


Propriété

Une propriété est un conteneur pour tous vos paramètres et données. Elle est généralement associée à un site web, une entreprise, une marque, une organisation ou un événement spécifique.


Lorsque vous créez une nouvelle propriété, vous mettez en place un espace de travail séparé qui peut inclure :

  • Widgets de discussion

  • Messages de déclencheur

  • Base de connaissances

  • Raccourcis

  • Onglets

  • Agents


REMARQUE : Les compléments (comme AI Assist et Suppression de la marque) sont achetés par propriété et ne se transfèrent pas d’une propriété à l’autre.


Widget

Un widget est l’interface de discussion que voient vos visiteurs. Il permet aux utilisateurs de :

  • Démarrer une discussion en direct

  • Laisser des messages hors ligne

  • Voir le contenu partagé via des cartes de widget


Chaque propriété peut avoir jusqu’à 20 widgets, et vous pouvez personnaliser chacun d’eux individuellement, y compris :

  • Conception et couleur

  • Langue d’affichage

  • Règles de visibilité

  • Comportement du widget


REMARQUE : Les compléments achetés pour une propriété s’appliquent à tous les widgets de cette propriété.

Pourquoi ne puis-je pas utiliser le script par défaut pour plusieurs widgets ?

Par défaut, le script d’intégration tawk.to ne permet de charger qu’un seul widget par page. Si vous ajoutez plus d’un script standard, ils entreront en conflit. En effet, chaque script de widget utilise le même objet global (Tawk_API) et les mêmes écouteurs d’événements globaux, qui ne peuvent pas être dupliqués sur une même page.


Pour contourner cette limitation, vous pouvez injecter dynamiquement chaque widget en utilisant JavaScript d’une manière qui évite les conflits.

Tout d’abord, récupérez votre Identificateur de la propriété et votre ID du widget

1. Connectez-vous à votre compte tawk.to.

2. Sélectionnez la propriété correcte.
3. Cliquez sur Administration dans le menu supérieur.
4. Cliquez sur Widget de discussion sous Canaux dans le menu de gauche. Ensuite, Copiez la dernière partie de votre Lien de discussion directe. C’est une combinaison de votre Identificateur de la propriété et de votre ID du widget.
Modifier le code de votre widget pour inclure plusieurs widgets

Pour charger différents widgets de manière dynamique, vous devrez mettre à jour le code d’intégration standard en spécifiant le bon Identificateur de la propriété et le bon ID du widget.


Mettez à jour l’URL du script de cette façon :

Pour changer le widget, il suffit de mettre à jour l’ID du widget à la fin de l’URL.


Pour changer à la fois la propriété et le widget, mettez à jour les deux identifiants dans l’URL. Exemple avec des identifiants réels :

Cette méthode permet à chaque script de widget de se charger indépendamment, ce qui aide à éviter les conflits entre plusieurs scripts de widget sur la même page.


Voici un exemple d’implémentation du code du widget tawk.to qui charge dynamiquement un widget en fonction de l’ID de discussion que vous fournissez :

La fonction getChatId() a pour but de fournir le bon Identificateur de la propriété et le bon ID du widget dans le format attendu.


Vous pouvez personnaliser cette fonction pour qu’elle renvoie différents IDs de discussion en fonction de vos propres critères — comme le domaine, la localisation de l’utilisateur ou son rôle — selon votre configuration.


Cas d’utilisation :

Modifier le widget ou la propriété en fonction de la langue de la page

Modifier le widget en fonction de la langue du visiteur

Modifiez le widget en fonction de l'emplacement du visiteur à l'aide de la géolocalisation IP de Cloudflare

Points importants à prendre en compte

  • Cette solution repose sur JavaScript et nécessite une compréhension de base de la façon de modifier le code de votre site web.


  • Bien que cette méthode fonctionne dans de nombreux cas, l’utilisation de plusieurs widgets sur une seule page peut affecter les performances ou provoquer un comportement inattendu selon la structure de votre site.


  • Vous ne pourrez pas utiliser l’objet Tawk_API globalement pour les deux widgets. Un script personnalisé peut être nécessaire pour un contrôle avancé.

Si vous avez des retours sur cet article, ou si vous avez besoin d’aide supplémentaire :


Cet article a-t-il été utile ?

69 sur 103 ont aimé cet article