> 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/conecte-um-botao-flutuante-do-whatsapp-ao-seu-site.md).

# Conecte um botão flutuante do WhatsApp ao seu site

Além do Web Chat completo, a Vambe permite adicionar um botão flutuante do WhatsApp ao seu site: um ícone que aparece em um canto da página e que, ao clicar, leva o visitante diretamente para uma conversa no WhatsApp com o seu negócio. É uma alternativa mais leve ao Web Chat, pensada para negócios que querem dar acesso rápido ao WhatsApp sem instalar um chat completo na página.

{% hint style="info" %}
O botão flutuante não é a mesma coisa que o **Web Chat**: o botão redireciona para uma conversa no WhatsApp, enquanto o Web Chat abre o chat dentro do seu próprio site. Se o que você precisa é isso, confira [Como instalar e configurar o Web Chat da Vambe no seu site](https://academy.vambe.ai/canal/conexion-de-canales-de-vambe/como-instalar-y-configurar-el-web-chat-de-vambe-en-tu-sitio-web).
{% endhint %}

***

### Como gerar o script

1. Vá ao menu lateral e entre em **Canais**.
2. No seu canal de WhatsApp, clique nos três pontos à direita.
3. Selecione **Gerar script**.

Ali abre o seletor com dois tipos de botão: **Botão direto** e **Chat emergente**.

<figure><img src="https://3060493829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCFdmz6HrosBiYP1q1BJ6%2Fuploads%2FibZHJCDvFwv9SL9CKYfO%2Fimage.png?alt=media&amp;token=b7be2c4e-69c7-4074-86af-6d0e57bc3b7a" alt=""><figcaption></figcaption></figure>

***

### A diferença entre os dois tipos

Ambos aparecem como o mesmo ícone flutuante no seu site, mas muda o que acontece ao clicar:

* **Botão direto:** redireciona imediatamente para o WhatsApp. O visitante clica e o WhatsApp (web ou o app, dependendo do dispositivo) se abre com uma conversa já iniciada para o seu número, com uma mensagem predefinida carregada. Não há nenhuma etapa intermediária dentro da sua página.
* **Chat emergente:** ao clicar, abre-se uma pequena janela de chat dentro da mesma página —onde o visitante pode escrever sua mensagem— e só ao enviá-la ele é redirecionado para o WhatsApp com essa mensagem já escrita. Adiciona uma pequena etapa de atrito, mas dá ao visitante a oportunidade de personalizar o que vai perguntar antes de sair do seu site.

{% hint style="info" %}
**Na prática:** se você quer o caminho mais curto até a conversa, use **Botão direto**. Se preferir que o visitante pense e escreva sua consulta antes de ir para o WhatsApp —por exemplo, para que ela chegue com mais contexto—, use **Chat emergente**.
{% endhint %}

***

### Personalize o botão antes de copiar o script

Na mesma tela onde o código é gerado, você pode ajustar a mensagem inicial, a cor de fundo do botão, o tamanho do ícone e a posição na tela, com uma visualização ao vivo que reflete as mudanças. A Vambe gera o script já com o seu número de telefone e o seu identificador de cliente carregados —é só copiar.

Se você já tem o **Web Chat** da Vambe instalado na mesma página, ative a opção **Usar com Web Chat**: isso posiciona o botão do WhatsApp sobre o Web Chat, no canto inferior direito, para que não se sobreponham.

<figure><img src="https://3060493829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCFdmz6HrosBiYP1q1BJ6%2Fuploads%2FzM0GTIQb96v24zue9HlD%2Fimage.png?alt=media&amp;token=5c770629-42c5-48c5-8ab1-be7fd95d9d5f" alt=""><figcaption></figcaption></figure>

***

### Onde colar o script

O script vai no `<head>` da sua página, ou logo abaixo de onde essa tag se abre.

**Instalar no Shopify**

1. No painel do Shopify, vá para **Loja virtual → Ver código** (ao lado do tema ativo).

<figure><img src="https://3060493829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCFdmz6HrosBiYP1q1BJ6%2Fuploads%2F9uknLaOLJZHsfztjoJsO%2Fimage.png?alt=media&amp;token=1fc16493-bd33-428a-bc37-8079654f4fa8" alt=""><figcaption></figcaption></figure>

2. No explorador de arquivos, abra **Layout → theme.liquid**.
3. Cole o script logo abaixo da tag `<head>` —normalmente ela fica por volta da linha 40 do arquivo, embora possa variar conforme o tema.

<figure><img src="https://3060493829-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCFdmz6HrosBiYP1q1BJ6%2Fuploads%2FgftdWljfTfnIseRjt5md%2Fimage.png?alt=media&amp;token=4630e2b4-60b9-4b6d-879c-c36e399a2c54" alt=""><figcaption></figcaption></figure>

4. Salve as alterações.

Como `theme.liquid` é o layout que todas as páginas da sua loja usam, o botão fica instalado em todo o site com este único passo.

***

### Continue explorando

[Como instalar e configurar o Web Chat da Vambe no seu site](https://academy.vambe.ai/canal/conexion-de-canales-de-vambe/como-instalar-y-configurar-el-web-chat-de-vambe-en-tu-sitio-web).

***

### Em resumo

O botão flutuante do WhatsApp é uma forma leve de conectar seu site a uma conversa no WhatsApp, com duas variantes: **Botão direto**, que leva imediatamente ao WhatsApp, e **Chat emergente**, que abre primeiro uma janela dentro da sua página para que o visitante escreva sua mensagem antes de ir. Ele é gerado em **Canais → seu canal de WhatsApp → os três pontos → Gerar script**, e é instalado colando o código no `<head>` do seu site — no Shopify, dentro de **Loja virtual → Ver código → theme.liquid**.


---

# 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/conecte-um-botao-flutuante-do-whatsapp-ao-seu-site.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.