> 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/conexion-de-canales-de-vambe/conecta-un-boton-de-whatsapp-flotante-a-tu-sitio-web.md).

# Conecta un botón de WhatsApp flotante a tu sitio web

Además del Web Chat completo, Vambe te permite agregar un botón flotante de WhatsApp a tu sitio: un ícono que aparece en una esquina de la página y que, al hacer clic, lleva al visitante directo a una conversación de WhatsApp con tu negocio. Es una alternativa más liviana al Web Chat, pensada para negocios que quieren dar acceso rápido a WhatsApp sin instalar un chat completo en la página.

{% hint style="info" %}
El botón flotante no es lo mismo que el **Web Chat**: el botón redirige a una conversación de WhatsApp, mientras que el Web Chat abre el chat dentro de tu propio sitio. Si lo que necesitas es eso, revisa [Cómo instalar y configurar el Web Chat de Vambe en tu sitio web](https://academy.vambe.ai/canal/conexion-de-canales-de-vambe/como-instalar-y-configurar-el-web-chat-de-vambe-en-tu-sitio-web).
{% endhint %}

***

### Cómo generar el script

1. Ve al menú lateral y entra a **Canales**.
2. En tu canal de WhatsApp, haz clic en los tres puntos a la derecha.
3. Selecciona **Generar script**.

Ahí se abre el selector con dos tipos de botón: **Botón directo** y **Chat emergente**.

<figure><img src="https://502444442-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>

***

### La diferencia entre los dos tipos

Ambos aparecen como el mismo ícono flotante en tu sitio, pero cambia lo que pasa al hacer clic:

* **Botón directo:** redirige de inmediato a WhatsApp. El visitante hace clic y se abre WhatsApp (web o la app, según el dispositivo) con una conversación ya iniciada hacia tu número, con un mensaje predefinido cargado. No hay ningún paso intermedio dentro de tu página.
* **Chat emergente:** al hacer clic, se despliega una pequeña ventana de chat dentro de la misma página —donde el visitante puede escribir su mensaje— y recién al enviarlo se lo redirige a WhatsApp con ese mensaje ya escrito. Agrega un paso de fricción menor, pero le da al visitante la oportunidad de personalizar lo que va a preguntar antes de salir de tu sitio.

{% hint style="info" %}
**En la práctica:** si quieres el camino más corto a la conversación, usa **Botón directo**. Si prefieres que el visitante piense y escriba su consulta antes de saltar a WhatsApp —por ejemplo, para que llegue con más contexto—, usa **Chat emergente**.
{% endhint %}

***

### Personaliza el botón antes de copiar el script

Desde la misma vista donde se genera el código puedes ajustar el mensaje inicial, el color de fondo del botón, el tamaño del ícono y su posición en la pantalla, con un preview en vivo que refleja los cambios. Vambe genera el script ya con tu número de teléfono y tu identificador de cliente cargados —solo tienes que copiarlo.

Si ya tienes el **Web Chat** de Vambe instalado en la misma página, activa la opción **Usar con webchat**: esto ubica el botón de WhatsApp sobre el Web Chat, abajo a la derecha, para que no se superpongan.

<figure><img src="https://502444442-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>

***

### Dónde pegar el script

El script va en el `<head>` de tu página, o justo debajo de donde abre esa etiqueta.

**Instalarlo en Shopify**

1. Desde tu panel de Shopify, ve a **Tienda online → Ver código** (junto al tema activo).

<figure><img src="https://502444442-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. Dentro del explorador de archivos, abre **Layout → theme.liquid**.
3. Pega el script justo debajo de la etiqueta `<head>` —normalmente se encuentra alrededor de la línea 40 del archivo, aunque puede variar según el tema.

<figure><img src="https://502444442-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. Guarda los cambios.

Como `theme.liquid` es el layout que usan todas las páginas de tu tienda, el botón queda instalado en todo el sitio con este único paso.

***

### Sigue explorando

[Cómo instalar y configurar el Web Chat de Vambe en tu sitio web](https://academy.vambe.ai/canal/conexion-de-canales-de-vambe/como-instalar-y-configurar-el-web-chat-de-vambe-en-tu-sitio-web).

***

### En resumen

El botón flotante de WhatsApp es una forma liviana de conectar tu sitio a una conversación de WhatsApp, con dos variantes: **Botón directo**, que lleva de inmediato a WhatsApp, y **Chat emergente**, que abre primero una ventana dentro de tu página para que el visitante escriba su mensaje antes de saltar. Se genera desde **Canales → tu canal de WhatsApp → los tres puntos → Generar script**, y se instala pegando el código en el `<head>` de tu sitio —en Shopify, dentro de **Tienda online → 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/conexion-de-canales-de-vambe/conecta-un-boton-de-whatsapp-flotante-a-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.