Vue 2

Le plugin tawk.to pour Vue 2 simplifie l’intégration et permet de personnaliser facilement le comportement du widget dans votre application. Le plugin est compatible avec Nuxt.

Toutes nos méthodes API sont disponibles pour le plugin. Consultez la liste dans notre référence API.

1. Téléchargez le plugin ici

2. Ensuite, utilisez l’une des commandes ci-dessous pour installer la dépendance avec le gestionnaire de paquets node ou yarn.

Si vous avez plusieurs propriétés, vérifiez que vous consultez la bonne. Passez la souris sur le nom de la propriété actuelle dans le menu supérieur du Tableau de bord pour voir toutes vos propriétés et en sélectionner une nouvelle.

Ensuite, si vous avez plusieurs widgets, sélectionnez-en un dans le menu déroulant supérieur.

Sous Lien de discussion directe, l’ID du widget est le dernier segment du chemin et suit l’Identificateur de la propriété.

Si vous utilisez le plugin avec Nuxt.js, suivez les étapes ci-dessous.

2. Dans le fichier nuxt.config.js, ajoutez le chemin du plugin et définissez le mode en tant que client.

Pour accéder aux fonctions de l’API, appelez $tawkMessenger depuis n’importe lequel de vos composants.

Vous pouvez écouter les événements émis par le plugin. Le nom de l’événement doit correspondre exactement à celui utilisé pour l’écouter.

Voici les solutions aux deux erreurs les plus courantes rencontrées lors de l’utilisation du plugin.

Si vous voyez ce message dans la console, vérifiez les points suivants :

• L’Identificateur de la propriété et l’ID du widget sont bien spécifiés

• Les caractères du nom de la propriété correspondent exactement à ceux de l’Identificateur de la propriété et de l’ID du widget

• Le “I” dans propertyId et widgetId est en majuscule

• L’ID doit être une chaîne de caractères (String)

Solution :

1. Importez TawkMessengerVue
2. Configurez Vue pour utiliser le plugin

3. Définissez les IDs de widget et de propriété

Cette erreur survient lorsque l’API a été appelée avant que tawk-messenger ne soit chargé.

Dans l’exemple ci-dessous, la fonction this.$tawkMessenger.toggle(); a été appelée à l’intérieur du cycle de vie mounted() et renvoie une erreur.

Solution :

1. Placez le code this.$tawkMessenger.toggle(); à l’intérieur de l’écouteur d’événement load si vous souhaitez appeler cette fonction lors du chargement de tawk-messenger afin de vous assurer que le widget est prêt avant que la fonction ne soit appelée. Cela s’applique à toutes les fonctions de l’API du widget (toggle, maximize, minimize, etc.).

2. Vous pouvez directement appeler this.$tawkMessenger.toggle(); ou toute autre fonction tant que vous savez que le widget est chargé. Vous pouvez le vérifier en appelant this.$tawkMessenger.onLoaded. Cela retournera un booléen true si le widget est chargé.

• React.js

• Angular.js

• Ember.js

Besoin d’aide pour intégrer tawk.to dans Vue 2 ? Contactez notre équipe d’assistance ou planifiez un appel.

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

• Cliquez sur l’icône verte du chat en direct
• Planifiez un appel avec nous
• Visitez notre communauté