Vue 2

[Desktop]

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.

Implémentation Vue.js

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.

3. Importez tawk-messenger-vue dans votre composant principal. Ensuite, attribuez les valeurs de votre ID du widget et de l’Identificateur de la propriété.
Trouvez vos IDs de widget et de propriété
Pour trouver vos IDs de widget et de propriété, connectez-vous à votre compte tawk.to. Ensuite, allez dans ⚙️Administration ➞ Canaux ➞ Widget de discussion.

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

Dans l’exemple ci-dessous, l’Identificateur de la propriété est xxxxxxxxxxxxxxxxxxxxxxxx et l’ID du widget est 123456789
Implémentation Nuxt.js

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


1. Créez un fichier nommé tawk-messenger.client.js dans le répertoire plugins/ de votre projet et ajoutez le code suivant :

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

Propriété d’instance

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

Gestion des événements

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

Dépannage

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

Erreur n°1 : PropertyId non spécifié dans le 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é

Erreur n°2 : “TypeError: window.Tawk_API.[nom de la fonction] is not a function”

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

Autres frameworks JS que nous prenons en charge

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 :


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

103 sur 139 ont aimé cet article