Instalar o widget

Esta é a página que tira o ChatMade do painel e coloca no ar. Você vai copiar um trecho de código do painel e colar no seu site. Não é preciso saber programar — é preciso ter acesso ao lugar onde se edita o HTML do site, ou conseguir pedir isso para quem tem.

Antes de começar, confirme que a configuração de IA já está salva. Sem ela, o widget aparece mas não responde.

Pegar o código

1. No menu lateral, clique em AI Agents (“Agentes de IA”).
2. No cartão do agente, clique em Configure (“Configurar”).
3. Abra a aba Widget.
4. Na seção Embed Code (“Código de incorporação”), clique no botão de copiar ao lado do bloco de código. Aparece a mensagem Copied to clipboard (“Copiado para a área de transferência”).

O painel gera esse código já preenchido com o identificador do seu agente e o endereço do seu servidor. Copie de lá — não digite à mão.

O que você copiou

O trecho tem esta forma:

<script>
  window.chattermateId = 'SEU-ID-DE-WIDGET';
  window.chattermateBaseUrl = 'https://SEU-SERVIDOR/api/v1';
</script>
<script src="https://app.chatmade.com.br/webclient/chattermate.min.js"></script>

São duas partes, e as duas precisam ir juntas:

• O primeiro <script> guarda duas informações: chattermateId é o identificador do agente, um código longo e único; chattermateBaseUrl é o endereço do servidor com que o chat conversa.
• O segundo <script> carrega o programa do chat.

Os valores no seu painel já vêm certos. Os que aparecem acima são só para você reconhecer o formato.

Colar no site

O painel diz onde: cole o trecho no HTML do seu site, logo antes da tag de fechamento </body>.

Em site feito à mão (HTML puro). Abra o arquivo do template que se repete em todas as páginas — normalmente index.html, footer.php ou equivalente — e cole antes de </body>. Salve e publique.

Em WordPress. No painel do WordPress, vá em Aparência → Editor de temas, ou instale um plugin de inserir código no rodapé, e cole ali. Colando no rodapé do tema, o chat aparece em todas as páginas.

Em Shopify, Wix, Webflow, Squarespace e semelhantes. Todos têm um campo de “código personalizado” ou “scripts do rodapé” nas configurações da loja ou do site. É lá que o trecho vai.

Em site feito por outra pessoa. Mande o trecho para quem cuida do site com uma frase: “colar isto antes do </body>, em todas as páginas”.

Atenção: o trecho precisa estar em toda página onde você quer o chat. Colando só na página inicial, o chat só aparece na página inicial.

Conferir se funcionou

Abra o site numa aba anônima do navegador e recarregue. O botão do chat aparece no canto inferior direito. Clique, mande uma pergunta que a IA saiba responder e veja a resposta chegar.

Se não aparecer nada:

• Você publicou o site depois de colar? Em muitas plataformas, salvar não é publicar.
• O trecho está antes de </body>? Colar no meio do texto da página não funciona.
• Copiou as duas partes? Só o segundo <script>, sem o primeiro, não funciona: o programa carrega mas não sabe qual agente ele é.
• O agente está online? No topo da tela do agente há uma chave marcada Online ou Offline. Precisa estar em Online.
• Está usando conversa identificada? Se você ligou Widget authentication (“Autenticação do widget”) nas configurações avançadas do agente, o código é outro e exige um passo no seu servidor. Veja Conversas identificadas.

Se aparecer a mensagem “This chat widget is not currently configured”, o widget carregou mas o servidor recusou o acesso — quase sempre é a autenticação por token ligada sem o restante configurado.

Abrir o chat com o seu próprio botão

Se você já tem um botão de “Fale conosco” e quer que ele abra o chat, adicione o atributo data-chattermate-open a ele. Não precisa de nenhuma programação além disso:

<button data-chattermate-open>Fale com a gente</button>

Para esconder o botão redondo que o ChatMade coloca sozinho e usar apenas o seu, ligue Hide launcher — I’ll use my own button (“Esconder o botão — vou usar o meu”) na aba Chat Customization (“Personalização do chat”). Veja Aparência do widget.

Quem programa tem ainda um conjunto de comandos disponíveis a partir do momento em que o widget carrega:

ChatterMate.open();                  // abre o chat; open({ message: 'Oi!' }) já deixa o texto digitado
ChatterMate.close();
ChatterMate.toggle();
ChatterMate.on('unread', (count) => { /* mostrar contador no seu botão */ });
ChatterMate.on('ready', () => { /* o widget terminou de carregar */ });

Mudar o comportamento em uma página só

Posição, tamanho e visibilidade do botão são definidos uma vez na aba Chat Customization (“Personalização do chat”) e valem para o site inteiro. Para mudar em uma página específica, declare window.chattermateConfig antes do script que carrega o widget:

<script>
  window.chattermateConfig = {
    displayMode: 'sidebar-right', // 'floating' | 'sidebar-left' | 'sidebar-right' | 'search-bar'
    position: { side: 'right', bottom: 20, offset: 20 },
    width: 400,                   // tamanho da janela flutuante
    height: 560,
    launcher: false,              // esconde o botão padrão
    trigger: '#meu-botao-de-chat',// o seu elemento abre o chat
    zIndex: 999999
  };
</script>

O que você declara aqui tem prioridade sobre o que está salvo no painel.

Embutir o chat dentro da página

Para os agentes com o estilo Ask Anything, existe uma segunda forma: colocar a conversa dentro da página, como um bloco, em vez de um botão flutuante. A aba Widget traz um trecho de <iframe> pronto na seção Iframe Integration (“Integração por iframe”). O painel sugere onde isso rende mais: páginas de ajuda, página de contato e seções dedicadas a suporte.

Próximo passo

Com o chat no ar, ajuste o visual em Aparência do widget.