> 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/vambe-ads/vambe-ads-pt-br/configuracao-das-plataformas/script-del-boton-de-whatsapp-que-hace-y-como-validarlo-con-tu-equipo-de-seguridad.md).

# Script do botão do WhatsApp: o que faz e como validá-lo com sua equipe de segurança

Muitos clientes adicionam ao seu site um botão flutuante que direciona diretamente para uma conversa no WhatsApp. Este artigo documenta em detalhes o script que gera esse botão, pensado para que sua equipe de segurança ou TI possa validar a instalação antes de aprová-la.

{% hint style="info" %}
Se o que você precisa é o script de atribuição de campanhas publicitárias (aquele obtido em Workspaces para medir de qual anúncio veio cada contato), consulte os artigos de configuração do Google Ads, Meta Ads ou TikTok nesta mesma seção. Trata-se de um script diferente, com um propósito diferente.
{% endhint %}

***

## O que é este script

O script adiciona um botão flutuante do WhatsApp ao seu site. Ao clicar, o visitante é direcionado para uma conversa no WhatsApp com o número que você configurar, passando por um redirect da Vambe que permite atribuir a origem do contato.

| Característica | Detalhe                                                        |
| -------------- | -------------------------------------------------------------- |
| URL do script  | `https://vambeai.com/whatsapp.js`                              |
| Tamanho        | \~10 KB                                                        |
| Tecnologia     | JavaScript puro, sem dependências nem bibliotecas de terceiros |
| Entrega        | HTTPS, hospedado na infraestrutura da Vambe                    |
| Carregamento   | Com o atributo `defer`, não bloqueia o renderização da página  |

***

## Instalação

{% code title="Instalação do botão" %}

```html
<script src="https://vambeai.com/whatsapp.js" defer></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    if (typeof window.createWhatsAppButton === "function") {
      window.createWhatsAppButton({
        phoneNumber: "569XXXXXXXX",
        message: "Olá, quero mais informações",
        backgroundColor: "#25D366",
        position: "bottom-right",
        size: 50,
        useWithWebChat: false,
        clientId: "<UUID fornecido pela Vambe>"
      });
    }
  });
</script>
```

{% endcode %}

O script expõe duas funções: `window.createWhatsAppButton`, para o botão simples, e `window.createWhatsAppChatButton`, para a variante com janela de chat. Nenhuma é executada automaticamente; seu site decide quando e com qual configuração invocá-las.

***

## O que exatamente ele faz

Ao ser invocado, o script:

1. Injeta um elemento `<style>` com seus próprios estilos (com prefixo `vambe-`, para não interferir com os estilos do seu site).
2. Cria o elemento do botão e o adiciona ao `<body>`.
3. Renderiza o ícone do WhatsApp como um SVG incluído no próprio script.

A única solicitação de rede durante o carregamento da página é o download do arquivo `whatsapp.js`.

{% hint style="info" %}
Este script não realiza chamadas de rede adicionais, não carrega recursos externos, não cria nem lê cookies, `localStorage` ou `sessionStorage`, não lê o conteúdo da página nem de seus formulários, e não modifica o DOM existente além de adicionar seus próprios elementos. Também não registra listeners de teclado, mouse ou navegação além do clique em seu próprio botão.
{% endhint %}

***

## Comportamento ao clicar

O botão é um link padrão (`target="_blank"`, `rel="noopener noreferrer"`). Ao clicar, o navegador abre:

```
https://api.vambe.ai/api/redirect/website/to-whatsapp?phoneTo=<número>&message=<mensagem>&clientId=<uuid>
```

Esse endpoint registra o clique para atribuição e responde com um redirect (HTTP 302) para `https://api.whatsapp.com/send`, que abre o WhatsApp com a mensagem pré-carregada.

{% hint style="warning" %}
O endpoint tem um limite de 50 solicitações por minuto por IP. Se o parâmetro `clientId` não estiver presente, o link é gerado diretamente para `api.whatsapp.com`, sem passar pela Vambe e sem atribuição.
{% endhint %}

***

## Dados capturados

O script não captura dados no navegador. A atribuição ocorre integralmente do lado do servidor, no momento do redirect, e se limita a metadados padrão da solicitação HTTP:

| Dado                                                          | Origem                                        |
| ------------------------------------------------------------- | --------------------------------------------- |
| `clientId` (identificador da sua conta Vambe)                 | Parâmetro do link                             |
| Número de WhatsApp de destino e mensagem pré-carregada        | Parâmetros do link                            |
| Parâmetros UTM ou identificadores de campanha (`utm_*`, etc.) | Somente se estiverem presentes na URL         |
| User-Agent                                                    | Header HTTP padrão                            |
| Endereço IP                                                   | Conexão HTTP                                  |
| URL de origem ou referrer                                     | Headers HTTP padrão, se o navegador os enviar |

Adicionalmente, o servidor insere um código de tracking de 8 dígitos na mensagem pré-carregada, usando caracteres Unicode de largura zero (invisíveis para o usuário), que permite associar a conversa do WhatsApp resultante ao clique de origem. Esse código não contém informações pessoais.

Não são capturados dados pessoais do visitante, conteúdo da página, cookies nem identificadores de dispositivo.

***

## Domínios e Content Security Policy

| Domínio            | Uso                                             | Tipo                                 |
| ------------------ | ----------------------------------------------- | ------------------------------------ |
| `vambeai.com`      | Download do script                              | Recurso (`script-src`)               |
| `api.vambe.ai`     | Redirect de atribuição ao clicar                | Navegação (não requer `connect-src`) |
| `api.whatsapp.com` | Destino final (WhatsApp / Meta)                 | Navegação                            |
| `vambe.ai`         | Link "Powered by Vambe" (somente variante chat) | Navegação                            |

Se o seu site utiliza Content Security Policy:

* `script-src`: adicione `https://vambeai.com`.
* `style-src`: o script injeta um elemento `<style>`, portanto requer `'unsafe-inline'` (ou um nonce, se o seu site o gerenciar).
* Não são necessárias regras adicionais de `connect-src`, `img-src`, `font-src` nem `frame-src`, já que o script não faz chamadas de rede nem carrega recursos externos.

Outros requisitos: o site pode estar servido por HTTP ou HTTPS (recomenda-se HTTPS), funciona em qualquer navegador moderno e não requer frameworks nem configuração adicional do lado do servidor.

***

## Modos de falha

* **Se `vambeai.com` estiver bloqueado ou o script não carregar**, o site não é afetado: o snippet de instalação verifica se `window.createWhatsAppButton` existe antes de invocá-lo, portanto o botão simplesmente não é exibido.
* **Se `api.vambe.ai` não responder ao clicar**, o visitante vê um erro de navegação na nova aba; a página original não é afetada.
* O script não possui mecanismos de autoatualização nem executa código remoto adicional: o que está publicado em `vambeai.com/whatsapp.js` é a totalidade do código que é executado.

***

## Em resumo

O script do botão do WhatsApp é um componente limitado e de baixo risco: não lê dados do site, não usa armazenamento do navegador e sua única função é abrir uma conversa no WhatsApp ao clicar, com a atribuição resolvida do lado do servidor. Este artigo pode ser compartilhado diretamente com sua equipe de segurança ou TI para agilizar a validação da instalação.


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://academy.vambe.ai/vambe-ads/vambe-ads-pt-br/configuracao-das-plataformas/script-del-boton-de-whatsapp-que-hace-y-como-validarlo-con-tu-equipo-de-seguridad.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
