Central de Ajuda Como colocar o agente no seu site

Como colocar o agente no seu site

Nível: Iniciante
Tempo de leitura: 7 min


Os dois modos de instalar

A Wevi oferece dois jeitos de colocar o agente no seu site:

Botão flutuante: um balãozinho de chat fica no canto inferior do site. Quando o visitante clica, abre uma janela com o agente sobre a página, sem redirecionar. É a forma mais rápida e o jeito padrão. Bom para quase qualquer site.

Chat embutido: o chat aparece dentro de uma seção fixa da página, ocupando o lugar de uma div normal. Sem botão, sem flutuação. Bom para landing pages onde o agente é o foco principal da tela.

Os dois modos compartilham o mesmo agente, a mesma identidade visual e o mesmo histórico de conversas. A diferença é só onde o chat aparece visualmente. Você pode usar os dois ao mesmo tempo se fizer sentido.


Pré-requisitos

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

Botão flutuante: 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 botão flutuante

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

Atributos opcionais para 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 piscar de cor 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>

Chat embutido na página

Em vez do botão flutuante, você pode embutir o chat direto em uma seção da página usando um iframe. Bom quando você quer que o agente seja o foco visual da tela, sem competir com outros elementos.

Passo 1: Copie o código do iframe

  1. No painel da Wevi, abra o agente
  2. Vá até a aba Publicação
  3. Na seção Link Público, role até Chat embutido na página
  4. Clique em "Copiar código"

O código tem este formato:

<iframe
  src="https://app.wevi.chat/embed/SEU_AGENT_ID"
  width="100%"
  height="600"
  style="border:none;border-radius:12px;"
  allow="microphone"
></iframe>

Passo 2: Cole onde quer que o chat apareça

O iframe se comporta como qualquer outro bloco da página. Coloque dentro de uma seção, ajuste o height conforme o espaço disponível, defina o width em porcentagem se quiser que se adapte responsivamente.

Quando usar embutido em vez de flutuante

  • Landing pages dedicadas ao agente, sem outro conteúdo competindo
  • Páginas internas onde você quer que o chat substitua um formulário tradicional
  • Quando você precisa de mais espaço vertical pro chat (o flutuante fica em 380x600 fixo)

Se quiser receber as mensagens do agente via JavaScript no site (pra integrar com analytics ou outras lógicas), ative o postMessage na seção Avançado da publicação. O widget passa a emitir window.postMessage a cada resposta.


Diferença entre widget, embed e link direto

Botão flutuante Chat embutido Link direto
Como aparece Balãozinho no canto, abre janela Bloco fixo dentro da página Página dedicada
Instalação Uma linha de código Iframe colado na página Compartilhe o link
Contexto Cliente não sai do site Cliente não sai do site Canal independente
Melhor para Sites com vários conteúdos Landing page do agente 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