> 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/como-criar-sua-conexao-de-webchat.md). # Como criar sua conexão de Webchat Passo a passo para criar a conexão de Webchat na Hablla: nova conexão, configurações adicionais e ativação do script de integração no seu site. Para criar a sua conexão de Webchat, vamos dividir esse guia prático em três passos: a criação da conexão, o ajuste das configurações adicionais do canal e, por último, a ativação do Webchat no seu site. {% stepper %} {% step %} ## 1. Criando a conexão **1.1.** Para criar a sua conexão, você precisa acessar as configurações do seu workspace clicando em **Configurações** (o ícone de engrenagem) no canto superior direito da sua tela. **1.2.** Acesse a aba de conexões, no menu lateral esquerdo, localizando e clicando na opção **Conexões e Integrações** **1.3.** Localize o card correspondente ao **Web Chat** e clique sobre o botão: **+ Adicionar**

**1.4.** Na tela de **Nova Conexão**, preencha os campos de **Nome** que define como a conexão será identificada dentro da Hablla e o **Setor** que define para qual setor os atendimentos desse canal serão direcionados. **1.5.** Após realizar essas configurações, podemos salvar as configurações criadas, clicando no botão **Criar conexão**

{% hint style="info" %} O setor precisa existir antes de criar a conexão. Se a área desejada ainda não estiver cadastrada, crie o setor na Hablla antes de iniciar o processo. {% endhint %} {% endstep %} {% step %} ## 2. Configurações adicionais Agora que a sua conexão já está criada, podemos avançar para as configurações adicionais do seu Webchat. É nessa seção que você encontra o script de integração (o código que ativa o Webchat no seu site) e também faz todos os ajustes visuais do canal. A seguir, explicamos cada uma das opções disponíveis. ### **2.1. Script de Integração** No topo dessa seção, fica armazenado o script que ativa o Webchat no seu site. Para ativar o seu Webchat, basta copiar o código e colar o trecho no seu site. A recomendação para ativação é inserir o código copiado **após a abertura da tag** **``**. O próprio script utiliza carregamento assíncrono, o que reduz o impacto na performance da página ou site. {% hint style="warning" %} **Exceção:** se o seu sistema precisa utilizar funções como **`setManualId`** logo no início, o script pode precisar ser carregado antes, principalmente em sistemas onde o login acontece na abertura da página. {% endhint %}

{% hint style="info" %} Clique na **seta para baixo** ao lado do texto "**copiar código**" para exibir o código de integração gerado e para alterar o modo de pesquisa do seu Webchat. {% endhint %} ### **2.2. Identificação do Canal** Aqui você define como o canal será identificado e para quem os atendimentos serão direcionados:

Nome do Campo	O que faz
Nome do Canal	Nome exibido nas conexões de Webchat
Setor	Equipe responsável pelos atendimentos.
Horário Comercial	Define a faixa de horário que o canal estará disponível.

### 2.3. Informações de Entrada Nessa seção, você configura as mensagens que aparecem quando o widget do seu Webchat é carregado na sua página ou site:

Nome do campo	O que essa configuração faz
Mensagem de boas-vindas	Exibida flutuando ao lado do botão quando o balão é carregado no site.
Mensagem abaixo do nome (Quando online)	A mensagem exibida quando estiverem dentro do horário comercial configurado.
Mensagem abaixo do nome (Quando offline)	A mensagem exibida quando estiverem fora do horário comercial configurado.

{% hint style="info" %} Caso seu usuário (seu cliente no seu site ou página) receba uma mensagem e o widget da conversa esteja fechado, a mensagem recebida aparecerá flutuando ao lado do widget. {% endhint %} ### 2.4. Layout e Design Nessa etapa, você ajusta visualmente o seu Webchat para personalizar a forma como ele será exibido em sua página ou site, deixando o canal alinhado à identidade visual da sua marca. Para conferir em detalhe todas as opções de personalização disponíveis, acesse a seção [Personalização visual](https://docs.hablla.com/hablla/configuracoes/conexoes-e-integracoes/webchat/pages/CbHluN1FmTvuUyplLS74#id-2.-personalizacao-visual). {% hint style="info" %} Enquanto você faz as alterações de layout e design, um preview em tempo real é exibido no canto inferior direito da sua tela ou na posição que você escolheu para o widget, para que você acompanhe suas edições. {% endhint %}

{% endstep %} {% step %} ## **3. Ativar webchat no seu site** Após finalizar as configurações do seu Webchat, agora precisamos apenas ativá-lo em seu site ou página web. Para que o Webchat passe a ser exibido, basta inserir o código obtido no **Script de Integração** após o início da tag **``** do seu site e aguardar o tempo de propagação. Caso você não tenha acesso ou não consiga editar o código fonte do seu site, você pode solicitar o apoio de pessoal qualificado e com os devidos acessos para realizar esta configuração. {% endstep %} {% endstepper %} --- # 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/como-criar-sua-conexao-de-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.