Pour intégrer Chatwoot à votre application Vue.js, vous devez coller le script du widget Chatwoot dans le fichier index.html de votre application Vue.js.
Voici comment procéder :
Étape 1. Récupérez votre script de widget
Votre script de widget se trouve dans les paramètres de votre boîte de réception du site web. Allez dans Paramètres -> Boîtes de réception -> Sélectionnez votre canal Site web > onglet Configuration.
Si vous n’avez pas encore créé de boîte de réception pour un site web, vous pouvez trouver les instructions détaillées ici.
Étape 2. Copiez le script
Copiez le script qui a été créé dans le champ code du canal.
Étape 3. Collez le script ici
Ouvrez votre projet Vue et collez le script dans le fichier index.html, juste avant la balise de fermeture </body>.
<body>
<noscript>
<strong
>Nous sommes désolés mais <%= htmlWebpackPlugin.options.title %> ne fonctionne pas correctement sans JavaScript activé. Veuillez l'activer pour continuer.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- Chatwoot script goes here -->
<script>
(function (d, t) {
var BASE_URL = "https://example.com";
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = BASE_URL + "/packs/js/sdk.js";
g.defer = true;
g.async = true;
s.parentNode.insertBefore(g, s);
g.onload = function () {
window.chatwootSDK.run({
websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1",
baseUrl: BASE_URL,
});
};
})(document, "script");
</script>
<!-- Chatwoot script goes here -->
</body>
Étape 4. Vérifiez
Vous pourrez maintenant voir le widget Chatwoot sur la page. Quelque chose comme ceci :
Module Vue.js, Nuxt.js
Un module maintenu par la communauté (créé par la formidable équipe de @huntersofbook) est disponible pour intégrer Chatwoot dans vos projets Vue 3 et Nuxt 3. Vous pouvez voir une démo ici.
-
Voir le module Vue 3.
-
Voir le module Nuxt 3.