> For the complete documentation index, see [llms.txt](https://academy.vambe.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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).

# Como instalar e configurar o Web Chat da Vambe em seu site

O Web Chat da Vambe permite integrar um chat flutuante diretamente em 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. Além disso, agora você conta com um editor completo que inclui um painel de pré-visualização ao vivo, onde cada alteração que você fizer na configuração do chat será refletida.

{% hint style="info" %}
O Web Chat não é o mesmo que o **botão flutuante do WhatsApp**: o Web Chat abre uma conversa dentro do seu próprio site, enquanto o botão flutuante redireciona o visitante para uma conversa no WhatsApp. Se o que você precisa é desse botão, confira [Conecte um botão flutuante do WhatsApp ao seu site](https://academy.vambe.ai/canal/conexion-de-canales-de-vambe/conecta-un-boton-de-whatsapp-flotante-a-tu-sitio-web).
{% endhint %}

**Vantagens principais:**

* 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, as seções e o comportamento do chat.
* Adicionar abas (tabs) adicionais com links, recursos e atalhos.
* Autenticar usuários de forma segura por meio de JWT.

**Criar o canal de Web Chat**

1. Vá ao menu lateral esquerdo e entre na seção de **Canais**.
2. Clique em **Adicionar canal**.
3. Selecione **Web Chat** e depois clique em **Conectar**.\ <br>

   <figure><img src="https://502444442-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCFdmz6HrosBiYP1q1BJ6%2Fuploads%2FYtuGnztUQmnDtKjRl8qy%2Fimage.png?alt=media&#x26;token=ee02d6c9-ef2e-48b1-af52-f44a2cfff4e3" alt=""><figcaption></figcaption></figure>

Será aberta a tela de configuração (**Configurando Webchat**), onde você poderá personalizar todo o comportamento e a aparência do chat. À direita você verá sempre o painel **Pré-visualizar as mudanças**, que mostra ao vivo cada ajuste que você fizer.

**Configuração principal**

**Nome do canal e funil**

* **Nome do canal** — O nome interno com o qual você identificará este Web Chat (por exemplo: Vambe web).
* **Funil** — Selecione o funil para onde irão todos os tickets gerados por este canal. Cada contato que iniciar uma conversa criará um ticket automaticamente e entrará na etapa correspondente do funil.

**Informações do assistente**

* **Nome do assistente IA** — Nome que o cliente verá na parte superior do Web Chat.
* **Idioma** — Selecione o idioma do Web Chat.
* **URL do ícone** — URL pública da imagem que será exibida como avatar do assistente. Ela deve apontar diretamente para a imagem.

**Solicitação de dados antes de abrir o chat**

Você pode pedir informações ao cliente antes de a conversa ser aberta:

* **Solicitar e-mail**
* **Solicitar telefone**
* **Solicitar nome**

Se você ativar uma ou mais destas opções, o cliente deverá preencher esses dados antes de poder abrir o Web Chat e iniciar a conversa.

**Aparência**

* **Cores** — Defina a cor primária e secundária do botão e do chat.
* **Tema** — Escolha como o chat será exibido entre **Modo claro** e **Modo escuro**.

<figure><img src="https://502444442-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCFdmz6HrosBiYP1q1BJ6%2Fuploads%2FlCLXC7QjHdiR18PRTLGj%2Fimage.png?alt=media&#x26;token=b2fb7e48-eb9e-41d2-a4e4-d6a22e1c481f" alt=""><figcaption></figcaption></figure>

**Opções avançadas**

Expanda a seção **Avançado** para acessar configurações adicionais de posição, fonte, restrições e autenticação.

**Posição do botão**

* **Posição X do botão** — Distância em px do botão até a borda lateral.
* **Posição Y do botão** — Distância em px do botão até a borda inferior.

**Fonte**

* **Fonte** — Font-family CSS do webchat. Se você deixar em branco, será usada a fonte do seu site. Útil quando seu site não define uma fonte e acaba herdando a do navegador (Times).

**Restrições e rastreamento**

* **Restringir por origem** — O webchat só funcionará no domínio que você informar. Ao ativá-lo, o campo **Domínio permitido**.
* **URL de rastreamento** — Registra a URL da página onde o webchat está incorporado.
* **Mostrar último ticket fechado** — Ao abrir o webchat, mostra o último ticket fechado do contato quando ele não tiver um ativo.
* **Mostrar tempo de resposta** — Mostra ao visitante o tempo estimado de primeira resposta conforme seu SLA.

<details>

<summary><strong>Autenticar usuários com JWT (configuração técnica)</strong></summary>

{% hint style="info" %}
**Observação:** Esta seção é mais técnica e foi pensada para clientes com uma equipe de desenvolvimento. Se você não precisa validar a identidade dos seus usuários, pode ignorá-la.
{% endhint %}

Por padrão, o Web Chat pode identificar um usuário por meio de um `externalUserId` enviado no script. No entanto, expor esse ID diretamente no script pode representar um risco de segurança, já que qualquer pessoa poderia manipulá-lo.

Para resolver isso, a opção **Autenticar usuários com JWT** permite que, em vez de enviar o `externalUserId` em texto plano, seu site envie um **token assinado**. A Vambe valida esse token com um secret compartilhado e confirma que a identidade do usuário é legítima.

**Como funciona:**

1. Ative a opção **Autenticar usuários com JWT**.
2. **JWT Secret** — Configure aqui um secret (uma chave). Esse mesmo secret deve ser usado no seu site para assinar o token de autenticação.
3. Seu site assina o token com esse secret e o envia para a Vambe no lugar do `externalUserId`.
4. Quando o token chega à Vambe, validamos se a assinatura corresponde ao secret configurado. Se a assinatura for válida, o usuário é autenticado e o Web Chat é carregado. Se o token estiver assinado com um secret diferente, a validação falha e a sessão não é carregada.

**Campo do ID do usuário no token**

Defina o nome do campo dentro do token assinado onde está o ID do usuário. Isso é configurável porque depende de como as informações estão estruturadas no token a partir do seu site (pode vir como `sub`, `userId`, etc.).

Por exemplo, se o seu token tiver esta estrutura, você deve inserir `sub`:

json

```json
{
  "sub": "user-123",
  "name": "Ada Lovelace",
  "iat": 1716239022
}
```

Nesse caso, o ID do usuário (`user-123`) vem no campo `sub`.

**Como enviar o token a partir do seu site**

Gere o token no seu servidor, assinado com o mesmo secret que você configurou na Vambe. Depois, adicione-o ao script como `userToken`:

```html
<script>
window.embeddedWebchatConfig = {
  clientId: "SEU_CLIENT_ID",
  channelId: "SEU_CHANNEL_ID",
  userToken: "TOKEN_ASSINADO_PELO_SEU_SERVIDOR"
};
</script>
<script src="https://vambeai.com/webchat.js"></script>
```

O Webchat não será carregado se o token não vier no script, se a assinatura não corresponder ao secret, se ele já tiver expirado ou se não contiver o campo de ID configurado.

</details>

**Seções do Web Chat**

<figure><img src="https://502444442-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCFdmz6HrosBiYP1q1BJ6%2Fuploads%2Fy8iBaF2GJVBlf1PMw6nX%2Fimage.png?alt=media&#x26;token=3735a25f-4b3b-461a-aec0-38a556f1ff5a" alt=""><figcaption></figcaption></figure>

As **Seções** são as abas (tabs) que o cliente verá na parte inferior do Web Chat. Você pode adicionar **até quatro tabs**. A aba de **Chat** vem por padrão; se você deixar apenas essa, o webchat é exibido diretamente com a tela de conversa.

Além de Chat, você pode criar tabs personalizadas para mostrar diferentes recursos, links e atalhos conforme o que precisar (por exemplo, uma de conhecimento, uma de suporte etc.). As tabs e os blocos podem ser reordenados arrastando-os.

Para cada seção você pode configurar:

* **Rótulo** — Nome da aba.
* **Ícone** — Ícone que a representa.
* **Título** e **Subtítulo** — Textos de cabeçalho da seção.
* **Blocos** — Os elementos que aparecem no corpo da seção.

**Tipos de blocos**

Dentro de cada seção você pode adicionar diferentes blocos para montar o conteúdo:

* **Texto** — Um bloco de texto simples (por exemplo, um título de grupo como "Recursos").
* **Link** — Um link para uma URL externa, com seu próprio ícone.
* **Acesso rápido** — Um atalho que leva para outra aba do Web Chat.
* **CTA do Chat** — Um atalho para a tela de chat.
* **Buscador de artigos** — Um buscador que permite encontrar artigos.
* **Artigos sugeridos** — Mostra artigos sugeridos. Hoje funcionam como links (são configurados com uma URL); no futuro poderão ser exibidos dentro do próprio Web Chat sem redirecionar para uma página externa.

Cada bloco permite escolher seu ícone, ocupar toda a largura e ajustar sua ordem. O painel de pré-visualização mostra ao vivo como cada bloco ficará.

<figure><img src="https://502444442-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCFdmz6HrosBiYP1q1BJ6%2Fuploads%2FK36kFHgwuakAnRTBdhap%2Fimage.png?alt=media&#x26;token=406d8507-ff2d-4df1-abef-0e14ca9d9c4d" alt=""><figcaption></figcaption></figure>

**Gerar e inserir o script no seu site**

Depois de configurar o Web Chat, vá para a tela de **Conectar** para obter o script de instalação.

1. Copie o script que aparece nessa tela.
2. Cole-o no código do seu site, idealmente antes do fechamento da tag `<body>` ou conforme indicado pelo seu CMS.
3. Publique as mudanças no seu site.

Com o novo formato, o script só precisa do **Client ID** e do **Channel ID**; o restante da configuração (cores, seções, textos etc.) é trazido automaticamente da Vambe.

> **Importante:** Qualquer valor que você digitar manualmente no script substituirá a configuração salva na Vambe. Por exemplo, se você definir cores no script, essas cores terão prioridade sobre as configuradas no editor.

**Instalá-lo no Shopify**

Se o seu site estiver no Shopify, você pode instalar o script diretamente pelo editor de tema, sem precisar de um app externo.

1. No painel do Shopify, vá para **Loja virtual → Ver código** (ao lado do tema ativo).
2. Dentro do explorador de arquivos, abra **Layout → theme.liquid**.
3. Cole o script que você copiou da Vambe dentro do `<head>` do arquivo.
4. Salve as mudanças.

Como `theme.liquid` é o layout usado por todas as páginas da sua loja (home, produtos, coleções, blog, carrinho), o Web Chat fica instalado em todo o site com esse único passo.

Você pode ver mais detalhes aqui: <https://academy.vambe.ai/canal/conexion-de-canales-de-vambe/conecta-un-boton-de-whatsapp-flotante-a-tu-sitio-web>

**Verificar a conexão com o funil**

Antes de terminar, certifique-se de que o Web Chat esteja conectado ao funil correto dentro da Vambe. Isso garante que cada contato que iniciar uma conversa:

* Crie um ticket automaticamente.
* Entre na etapa correta do funil.
* Seja gerenciado corretamente por IA ou por Executivos.

Depois de verificar, clique em **Criar** para deixar o canal ativo.

{% hint style="info" %}
**Antes de encerrar a configuração, faça um teste real:** abra o Web Chat no seu site publicado, inicie uma conversa de teste e confirme na Vambe que o ticket entrou no funil e na etapa que você esperava. É a forma mais rápida de detectar um funil selecionado incorretamente antes que o primeiro visitante real chegue.
{% endhint %}

Mais informações: [Verificar a conexão com um funil](https://academy.vambe.ai/canal/conexion-de-canales-de-vambe/verificar-que-el-numero-este-asociado-al-embudo-correcto)


---

# 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://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=<question>&goal=<user_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.