Para integrar o Chatwoot ao seu aplicativo Vue.js, você precisa colar o script do widget Chatwoot no arquivo index.html do seu aplicativo Vue.js.
Veja como fazer isso:
Etapa 1. Obtenha o script do widget
O script do widget pode ser encontrado nas configurações da Caixa de Entrada do seu Site. Acesse Configurações -> Caixas de Entrada -> Selecione o canal do seu Site > aba Configuração.
Se você ainda não criou uma caixa de entrada para o seu site, pode encontrar as instruções passo a passo aqui.
Etapa 2. Copie o script
Copie o script criado no campo código do canal.
Etapa 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
>Lamentamos, mas <%= htmlWebpackPlugin.options.title %> não funciona
corretamente sem o JavaScript habilitado. Por favor, habilite-o para continuar.</strong
>
</noscript>
<div id="app"></div>
<!-- Os arquivos compilados serão injetados automaticamente -->
<!-- O script do Chatwoot vai aqui -->
<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>
<!-- O script do Chatwoot vai aqui -->
</body>
Etapa 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 (criado pelo pessoal incrível da @huntersofbook) para integrar o Chatwoot em seus projetos Vue 3 e Nuxt 3 está disponível. Você pode encontrar uma demonstração aqui.
-
Veja o módulo Vue 3.
-
Veja o módulo Nuxt 3.