> For the complete documentation index, see [llms.txt](https://docs.hablla.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hablla.com/hablla/configuracoes/conexoes-e-integracoes/webchat.md). # Webchat Conheça o canal de Webchat da Hablla: o que é, como o modo de pesquisa identifica cada visitante do seu site e quais opções de personalização visual estão disponíveis. ## O que é o Webchat O **Webchat da Hablla** é um canal de atendimento que permite que seus clientes conversem com a sua empresa **diretamente pelo site**, sem precisar sair da página. Na prática, ele funciona da mesma forma que os outros canais da plataforma, como **WhatsApp**, **Instagram** e **Telegram**: é mais uma *connection* dentro da Hablla. Isso significa que o Webchat pode utilizar: * Fluxos * Inteligência Artificial * Bots * Atendimento humano * Automação A única diferença é o ponto de contato: em vez de um aplicativo de mensagens, a conversa acontece dentro do site da sua empresa. *** ## Importante Saber Antes de configurar o canal, vale entender dois conceitos que definem o comportamento do Webchat: **como ele identifica quem está conversando** e **como ele aparece no seu site**. ### 1. Modo de pesquisa Assim como o WhatsApp usa o número de telefone para saber quem está do outro lado, o Webchat também precisa de uma **identificação única** para reconhecer o visitante. Essa identificação é o que garante: * a manutenção do histórico da conversa; * o reconhecimento do usuário que já falou com você; * que não sejam criados leads duplicados; * a continuidade do atendimento mesmo depois de atualizar a página. O campo **Modo de pesquisa**, na tela de configurações do canal, define qual desses comportamentos será usado. A seguir, falaremos sobre cada um dos modos disponíveis para a configuração do seu canal de Webchat na Hablla: #### 1.1. Modo de Pesquisa Automático Nesse modo, o seu Webchat gera automaticamente um ID para o visitante e o salva no **Local Storage** do navegador do usuário, isto é, a pessoa que envia uma mensagem para você através do Webchat dentro do seu site. Com isso, o usuário pode atualizar a página, sair e voltar depois, e a conversa continua normalmente. É o modo mais simples de se configurar e não exige nenhum desenvolvimento no seu site. {% hint style="danger" %} Se o Local Storage do navegador do usuário (a pessoa que entra em contato com você) for apagado, um novo ID será gerado. O sistema entenderá que se trata de outra pessoa e uma nova *person* poderá ser criada na Hablla. {% endhint %} #### 1.2. Modo de Pesquisa Manual Aqui é você quem define qual informação será usada como identificador do usuário que está se comunicando com você e onde essa informação será obtida. Por exemplo: * CPF * E-mail * ID interno do sistema * Matrícula * Código do usuário Nesse modo, você também deve definir qual será a **fonte de pesquisa**, isto é, **onde** o sistema buscará a informação que você definiu como identificador:
Fonte de pesquisaOnde o Webchat busca o identificador
Local StorageArmazenamento do navegador que permanece salvo mesmo depois de fechar a aba ou o navegador.
Session StorageArmazenamento temporário no navegador, utilizado durante a sessão do Webchat. Os dados permanecem disponíveis enquanto a sessão estiver ativa, respeitando o tempo de expiração configurado pelo sistema.
CookiesCookies gravados no navegador do usuário pelo seu próprio site.
CustomO próprio sistema do seu site envia o identificador para o Webchat, inicializando o sistema de mensageria com base no ID informado pelo seu sistema.
{% hint style="danger" %} Se a variável configurada não existir na fonte de pesquisa escolhida, **o widget NÃO carrega**. O funcionamento do Webchat passa a depender dessa informação estar disponível no navegador do usuário. {% endhint %} *** ### 2. Personalização visual A conexão de Webchat também permite personalizar a aparência do botão e da janela de atendimento, para que o canal fique alinhado à identidade visual do seu site. Dentre as opções disponíveis, você pode personalizar o Layout, a Tipografia e as Cores do seu Webchat. **Layout e Design** * Formato de exibição do chat * Posicionamento na tela (os quatro cantos) * Animação de entrada * Espaçamento vertical e horizontal * Altura e largura do chat e do botão * Imagem do chat e imagem do botão **Tipografia** * Fonte * Tamanho * Peso da fonte * Cor do texto da mensagem **Cores** * Modo Claro, Escuro ou Automático * Cabeçalho do chat em cor sólida ou degradê * Cor das mensagens do cliente * Cor do botão Enquanto você faz os ajustes, a plataforma exibe uma **pré-visualização em tempo real** no canto inferior direito da tela ou na posição que você escolheu para o widget ser carregado. Isso facilita, e muito, acertar os detalhes sem precisar publicar nada. {% hint style="info" %} A pré-visualização serve apenas para mostrar a aparência do widget. Ela **não realiza testes reais de envio e recebimento de mensagens**. {% endhint %} ## Boas práticas * Confirme que já exista um **setor** cadastrado antes de iniciar a criação da sua conexão de Webchat. * Use nomes descritivos nas conexões e credenciais, para facilitar a gestão quando houver mais de um Webchat. * Recomendamos o uso do modo de pesquisa no **modo Automático** quando não houver login no site; use **Manual** apenas quando existir um identificador confiável disponível na página. * Teste localmente antes de publicar o script no site em produção. *** {% hint style="info" %} **Observação:** Esta documentação aborda apenas o funcionamento da funcionalidade. Para informações sobre cobranças, custos ou condições comerciais, consulte o contrato vigente ou entre em contato com o setor responsável. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.hablla.com/hablla/configuracoes/conexoes-e-integracoes/webchat.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.