Wevi | Central de Ajuda ← Voltar ao site
Central de Ajuda › Como instalar o widget de chat no site

Como instalar o widget de chat no site

Nível: Iniciante
Tempo de leitura: 5 min

O que é o widget

O widget é um botão flutuante que aparece no canto inferior direito do seu site. Quando o visitante clica, abre uma janela de chat com o seu agente, sem sair da página e sem redirecionamentos.

É a forma mais rápida de colocar IA no seu site: uma linha de código e está no ar.

Pré-requisitos

  • Um agente criado e com status Ativo
  • Acesso ao HTML do seu site (ou acesso ao Google Tag Manager)

Instalação via código

Passo 1: Copie o código do widget

  1. No painel da Wevi, abra o agente desejado
  2. Vá até a aba Publicação (step 4 do editor)
  3. Na seção Link Público, clique em "Copiar código"

O código tem este formato:

<script src="https://app.wevi.chat/embed.js" data-agent="SEU_AGENT_ID" data-color="#SUA_COR"></script>

Passo 2: Cole antes do fechamento do </body>

No HTML do seu site, localize a tag </body> e cole o código imediatamente antes dela:

    <!-- ... conteúdo do site ... -->

    <script src="https://app.wevi.chat/embed.js" data-agent="SEU_AGENT_ID" data-color="#SUA_COR"></script>
  </body>
</html>

Passo 3: Publique e verifique

Após publicar as alterações no seu site, abra uma aba anônima e verifique se o widget aparece no canto inferior direito.

Instalação via Google Tag Manager

Se você usa GTM, não precisa mexer no código do site:

  1. Acesse seu container no GTM
  2. Crie uma nova Tag do tipo "HTML personalizado"
  3. Cole o código do widget
  4. Configure o acionador como "All Pages" (ou as páginas que desejar)
  5. Salve e publique o container

Instalação em plataformas populares

WordPress

  1. Instale o plugin "Insert Headers and Footers" (gratuito)
  2. Acesse Configurações → Insert Headers and Footers
  3. Cole o código na seção "Scripts no rodapé"
  4. Salve

Shopify

  1. Acesse Loja online → Temas → Editar código
  2. Abra o arquivo theme.liquid
  3. Cole o código antes de </body>
  4. Salve

Webflow

  1. Acesse Configurações do projeto → Custom Code
  2. Cole o código na seção "Footer Code"
  3. Publique o site

Wix

  1. Acesse Configurações → Avançado → Código personalizado
  2. Clique em "Adicionar código"
  3. Cole o código, selecione "Antes de " e aplique a "Todas as páginas"
  4. Salve

Personalizando o widget

A cor do botão flutuante é herdada automaticamente da cor principal configurada na aba Aparência do agente. Você não precisa definir nada no código para isso.

Um atributo opcional permite ajustar o comportamento:

  • data-position: posição do botão. Valores aceitos: right (padrão) ou left
  • data-color: cor inicial do botão antes do chat carregar. Útil para evitar um piscar de cor diferente no primeiro carregamento. Se omitido, o botão aparece em verde escuro até a cor do agente ser carregada.

Exemplo com posição à esquerda:

<script src="https://app.wevi.chat/embed.js" data-agent="SEU_AGENT_ID" data-position="left"></script>

Diferença entre widget e link direto

Widget (embed.js) Link direto
Como aparece Botão flutuante sobre o site Página dedicada
Instalação Uma linha de código Compartilhe o link
Contexto Cliente não sai do site Canal independente
Melhor para Sites existentes Links em bio, QR code, campanhas

Verificando se está funcionando

Após instalar, acesse o painel e veja se conversas aparecem em Conversas. Se sim, o widget está recebendo mensagens corretamente.

Próximos passos

←

Anterior

Formatos de arquivo suportados na base de conhecimento

Próximo

Como interpretar o dashboard de analytics

→