` é o ponto de montagem — o painel de chat é renderizado dentro dele e preenche suas dimensões. Estilize a div como quiser (dê a ela uma altura fixa, coloque-a dentro de um container flex, posicione-a em uma célula de grid, etc.) e o painel de chat seguirá essas definições.
Você só precisa de **uma** tag `
```
{% endcode %}
O snippet em linha o carrega no `
`, para que uma página possa conter vários chats indo para lugares diferentes:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Para um agente, a redação muda para `?agent=AGENT_ID` ou `data-agent="AGENT_ID"`.
Algumas coisas que vale a pena saber:
- Use o botão de copiar em vez de digitar o ID manualmente. Se o ID não corresponder a uma campanha ou agente em sua conta, o chat ainda funcionará, mas retornará ao seu roteamento padrão.
- Alguém que já está no meio de uma conversa permanece com quem começou, mesmo que depois acesse uma página que aponte para outro lugar. Isso evita que uma conversa mude de personalidade no meio do caminho.
- Um destino específico por página tem prioridade sobre o padrão da sua conta e sobre gatilhos de palavras-chave.
### Informe ao Widget quem é o visitante (Avançado)
Se você colocar o widget de chat dentro de uma área de membros, um portal do cliente ou um aplicativo onde as pessoas já estão conectadas, seu site já sabe quem elas são. Você pode repassar essas informações ao widget para que o visitante não precise fornecer detalhes que já informou anteriormente, e para que sua IA possa usar o que você já sabe sobre ele.
Adicione um pequeno bloco de configurações **antes** do script do widget:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Sua página deve preencher esses valores no lado do servidor, a partir de quem estiver logado.
Duas coisas acontecem:
- **O formulário "Antes de começarmos..." é ignorado.** Com um nome e um e-mail fornecidos, o visitante vai direto para a conversa, e esses detalhes são salvos no contato dele exatamente como se ele os tivesse digitado.
- **Tudo em `data` é repassado para sua IA.** Qualquer coisa que você colocar lá — plano, número do pedido, data de renovação, saldo de crédito, quantos assentos eles possuem — torna-se parte do que a IA sabe sobre aquela pessoa, para que ela possa responder "quando meu plano renova?" sem pedir que eles expliquem quem são primeiro. Use os nomes de campo que fizerem sentido para você; eles aparecerão no contato em Campos Personalizados. Até 20 valores, enviados atualizados a cada mensagem, então, se o plano mudar no meio da conversa, a IA verá o novo.
Para incorporações em linha (inline), você pode colocar as mesmas informações no `
`, o que é útil quando uma página contém vários chats:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Se o seu site só sabe quem é o visitante após o carregamento da página — um aplicativo de página única onde o login ocorre sem recarregar a página, por exemplo — chame isto sempre que tiver os detalhes, e o widget se atualizará:
{% code overflow="wrap" %}
```html
```
{% endcode %}
Algumas coisas que vale a pena saber:
- Se duas pessoas diferentes fizerem login no mesmo computador, a segunda iniciará uma nova conversa em vez de ver o chat da primeira. O widget percebe a mudança de pessoa e se redefine.
- Isso serve para contexto, não para autenticar alguém. As conversas ainda são mantidas separadas como sempre foram, portanto, passar um `id` não permite que ninguém abra o chat de outra pessoa, e alguém usando um dispositivo ou navegador diferente iniciará uma nova conversa lá.
- É opcional. Um widget em uma página pública normal não precisa de nada disso e se comporta exatamente como antes.
### Altere as configurações do widget a partir do seu próprio código (API)
Tudo no painel **Gerenciar** do widget também pode ser alterado por meio da [API REST](../api/reference.md), o que é útil se você gerencia muitos sites ou deseja que o botão de anexo seja desativado automaticamente para um cliente. Envie uma `PATCH` para `https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID` com sua chave de API e apenas os campos que deseja alterar — por exemplo, `{"show_upload_button": false}` oculta o botão de anexo, `{"show_emoji_button": false}` oculta o seletor de emojis e `{"launcher_icon": "chat-dots"}` troca o ícone do iniciador. `CONFIG_ID` é o mesmo identificador usado no seu script de incorporação. A lista completa de campos aceitos (nome, mensagem de abertura, cores, ícone do iniciador, domínios permitidos, formulário de informações do visitante, aviso de privacidade, tema, estilo de canto e fonte) está na [Referência da API](../api/reference.md) em **Widget de Chat**. Os sites aplicam a alteração na próxima vez que a página for carregada.
### O que esperar após a instalação
Depois de adicionar o script ao seu site, o widget de chat criará automaticamente um botão de chat no canto do seu site (canto inferior direito por padrão). O widget permanece em uma posição fixa conforme os usuários rolam suas páginas, garantindo que ele esteja sempre acessível.
Quando os visitantes clicam neste botão, ele se expande para uma janela de chat completa onde eles podem iniciar uma conversa, exibindo sua mensagem de abertura. Se a opção Coletar informações do visitante estiver ativada, um pequeno formulário aparece primeiro solicitando o nome e o e-mail (e, opcionalmente, o telefone) antes que eles possam digitar.
A interface do chat se adapta automaticamente a diferentes tamanhos de tela, funcionando perfeitamente tanto em computadores quanto em dispositivos móveis.
### Testando sua implementação
Após adicionar o widget ao seu site, teste se ele funciona:
1. Abra seu site em um navegador.
2. Clique no botão de chat para abrir o widget.
3. Envie uma mensagem de teste e confirme se você recebe uma resposta.
4. Repita em um dispositivo ou navegador diferente para confirmar se funciona em todos os lugares.
Se o widget de chat não aparecer no seu site, verifique o seguinte:
1. Certifique-se de ter substituído `CONFIG_ID` pelo seu identificador de configuração real.
2. Certifique-se de que a tag de script esteja posicionada antes da tag de fechamento `