Para integrar o chat ao vivo à sua aplicação Vue.js, basta colar o script do widget no arquivo index.html do seu projeto. Veja como fazer isso.
Antes de começar
Você precisa de uma Caixa de Entrada de Website já criada. Se ainda não tiver uma, crie o canal de site antes de continuar e volte para copiar o script.
Passo 1. Obtenha o script do widget
O script do widget fica nas configurações da sua Caixa de Entrada de Website. Acesse Configurações → Caixas de Entrada, selecione o canal de Website e abra a aba Configuração.
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 de fechamento </body>.
<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 = "<url-da-sua-instalação>";
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: "<seu-token-do-site>",
baseUrl: BASE_URL,
});
};
})(document, "script");
</script>
<!-- Script do Chatwoot -->
</body>
Substitua BASE_URL pela URL da sua instalação e websiteToken pelo token da sua caixa de entrada (ambos aparecem no script copiado no Passo 2).
Passo 4. Verificação
Inicie a aplicação e abra o site. O widget de chat ao vivo aparecerá na página.
Módulo para Vue.js e Nuxt.js
Existe também um módulo mantido pela comunidade (desenvolvido pela equipe do @huntersofbook) para integrar o chat ao vivo em projetos Vue 3 e Nuxt 3, caso prefira uma instalação baseada em módulo.