![Passo a passo para instalar o widget em uma aplicação Vue.js: abrir a aba Configuração, copiar o script do widget, colar no index.html antes de e iniciar a aplicação.](/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbWNRIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--f252b01f7556319b544647201e6dc27833aa0f24/1730215252-como-instalar-chat-ao-vivo-em-uma-aplicacao-vue-js.png) 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 ``. ```

``` 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.