# Como instalar e configurar o Web Chat da Vambe em seu site O **Web Chat da Vambe** permite integrar um chat direto na sua página web, conectando automaticamente os visitantes a um funil específico dentro da Vambe. Cada conversa iniciada pelo Web Chat entra diretamente no seu funil, permitindo gerenciar leads, conversas e tickets em um só lugar. Principais vantagens: * Solicitar dados do cliente antes de iniciar a conversa (e-mail, telefone, nome). * Conectar o chat a um funil específico. * Personalizar completamente a aparência e o comportamento do chat. * Facilitar o contato mesmo quando o cliente ainda não escreve manualmente. {% stepper %} {% step %} #### Criar o canal de Web Chat * Vá para o menu lateral esquerdo. * [Acesse Canais](https://academy.vambe.ai/v1/docs/c%C3%B3mo-ingresar-a-la-secci%C3%B3n-de-conexi%C3%B3n-de-canales). * Clique em **Web Chat**. ![](/files/27cdcffc327422295b4ec86078a8c0b52597d30a) * Crie um novo Web Chat atribuindo um nome a ele (por exemplo: *Página web*). * Opcionalmente, conecte-o a um canal, se desejar. * Clique em **Finalizar**. Depois de criado, o Web Chat aparecerá na lista de canais. ![](/files/44a7e3f1d01fe1b85b034786f82eda781a5de88e) {% endstep %} {% step %} #### Gerar o script de instalação * Na lista de Web Chat, clique nos **três pontos** do Web Chat criado. * Selecione **Gerar script**. Este script é o código que você deverá inserir na sua página web, no local onde quiser que o botão do chat apareça. ![](/files/bc378225dc413f277121913f9164591fc021bb29) {% endstep %} {% step %} #### Configurar o Web Chat Abaixo do script, você encontrará todas as opções de personalização. A seguir, cada uma delas é descrita. ![](/files/2cb165ff4cd6db18fe06ca9620222c3247b42280) **Informações do agente** * **Nome do agente** — Nome que o cliente verá como agente do chat. * **URL do avatar do agente** — URL da imagem do agente que será exibida no canto superior do chat. {% hint style="warning" %} A URL do avatar deve ser pública e apontar diretamente para a imagem. {% endhint %} **Solicitação de dados antes de abrir o chat** Você pode pedir informações ao cliente **antes que a conversa seja aberta**: * **Solicitar número de telefone** * **Solicitar e-mail** * **Solicitar nome** Se você ativar alguma dessas opções, o cliente deverá informar esses dados antes de iniciar o chat. **Aparência do Web Chat** * **Modo escuro** — Ativa o tema escuro. * **Cor primária / Cor secundária** — Define as cores do botão e do chat. Na parte inferior direita você verá uma **prévia em tempo real** do Web Chat. **Idioma e textos** * **Idioma** — Selecione o idioma do Web Chat. * **Texto "Fale conosco"** — Texto que aparecerá ao lado do botão para convidar o cliente a iniciar a conversa (exemplo: *Vamos conversar?* ou *Converse conosco*). **Posição do botão** * **Posição X** * **Posição Y** Permite ajustar a localização exata do botão dentro da sua página web. **Restrições por domínio (opcional)** * **Restringir por origem** — Permite definir a partir de qual URL o Web Chat pode ser carregado. * **Ativar rastreamento de URL** — Ativa o rastreamento da origem do contato. **Perguntas sugeridas** As **Perguntas sugeridas** permitem mostrar botões com mensagens predefinidas para que o cliente as envie com um único clique.\ Exemplos: * “Quero agendar um horário” * “Preciso de informações sobre preços” * “Falar com um executivo” {% endstep %} {% step %} #### Inserir o script no seu site 1. Copie o **script** que aparece na parte superior. 2. Cole-o no código do seu site, idealmente antes do fechamento da tag `` ou conforme indicado pelo seu CMS. 3. Publique as alterações no seu site. {% endstep %} {% step %} #### Verificar a conexão com um funil Certifique-se de que o Web Chat esteja **conectado a um funil** dentro da Vambe: * Isso garante que cada contato que iniciar uma conversa crie um ticket automaticamente, entre na etapa correta do funil e seja gerenciado corretamente por IA ou por agentes humanos. Mais informações: [Verificar a conexão com um funil](https://academy.vambe.ai/v1/docs/verificar-que-el-n%C3%BAmero-est%C3%A9-asociado-al-embudo-correcto) {% endstep %} {% endstepper %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://academy.vambe.ai/canal/canal-pt-br/conexao-de-canais-da-vambe/como-instalar-y-configurar-el-web-chat-de-vambe-en-tu-sitio-web.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.