Para integrar o Chatwoot à sua aplicação Vue.js, basta adicionar o script do widget no arquivo index.html da aplicação.
Passo a Passo
Passo 1. Obtenha o script do widget
O script do widget está disponível nas configurações de sua Caixa de Entrada de Website. Acesse Configurações -> Caixas de Entrada -> Selecione o canal de Website -> Aba de Configuração.
Caso ainda não tenha criado uma Caixa de Entrada de Website, siga as instruções passo a passo fornecidas.
Passo 2. Copie o script
Copie o código gerado no campo de código do canal.
Passo 3. Cole o script no seu projeto
Abra o projeto Vue e cole o script no arquivo index.html, logo antes da tag </body> de fechamento.
<body>
<noscript>
<strong
>Desculpe, mas <%= htmlWebpackPlugin.options.title %> não funciona
corretamente sem o JavaScript ativado. Por favor, ative-o para continuar.</strong>
</noscript>
<div id="app"></div>
<!-- arquivos compilados serão injetados automaticamente -->
<!-- Script do Chatwoot -->
<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>
<!-- Script do Chatwoot -->
</body>
Passo 4. Verificação
Agora, você verá o widget do Chatwoot na página.
Módulo Vue.js e Nuxt.js
Existe um módulo mantido pela comunidade (desenvolvido pela equipe do @huntersofbook) para integrar o Chatwoot em projetos Vue 3 e Nuxt 3.