> Botão de chat no site do provedor, atendido pela mesma IA do WhatsApp. Como contratar, instalar, ajustar a aparência, tratar documentos e continuar no site uma conversa do WhatsApp. # Chat do site Um **botão de chat no site da sua empresa**. O visitante conversa com a mesma IA que atende o seu WhatsApp, que transfere para os especialistas e para a sua equipe, e a equipe responde pelo [inbox](/comunicacao/atendimento), como em qualquer outro canal. > **Nota.** > **É um módulo pago, contratado à parte do plano.** Ele tem o mesmo valor do Conecta Maps e **não ocupa a franquia de canais** do seu plano. O valor está em [Os planos › Módulos adicionais](/plano/tiers#módulos-adicionais) e na tela **Plano** do painel. ## Onde fica Menu **Loja › Chat do site**, rota `/config/integracoes/chat-do-site`. A página tem **2 abas**: **Visão geral** e **Configuração**. - Abrir a tela exige a permissão **`integracoes:view`**. - Criar o chat, salvar a configuração e girar o segredo exigem **`integracoes:edit`**. Se a tela mostrar **Chat do site ainda não liberado**, o recurso ainda não foi liberado para a sua empresa pela equipe da ConectaAI. Mesmo assim, o botão **Enviar à Meta** já funciona logo abaixo, para adiantar a aprovação das mensagens (veja [Mensagens aprovadas pela Meta](#mensagens-aprovadas-pela-meta)). ## Contratar o módulo Sem o módulo, a aba **Visão geral** explica o que ele é e mostra o botão **Contratar o Chat do site**. 1. Clique em **Contratar o Chat do site**. Abre o painel de contratação da [Loja](/configuracoes/integracoes/modulos#como-contratar): resumo, cadastro da empresa (quando falta algum dado) e termo aditivo. 2. Com a cobrança pela plataforma (Stripe), você paga o valor proporcional até o fim do ciclo e o módulo liga quando o pagamento é confirmado; depois ele entra na fatura mensal. Com a cobrança fora da plataforma, o botão envia um pedido, e a equipe da ConectaAI traz a cobrança para a plataforma antes de ligar. 3. **Só com o módulo ligado o chat atende**: enquanto o pagamento ou o pedido está em andamento, o chat ainda não atende. Quem não pode mexer no plano da empresa vê a explicação sem o botão, com o aviso **"Para contratar, fale com quem administra o plano da empresa."** Enquanto o módulo não está ligado, **Enviar à Meta** já funciona: essas mensagens não são cobradas, e a aprovação pode ir adiantando. ## Criar o chat e colocar no site Na aba **Visão geral**, **Criar o chat do site** cria o chat. Depois de criado, a mesma aba traz três formas de levar o chat ao visitante: | O que | Para que serve | |-------|----------------| | **Trecho para colar no site** (botão **Copiar trecho**) | O código que você cola no site. Ele mostra o botão de chat no canto da página. | | **Link em tela cheia** (botão **Copiar link**) | Abre o chat numa página própria. **Funciona em qualquer lugar**, sem depender de domínio autorizado: dá para mandar por e-mail, pôr numa bio ou num botão de outro sistema. | | **QR code** (botão **Baixar QR code**) | O mesmo link em tela cheia, em imagem, para material impresso. | Para o botão aparecer no seu site, falta só **autorizar o domínio** dele na aba **Configuração** (próxima seção). > **Atenção.** > **Nenhum agente habilitado, nenhuma resposta.** Se a empresa não tiver nenhum agente de IA habilitado, a tela avisa que o chat não vai responder. Habilite um em [Agentes](/ambiente-ia/agentes). ## Domínios autorizados Na aba **Configuração**, o campo **Domínios autorizados** diz em quais sites o chat pode abrir. - **Um domínio por linha**, até **20** por chat. Exemplo: `www.seusite.com.br` numa linha e `seusite.com.br` na outra. - O **navegador do visitante** só abre a janela do chat em site da lista. Em qualquer outro site, ele recusa. - A lista nova **vale em até 30 segundos** depois de salvar. - **Sem nenhum domínio**, o chat só abre pelo **link em tela cheia**. > **Atenção.** > **O curinga não cobre o domínio principal.** `*.seusite.com.br` cobre os subdomínios (`www.seusite.com.br`, `central.seusite.com.br`) e **não** cobre `seusite.com.br`. Se o seu site abre sem `www`, adicione os dois. Curinga largo demais, como `*.com.br`, é recusado. Salvou um domínio novo e o chat ainda não apareceu? Espere os 30 segundos e **recarregue a página do site**. ## Aparência Também na aba **Configuração**. A **prévia** ao lado mostra o resultado na hora, antes de salvar. As mudanças vão ao site pelo botão **Salvar**, e o site passa a usar a configuração nova em até 30 segundos. ### Cor do botão **Azul** (o padrão), **Grafite**, **Verde** ou **Outra cor**, que aceita qualquer cor no formato `#RRGGBB` (por exemplo `#3B5BFF`) ou escolhida no seletor. A cor do texto e do ícone sobre ela **não é escolha sua**: o sistema usa claro ou escuro, o que ficar legível sobre a cor escolhida. ### Tema da janela | Tema | Como fica | |------|-----------| | **Claro** | O padrão. | | **Escuro** | Janela escura. | | **Automático** | Claro ou escuro, como o aparelho do visitante estiver. Na prévia, segue o seu aparelho. | | **Cor da marca** | Cabeçalho e respostas do atendimento na cor escolhida. | ### Ícone do botão Troca o balão padrão por uma imagem da sua empresa: **PNG, JPG ou WebP, até 256 KB**. O ícone vale assim que é enviado, sem precisar de **Salvar**, e aparece no site na próxima vez que a página carregar. **Remover** volta ao balão. > **Atenção.** > **SVG é recusado, por segurança.** Exporte o logo em PNG com fundo transparente. ### Posição e saudação - **Posição do botão**: **Canto direito** (o padrão) ou **Canto esquerdo**. - **Saudação**: aparece no topo da conversa vazia, com até **160 caracteres**. Vazia, usa "Como podemos ajudar?". ## Quem abre o atendimento **Quem abre o atendimento neste chat**, na aba **Configuração**, escolhe o agente que recebe a primeira mensagem do visitante. O nome e a foto dele aparecem no topo da janela (as iniciais, quando não há foto). Sem escolha, vale o **agente principal** da empresa. A troca vale para as próximas conversas deste chat. Quem decide é este campo, e não a lista de canais de [Agentes](/ambiente-ia/agentes). ## Nome do visitante Antes de abrir a conversa, a janela pergunta **"Como podemos te chamar?"**. O nome digitado vira o **nome do contato no inbox** e é o único nome que a IA usa para chamar o visitante. É texto digitado por ele, **não prova quem é o titular** do cadastro. ## Sugestões de início Na janela ainda vazia, o chat mostra botões de sugestão que somem na primeira mensagem. - **Pela página em que o visitante está.** Em página de planos, por exemplo, aparecem "Tem cobertura no meu endereço?", "Quais são os planos?" e "Quero contratar". Em página de suporte, aparecem sugestões de suporte. Nas demais páginas, as sugestões são gerais. - **As suas, se preferir.** Na aba **Configuração**, **Sugestões de início** aceita **até 3** botões de até 40 caracteres. Com as suas preenchidas, elas valem em todas as páginas. Em branco, o chat sugere pela página. ## Botões e endereço na conversa - **Botões e listas aparecem na própria janela.** A mensagem pode mostrar cabeçalho, corpo e rodapé. Os botões ficam abaixo do balão; a lista abre um painel com seções e descrições, onde o visitante escolhe uma opção e toca em **Enviar**. A escolha segue para o atendimento. As opções anteriores ficam desativadas depois da resposta do visitante. - **Endereço por escrito.** A janela do site não envia localização, então onde o WhatsApp pediria a localização a IA pede **o endereço completo, escrito**. ## A IA sabe de onde o visitante veio A cada mensagem, a IA recebe **a página em que o visitante está e a campanha** de onde ele chegou, quando o link trazia uma. Com isso ela responde conforme o contexto, como oferecer planos a quem está na página de planos. - **Cobertura no site.** Se a sua empresa publicou áreas de cobertura no [Conecta Maps](/operacoes/conecta-maps), a IA consulta se o endereço do visitante é atendido. - **Só informação de contexto.** A página e a campanha vêm do navegador do visitante e podem ser alteradas por ele, então a IA as trata como dica, nunca como instrução nem como prova. - **Privacidade.** O chat guarda só o caminho da página, o título e a campanha. E-mail e sequências longas de números (como CPF ou telefone) que apareçam no endereço da página são trocados por `…` antes de qualquer uso. ## Quer que o comercial fale com você? Para quem tem o [Conecta Sales](/operacoes/conecta-sales), quando o visitante demonstra **intenção de contratar**, a janela mostra sozinha o cartão **"Quer que o comercial fale com você?"**. - O visitante informa o nome (opcional), um **WhatsApp ou e-mail** e marca uma **autorização própria** para a empresa entrar em contato sobre a contratação. **Agora não** esconde o cartão até ele sair da página. - O cartão nunca aparece junto do pedido de aviso de resposta (próxima seção "Quando a conversa passa para a equipe"). - Ao enviar, **abre uma negociação no Conecta Sales** com a origem **chat do site**, a página (e a campanha, quando houver) e o contato informado, com a frase que o visitante autorizou. Quem pode ver a negociação vê o contato inteiro. - **O contato informado é apagado quando a negociação é marcada como ganha ou perdida.** Sem o Conecta Sales, o cartão não aparece. ## A conversa na janela A janela do chat funciona como uma conversa de WhatsApp, com as cores da sua marca. - **Quem respondeu.** Acima da primeira resposta de cada sequência aparecem o **nome e as iniciais** de quem respondeu, seja agente de IA ou atendente, nunca foto. A [assinatura do atendente](/comunicacao/atendimento#o-corpo-da-conversa) não entra no texto neste canal: o nome acima da mensagem faz esse papel. - **Texto formatado.** Negrito, itálico e links aparecem formatados, como no WhatsApp. O link abre em outra aba. - **Atendimentos anteriores.** O visitante vê também as conversas anteriores dele **neste navegador**, separadas por data e protocolo. As mais antigas carregam ao rolar para cima. - **Leitura.** As mensagens ficam separadas por dia (Hoje, Ontem ou a data). Se o visitante rolou para cima e chegou resposta, um botão mostra quantas são novas e leva ao fim. - **Ações na mensagem.** Ao segurar a mensagem no celular, ou pelo botão de ações ao lado dela no computador, o visitante pode **Copiar** (e **Copiar código PIX**, só o código, quando a mensagem traz um), **Responder** citando a mensagem e reagir com 👍 ❤️ 😂 😮 🙏, só nas respostas do atendimento. Só dá para citar ou reagir a mensagens que ele mesmo vê na janela. A sua equipe vê a citação e a reação no [inbox](/comunicacao/atendimento#o-corpo-da-conversa). - **Emojis e som.** O campo de mensagem tem um painel de emojis, e um som curto avisa quando o atendimento responde com a janela aberta. ## Foto, PDF, áudio e vídeo Além de texto, a conversa no site troca **foto, PDF, áudio e vídeo** nos dois sentidos. ### O que o visitante pode mandar - **Foto** (JPEG, PNG ou WebP, até 5 MB), **PDF** (até 10 MB) e **vídeo** (MP4 ou MOV, até 15,9 MB), pelo botão de anexo da janela. **No celular, o mesmo botão oferece a câmera** e a galeria. - **Áudio gravado na própria janela**, pelo botão de microfone. A gravação mostra o tempo e para sozinha quando chega ao tempo máximo. - **Antes de enviar, ele vê a prévia**: a miniatura da foto, o nome e o tamanho do PDF ou o áudio gravado para ouvir. Pode escrever uma **legenda** na foto e no PDF, e escolhe entre enviar e descartar. Junto do anexo aparece o aviso **"Não envie documento de outra pessoa."** - Enquanto envia, a bolha mostra o progresso. O arquivo é **conferido pelo conteúdo, não pelo nome**: renomear um arquivo não faz ele passar. **SVG, GIF, planilha e documento do Office não são aceitos**, nem vídeo em outro formato que não MP4 ou MOV. Arquivo recusado ou grande demais mostra o motivo na janela, sem o botão **Tentar de novo**, porque repetir daria o mesmo resultado. O botão aparece quando a falha foi de conexão. Há um limite de arquivos por visitante, por endereço de internet e por chat a cada hora. Quem passa dele vê **"Você enviou muitos arquivos agora. Tente daqui a pouco ou mande pelo WhatsApp."** > **Nota.** > **O microfone depende do navegador do visitante.** Se ele bloqueou o microfone para o site, a janela explica como liberar nas permissões do navegador e esconde o botão de gravar. Foto e arquivo continuam funcionando. ### O que o visitante vê - As **respostas com mídia** aparecem na própria conversa: a foto em miniatura, que amplia ao tocar; o áudio com player; o vídeo para tocar ali mesmo; o PDF como um cartão com nome e tamanho, que abre em outra aba. - Na foto e no PDF que ele mesmo mandou, aparece **só a legenda que ele escreveu**. A transcrição do áudio e a descrição da foto ficam para a IA e para a sua equipe. - Cada mensagem dele mostra **Enviada** e depois **Vista**. Ela fica **Vista** quando a IA respondeu depois dela ou quando alguém da equipe abriu a conversa no inbox. Conta também a equipe da ConectaAI, quando abre a conversa para dar suporte. ### O que a sua equipe vê e faz no inbox - A mídia do visitante aparece no [inbox](/comunicacao/atendimento) como a do WhatsApp: **o áudio chega com a transcrição** escrita embaixo do player, e a foto e o PDF chegam com a legenda que o visitante escreveu, quando ele escreveu uma. A descrição da foto feita pela IA não aparece na conversa: ela fica só para a IA. - **A IA não lê o conteúdo do PDF.** Ela sabe que chegou um documento e o nome dele. Para saber o que está escrito, abra o arquivo no inbox. - A equipe **responde com foto, PDF, vídeo ou áudio** pelo mesmo botão de anexo e pelo mesmo gravador das outras conversas. - O vídeo do visitante aparece na conversa para tocar. A IA sabe que chegou um vídeo, mas não vê o conteúdo dele. - Nas mensagens da equipe e da IA, o status mostra **Entregue** quando a mensagem chegou à janela do visitante e **Lida** quando ela esteve na tela com a janela aberta. Com a janela fechada, fica **Enviada**. - No painel do cliente, em **Detalhes da conversa**, a linha **Começou em** mostra a página onde a conversa começou (título e caminho) e a campanha, quando houver. Se o visitante navegou para outra página, aparece também **Página agora**. O caminho é texto, nunca um link clicável. - Quando a IA passa a conversa para uma pessoa, a nota de escalonamento traz a linha **Origem no site** com a página e a campanha. - Toda conversa do chat do site traz, acima da caixa de digitação, o aviso: **"Quem está no site não provou que é o titular. Documento pessoal (boleto, PIX, nota) vai pelo WhatsApp do cadastro."** É um aviso, não uma trava: quem decide o que mandar é o atendente. > **Atenção.** > **CPF dito em áudio, no site, não identifica.** No chat do site, o visitante precisa **digitar** o CPF ou o CNPJ para ser identificado. Um documento falado no áudio não conta, mesmo que apareça na transcrição. ## Documentos pessoais vão ao WhatsApp do cadastro No site, qualquer pessoa pode digitar um CPF. Por isso o chat **nunca mostra no navegador** a 2ª via da fatura, o código PIX ou a nota fiscal: ele envia o documento ao **WhatsApp do cadastro** do cliente, e ao visitante diz só para qual número foi, mascarado (por exemplo, "Enviei a 2ª via da fatura para o WhatsApp terminado em 0000"). Se o cliente não falou com a empresa pelo WhatsApp nas últimas 24 horas, o envio usa a mensagem **Entrega de documento**, que precisa estar aprovada pela Meta (próxima seção). Quando não há canal do cadastro para enviar com segurança, a IA oferece chamar uma pessoa da equipe. ## Mensagens aprovadas pela Meta O chat usa duas mensagens do WhatsApp oficial, que a Meta precisa aprovar: - **Entrega de documento**: leva o documento ao WhatsApp do cadastro fora da janela de 24 horas. - **Aviso de resposta**: avisa o visitante que saiu da página quando a equipe responde (veja a próxima seção). O quadro **Mensagens aprovadas pela Meta**, na **Visão geral**, mostra o estado de cada uma **por número** de WhatsApp (por exemplo **Aprovado**, **Recusado pela Meta** ou **Não enviado à Meta**), e **Enviar à Meta** manda as que faltam. A aprovação costuma chegar em minutos. Sem nenhum WhatsApp oficial conectado, não há para onde enviar. Veja também [Templates HSM](/configuracoes/integracoes/templates-hsm). ## Quando a conversa passa para a equipe Quando a conversa passa para uma pessoa da equipe, a própria janela do chat pergunta ao visitante: **"Quer ser avisado quando a equipe responder?"** - Ele pode deixar um **WhatsApp com DDD** ou um **e-mail**, e precisa marcar a autorização para que a empresa use o contato **só para avisar sobre este atendimento**. É opcional: **Agora não** dispensa. - Se ele sair da página e a equipe responder, chega um aviso com um trecho da resposta e um **link que reabre a mesma conversa** no navegador. O link do e-mail vale por 72 horas. Mensagens seguidas da equipe geram **no máximo um aviso a cada 10 minutos** por conversa. - Se o visitante responder pelo WhatsApp em vez de voltar pelo link, isso abre uma conversa normal de WhatsApp, separada da conversa do site. - O visitante pode **Remover contato** a qualquer momento, e o contato é apagado quando a conversa é resolvida ou encerrada. As confirmações do próprio visitante ("Combinado..." e "Pronto...") desaparecem da janela na próxima mensagem. No inbox, a equipe vê uma linha de aviso na conversa. Se o visitante saiu sem deixar contato, ela diz que ele **verá a resposta se voltar à página**. > **Nota.** > **Contato de retorno não é identificação.** Ninguém confirmou que o número ou e-mail é da pessoa, então ele serve só para o aviso: não identifica o cliente nem libera documentos. ## Continuar no chat do site uma conversa do WhatsApp A equipe pode mandar ao cliente um link para ele seguir no chat do site o atendimento que começou no [WhatsApp Cloud API](/configuracoes/integracoes/whatsapp-cloud). 1. No [inbox](/comunicacao/atendimento#detalhes-tags-e-histórico), abra a conversa de WhatsApp e, em **Detalhes da conversa**, clique em **Continuar no chat do site**. 2. Confirme em **Mandar link**. O cliente recebe, pelo WhatsApp dessa mesma conversa: *"Para continuar este atendimento pelo chat do site, abra o link abaixo. O link vale uma vez só e por 30 minutos."*, seguido do link. 3. Quando ele abre o link, a janela do chat diz **"Seu atendimento continua por aqui. Pode escrever."**, sem as sugestões de início. **Quando o botão aparece.** Só em conversa de WhatsApp em andamento, com o Chat do site ligado para a empresa. Mandar o link exige a mesma permissão de responder conversas. Se o cliente não escreve há mais de 24 horas, o botão fica desligado e avisa que o link só sai depois que ele responder: o link não sai por template. **O link é de uso único.** Vale uma vez só e por 30 minutos, e mandar um link novo na mesma conversa cancela o anterior. Ele não aparece na tela para copiar: só existe no WhatsApp do cliente. No inbox, a mensagem fica registrada sem o link. Link usado, vencido ou cancelado abre a janela com **"Este link não vale mais. Peça um novo no WhatsApp."** **O que acontece quando o cliente abre.** - Nasce uma **conversa nova do chat do site, com protocolo próprio**, ligada ao mesmo contato. A conversa do WhatsApp é encerrada. - Em **Detalhes da conversa**, a nova mostra **Continuação de #protocolo** e a antiga mostra **Continuou no Chat do site em #protocolo**. - A pesquisa de satisfação não sai pela conversa do WhatsApp que continuou no site. **A IA do site sabe do que se tratava.** Ela lê o trecho final da conversa do WhatsApp com o nome, o documento e os outros dados pessoais trocados por marcadores. Se sobrar algum dado pessoal que a troca não tirou, ela não recebe o trecho e fica só com o aviso de que é uma continuação. > **Atenção.** > **Abrir o link não prova que é o titular.** Um link pode ser encaminhado, e o navegador não diz quem está do outro lado. No site, a IA segue as mesmas regras de quem só digitou o CPF: não repete nome, documento, telefone, endereço, plano nem valores, e os documentos continuam indo ao [WhatsApp do cadastro](#documentos-pessoais-vão-ao-whatsapp-do-cadastro). ## Onde o chat apareceu O quadro **Onde o chat apareceu** lista os sites que carregaram o trecho nos **últimos 30 dias**, cada um marcado como **autorizado** ou **não autorizado** pela lista de domínios de agora. Guarda até 50 sites de cada tipo, e quando enche saem os mais antigos. É um **sinal, não uma trava**: serve para você descobrir, por exemplo, que o trecho foi colado num domínio que faltou autorizar. Quem impede a janela de abrir fora da lista é o navegador. ## Girar o segredo **Girar o segredo** (confirmando em **Girar agora**) **encerra os chats abertos**: em cerca de 25 segundos, quem estava conversando perde a conversa em andamento e começa uma nova. O histórico continua no inbox. > **Importante.** > **Não dá para desfazer.** Não use para "atualizar" o chat: mudanças de aparência e de domínio já valem sozinhas em até 30 segundos. Gire o segredo só quando precisar derrubar os chats abertos. ## Erros comuns - **Autorizar só `*.seusite.com.br` e colar o trecho em `seusite.com.br`.** O curinga não cobre o domínio principal: adicione os dois. - **Testar logo depois de salvar e achar que não funcionou.** A lista nova vale em até 30 segundos. Espere e recarregue a página do site. - **Esperar o boleto na conversa.** Por segurança, o chat do site manda ao WhatsApp do cadastro. - **Achar que pedir o módulo já liga o chat.** O pedido avisa a equipe da ConectaAI, e o chat só atende depois que ela liga o módulo. - **Procurar em Agentes quem atende o chat.** Quem decide é **Quem abre o atendimento neste chat**, na aba Configuração. - **Enviar o logo em SVG.** O formato é recusado: use PNG com fundo transparente. - **Esperar planilha ou documento do Office pelo chat.** O chat do site aceita foto, PDF, áudio e vídeo (MP4 ou MOV). - **Achar que a IA leu o PDF do visitante.** Ela sabe que chegou um documento e o nome dele, não o conteúdo. Abra o arquivo no inbox. - **Visitante dizendo que o botão de gravar sumiu.** O navegador dele bloqueou o microfone para o site. A janela explica como liberar, e foto e arquivo continuam funcionando. - **Esperar o cartão do comercial sem o Conecta Sales.** Ele só aparece para quem tem o módulo e quando o visitante mostra intenção de contratar. - **Considerar identificado quem disse o CPF no áudio.** No site, o documento precisa ser digitado. - **Procurar o link de continuação para copiar.** Ele não aparece na tela de propósito: só sai pelo WhatsApp da conversa. Se o cliente perdeu o link ou ele venceu, mande outro. ## Veja também - [Atendimento](/comunicacao/atendimento): onde a equipe responde as conversas do site - [Templates HSM](/configuracoes/integracoes/templates-hsm): as mensagens aprovadas pela Meta - [Os planos](/plano/tiers#módulos-adicionais): os módulos contratados à parte ## Digitando e respostas com opções O visitante vê **Digitando** quando a IA prepara a resposta ou um atendente escreve uma resposta para ele. Notas internas e sussurros ficam com a equipe. Depois de algumas perguntas fechadas da IA, a janela pode sugerir **Sim**, **Não** ou opções de escolha. O visitante pode tocar na sugestão ou escrever normalmente. Perguntas abertas e pedidos de dados continuam com resposta livre. A equipe também pode enviar respostas com botões pelo inbox para o chat do site. Respostas com botões e anexo de imagem, vídeo ou arquivo não são aceitas nesse canal. Para pedir localização, use texto e peça o endereço completo.