Para integrar o Chatwoot com sua aplicação Vue.js, você precisa colar o script do widget do Chatwoot no arquivo index.html da sua aplicação Vue.js.
Veja como fazer isso:
Passo 1. Obtenha seu script do widget
Seu script do widget pode ser encontrado nas configurações da Caixa de Entrada do seu site. Vá em Configurações -> Caixas de Entrada -> Selecione seu canal do site > aba Configuração.
Se você ainda não criou uma caixa de entrada para o site, pode encontrar as instruções passo a passo aqui.
Passo 2. Copie o script
Copie o script que foi criado no campo code do canal.
Passo 3. Cole o script aqui
Abra seu projeto Vue e cole o script no arquivo index.html, logo antes da tag de fechamento </body>.
<body>
<noscript>
<strong
>Desculpe, mas <%= htmlWebpackPlugin.options.title %> não funciona
corretamente sem o JavaScript ativado. Por favor, ative para continuar.</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>
Passo 4. Verifique
Agora você poderá ver o widget do Chatwoot na página. Algo assim:
Módulo Vue.js, Nuxt.js
Um módulo mantido pela comunidade (Feito pelo pessoal incrível da @huntersofbook) para integrar o Chatwoot em seus projetos Vue 3 e Nuxt 3 está disponível. Você pode encontrar um exemplo aqui.
-
Veja o módulo Vue 3.
-
Veja o módulo Nuxt 3.