Centre d'assistance | tawk.to | Ajouter un widget tawk.to à votre site Web Vue 2

Ajouter un widget tawk.to à votre site Web Vue 2

Le plug-in tawk.to pour Vue 2 simplifie l'intégration et facilite la personnalisation du comportement des widgets 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 de Vue.js

1. Téléchargez le plugin ici

2. Ensuite, utilisez l'une des commandes ci-dessous pour installer la dépendance à l'aide du nœud ou du gestionnaire de packages de fil.

3. Importez tawk-messenger-vue dans votre composant principal. Attribuez ensuite les valeurs de votre widgetId et de votre propertyId.

Trouvez vos identifiants de widget et de propriété

Pour trouver vos identifiants de widget et de propriété, connectez-vous au tableau de bord tawk.to. Ensuite, dirigez-vous vers ⚙️Administration ➞ Canaux ➞ Widget de discussion.

Si vous avez plusieurs propriétés, vérifiez que vous visualisez la bonne. Survolez le nom de la propriété actuelle dans le menu supérieur du tableau de bord pour afficher toutes vos propriétés et en sélectionner une nouvelle.

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

Sous Lien de discussion directe, le widgetId est le dernier segment du chemin et suit le propertyId.

Dans l'exemple ci-dessous, l'ID de propriété est xxxxxxxxxxxxxxxxxxxxxxxx et le widgetId est 123456789

Implémentation de Nuxt.js

Si vous comptez utiliser 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 comme client.

Propriété d'instance

Pour accéder aux fonctions de l'API, appelez $tawkMessenger n'importe où dans 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 au nom utilisé pour écouter cet événement.

Dépannage

Vous trouverez ci-dessous des solutions pour les deux erreurs les plus courantes commises lors de l'utilisation du plugin.

Erreur #1 : PropertyId non spécifié dans le plugin

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

Le propertyId et le widgetId sont tous deux spécifiés
Les caractères du nom de la propriété correspondent exactement à ceux de propertyId et widgetId
Le I dans propertyId et widgetId est en majuscule
L'ID doit être une chaîne

La solution:

Importer TawkMessengerVue
Configurez Vue pour utiliser le plugin
Définissez les identifiants du widget et de la propriété

Erreur #2 : "TypeError : window.Tawk_API.[nom de la fonction] n'est pas une fonction"

Cette erreur se produit lorsque l'API a été appelée avant le chargement de tawk-messenger.

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

La solution:

1. Mettez le code this.$tawkMessenger.toggle(); à l'intérieur de l'écouteur d'événement de load si vous prévoyez d'appeler cette fonction lors du chargement du messager tawk pour 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 (basculer, maximiser, minimiser, 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 renverra un booléen vrai s'il est chargé.

Autres frameworks JS que nous prenons en charge

Avez-vous besoin d'aide pour intégrer tawk.to dans Vue 2? Contactez notre équipe d'assistance ou planifiez un appel.

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

83 sur 114 ont aimé cet article