# Chat no seu site com atendimento e IA

> O chat no seu site com o visual da marca, um agente de IA que responde na hora e a equipe assumindo a conversa na Caixa de Entrada.

Endereço: https://help.nextags.com.br/trilhas/chat-no-site/
Tipo: Trilha · Básico

Atualizado em: 25/10/2026

## O que você vai construir

Um chat no canto do seu site que transforma visitantes em contatos: o botão e a janela com as cores da marca, uma tela inicial com atalhos, um agente de IA que responde as dúvidas na hora e a equipe assumindo a conversa na Caixa de Entrada quando precisa.

![A seção Tela inicial aberta, com a saudação, o texto e os atalhos, e a prévia com o chat aberto na tela inicial.](https://help.nextags.com.br/_img/canais-webchat/secao-tela-inicial.webp)
*A tela inicial do webchat, com a saudação e os atalhos.*

Ao terminar, você terá:

- o webchat instalado no site, com o endereço autorizado;
- o botão, as cores e a tela inicial do jeito da marca;
- um agente de IA respondendo os visitantes;
- as conversas do site na Caixa de Entrada, junto com as dos outros canais.

**Antes de começar**

- Acesso ao código do site ou ao campo de código personalizado do construtor de sites que você usa.
- Um provedor de IA conectado, como a OpenAI. O uso da IA é pago ao provedor. Veja [Conectar a OpenAI (ChatGPT)](https://help.nextags.com.br/tutoriais/ia/conectar-openai/).

## Passo a passo da trilha

1. [Colocar o webchat no seu site](https://help.nextags.com.br/tutoriais/canais/webchat-no-site.md): Em **Configurações** › **Canais** › **Web Chatbot**, crie o webchat, copie o código na aba **Instalar** e cole no site, antes de `</body>`. Ponha o endereço do site, com e sem `www`, em **Authorized websites**: sem ele, a conversa não abre.
2. [Personalizar o webchat no construtor](https://help.nextags.com.br/tutoriais/canais/personalizar-webchat.md): No **Construtor do webchat**, escolha o botão, as cores e a **Tela inicial**, com até 4 atalhos, e clique em **Aplicar no webchat**. Em **Mensagem de boas-vindas**, escolha o fluxo que recebe o visitante; se mudou o botão, a janela ou a tela inicial, copie o código de novo.
3. [Colocar um agente de IA no chat](https://help.nextags.com.br/tutoriais/ia/criar-agente.md): No **AI Hub**, crie o agente com o que ele precisa saber da empresa e [defina como padrão](https://help.nextags.com.br/tutoriais/ia/agente-padrao/), com a **Resposta Automática por IA** ligada. Para ele chamar a equipe, crie a regra de [quando o agente passa para a equipe](https://help.nextags.com.br/tutoriais/ia/passar-para-humano/).
4. [Atender pela caixa de entrada](https://help.nextags.com.br/tutoriais/caixa-de-entrada/responder-conversas.md): As conversas do site chegam na **Caixa de Entrada**, no canal Webchat. Para atender, clique em **Assumir conversa**: o robô para de responder a esse contato até você clicar em **Transferir para o bot**.

## Pronto: como conferir

- Abra o site e atualize a página: o botão do webchat aparece no canto da tela.
- Faça uma pergunta como visitante: o agente responde, e a conversa aparece na **Caixa de Entrada**.
- Peça para falar com uma pessoa: a conversa passa para a equipe.

### Faça com a IA

Cole este pedido no ChatGPT ou no Claude:

```text
Vou colocar o chat da NexTags no meu site, com um agente de IA. Leia esta trilha: https://help.nextags.com.br/trilhas/chat-no-site.md

Meu site: [o que a empresa faz e o que os visitantes mais perguntam]. Escreva a saudação (até 40 caracteres) e o texto da tela inicial (até 90), 4 atalhos, a mensagem de boas-vindas e a mensagem do sistema do agente, com as regras de quando chamar a equipe.
```