Centre d'assistance | tawk.to | Comment ajouter plusieurs widgets à un site Web avec JavaScript

Comment ajouter plusieurs widgets à un site Web avec JavaScript

Vous pouvez ajouter plusieurs widgets à un site Web en collant le code de widget dans le code HTML de chaque page.

Cependant, si vous maîtrisez le code ou si vous avez un développeur dans votre équipe, il existe un moyen plus rapide d'ajouter plusieurs widgets à un grand site Web.

Dans cet article, nous allons vous montrer comment modifier le code de votre widget afin que le widget chargé sur chaque page soit basé sur une fonction et des conditions que vous définissez. Par exemple, sur un site multilingue, vous pouvez configurer votre code de widget pour charger automatiquement un widget en fonction de la langue de la page.

Pour commencer, vous aurez besoin de vos identifiants de propriété et de widget.

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

Voici un résumé qui explique la différence entre une propriété et un widget :

Une propriété est l'endroit où tous vos paramètres et données sont regroupés et stockés. Ça peut être associé à un site Web, à une entreprise, à une organisation ou même à un événement. La création d'une nouvelle propriété vous permet de configurer une nouvelle base de connaissances, des widgets, des messages déclencheurs, des raccourcis, des agents, des onglets, etc. Les ajouts doivent être achetés séparément pour chaque propriété.

Un widget est l'interface utilisateur où les visiteurs peuvent discuter, laisser des messages et accéder à tout contenu que vous partagez via les cartes widget tawk.to. Chaque propriété peut avoir jusqu'à 20 widgets. Vous pouvez personnaliser les paramètres de contenu, conception, langue et les paramètres de visibilité de chaque widget individuel. Si vous avez acheté des modules complémentaires, ils fonctionneront sur n'importe quel widget de chat dans la même propriété.

La création d'une nouvelle propriété vous permet de créer une nouvelle base de connaissances, de modifier les messages déclencheurs, les raccourcis, d'attribuer des agents, etc. Les ajouts doivent être achetés séparément pour chaque propriété.

Remarque: un seul widget à la fois peut fonctionner sur le même site Web. Les exemples ci-dessous chargent une seule propriété/widget selon les critères que vous choisissez. Pour utiliser cette méthode, vous devrez supprimer le plugin WordPress, s'il est utilisé.

Personnaliser le code de votre propriété et widget

Pour modifier le widget qui se charge sur votre page, modifiez l'attribut src suivant en fonction du widget que vous souhaitez intégrer :

xxxxxxxxxx
 
s1.src = 'https://embed.tawk.to/' + chatId;

Dans les exemples ci-dessous, chatId est composé de 'your-property-id/your-widget-id' qui est résolu par la fonction getChatId.

Vous pouvez trouver l'identifiant de votre propriété dans l'aperçu de votre propriété. Accédez à Tableau de bord ⮕ Admin ⮕vue d'ensemble de la propriété et copiez l'identifiant de votre propriété.

Pour trouver votre ID de widget, accédez à Tableau de bord ⮕ Admin ⮕ Widget de discussion.

Sélectionnez le widget que vous souhaitez intégrer dans le menu déroulant du Widget de discussion. Copiez ensuite le code dans la dernière section de votre lien de chat direct.

Voici où vous ajoutez votre identifiant de propriété et votre identifiant de widget :

xxxxxxxxxx
 
s1.src='https://embed.tawk.to/your-property-id/your-widget-id';

Pour modifier le widget, modifiez l'ID du widget à la fin du code.

Pour modifier à la fois la propriété et le widget, vous devrez fournir des options pour l'ID de propriété et l'ID de widget.

Voici à quoi cela ressemble en utilisant l'ID de propriété et l'ID de widget dans les exemples ci-dessus :

xxxxxxxxxx
 
s1.src='https://embed.tawk.to/609dc091bcf6140aa57ef1f6/1f5kgf5s';

Voici comment modifier le code de votre widget pour inclure plusieurs widgets

Voici une implémentation standard du code d'intégration du widget.

Dans chaque exemple, le seul but de la fonction getChatId est de fournir l'identifiant de chat pour le chargement du code d'intégration. Vous pouvez modifier la fonction en basant sur des critères de votre choix.

xxxxxxxxxx
 
<!--Start of Tawk.to Script-->
<script type="text/javascript">
function getChatId() {
    // function to retrieve the property/widget chat id;
    // substitute 000000000001 to property id
    return '000000000001/default';
}
 
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
    var chatId = getChatId();
    if (!chatId) {
        return;
    }
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src = 'https://embed.tawk.to/' + chatId;
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

Cas d'utilisation

Si vous avez besoin d'une assistance supplémentaire pour configurer plusieurs widgets sur votre site, visitez notre plateforme de développeur ou contactez-nous dans le chat. Nous sommes là pour vous aider 24x7.

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

68 sur 102 ont aimé cet article