Widget de WhatsApp para tu sitio web

Arma tu burbuja flotante de WhatsApp, míralo cambiar en vivo y copia el código. Gratis, sin registro, y se pega igual en tu sitio o en el de tu cliente.

Tu número de WhatsApp

Cómo se ve

Copia y pega

Pega este código justo antes de la etiqueta de cierre </body> del sitio. Funciona igual en un sitio propio o en el de un cliente.

No pedimos registro ni correo. El código se arma en tu navegador y es tuyo.

Cómo agregar un botón de WhatsApp a tu sitio web

Agregar un botón de WhatsApp flotante a tu sitio web es simple: solo necesitas copiar y pegar un pequeño script HTML antes del cierre de </body> de tu página. Este widget de chat aparece automáticamente en todas tus páginas y permite que tus visitantes te escriban directamente por WhatsApp con un solo clic.

Widget de chat flotante de WhatsApp en HTML

Nuestro widget de WhatsApp flotante está construido con HTML, CSS y JavaScript puro, lo que significa que funciona en cualquier plataforma: WordPress, Shopify, Wix, Webflow o HTML estático. No requiere plugins ni configuración compleja: solo inserta el código y listo.

Alternativa de chat en vivo mejor que WhatsApp

A diferencia de los chats en vivo tradicionales que desaparecen cuando el usuario abandona tu sitio, WhatsApp mantiene la conversación abierta. Esto significa que puedes continuar vendiendo, respondiendo preguntas o enviando información incluso después de que el visitante salga de tu página web.

Plugin de chat para Shopify, WordPress, Wix y Webflow

Nuestro widget de WhatsApp funciona como un plugin universal: compatible con Shopify, WordPress, Wix, Webflow y cualquier constructor de sitios web. No necesitas instalar plugins adicionales ni preocuparte por compatibilidad: el código funciona en cualquier plataforma que permita insertar HTML personalizado.

Cómo instalar el widget en tu plataforma

WordPress

1. En tu panel de WordPress, ve a "Apariencia" > "Editor de temas" 2. Selecciona "footer.php" en el menú lateral 3. Pega el script justo antes de la etiqueta </body> 4. Guarda los cambios Alternativa: usa un plugin como "Insert Headers and Footers" y pega el código en el campo de "Footer", sin editar archivos.

Shopify

1. Ve a tu panel de administración de Shopify 2. Navega a "Configuración" > "Temas" 3. Haz clic en "Acciones" > "Editar código" 4. En el menú lateral, selecciona "theme.liquid" 5. Pega el script justo antes de la etiqueta </body> 6. Guarda los cambios

Wix

1. En el Editor de Wix, haz clic en "Configuración" (⚙️) en la barra superior 2. Selecciona "Configuración avanzada" > "Código personalizado" 3. Haz clic en "+ Agregar código" > "Inyectar código" 4. Pega el script en el campo de código 5. En "Colocar código en", elige "Body - final" 6. Guarda y publica tu sitio

Webflow

1. Abre tu proyecto en Webflow 2. Ve a "Configuración del proyecto" > "Personalizar código" 3. En "Código del sitio" > "Footer code", pega el script 4. Publica tu sitio para ver los cambios

HTML plano

1. Abre el archivo de tu página, por ejemplo index.html 2. Baja hasta el final del documento y busca la etiqueta </body> 3. Pega el script justo antes de esa etiqueta 4. Sube el archivo a tu servidor Si tu sitio tiene varias páginas, repite el paso en la plantilla que comparten todas.

Preguntas frecuentes sobre el widget de WhatsApp

¿Qué es el widget de WhatsApp?

Es una burbuja flotante que se muestra en tu sitio web y permite que tus visitantes te escriban directamente por WhatsApp con un solo clic. No necesitan agregar tu número ni llenar formularios: la conversación inicia de inmediato.

¿Cómo se instala el widget en mi sitio web?

Escribe tu número en esta misma página, ajusta los textos y el color, y copia el código que aparece abajo. Pégalo justo antes de la etiqueta de cierre </body> de tu página web y guarda. Una vez instalado, la burbuja aparecerá automáticamente en todas tus páginas sin necesidad de configuraciones adicionales.

¿Es gratis? ¿Tengo que registrarme?

El generador es gratis y no pide registro, correo ni tarjeta. El código se arma en tu navegador mientras escribes y puedes copiarlo cuantas veces quieras. Tampoco necesitas una cuenta de TBit para usarlo: solo un número de WhatsApp activo.

¿Puedo instalarlo en el sitio de un cliente?

Sí, es el caso para el que está pensado. Escribe el número de WhatsApp de tu cliente, ajusta el nombre de la marca, el color y los textos hasta que la vista previa se parezca a su sitio, copia el código y pégalo en su plantilla. Puedes repetirlo con tantos clientes como quieras: cada código es independiente y no queda atado a ninguna cuenta.

¿Puedo personalizar el logo o el mensaje de bienvenida?

Sí. Puedes agregar el logo de tu empresa para que aparezca junto a la burbuja y definir el mensaje de bienvenida que verán tus visitantes, como por ejemplo: "¡Hola! ¿Quieres más información sobre nuestros productos?" Esto te permite mantener la identidad visual de tu marca y ofrecer una experiencia coherente desde el primer contacto.

¿Por qué agregar una burbuja de WhatsApp en mi web?

Porque convierte visitantes en conversaciones reales. Los usuarios confían más en WhatsApp que en formularios o correos. Al ofrecer un canal directo, aumentas tus oportunidades de venta, respondes más rápido y creas una comunicación más cercana con tus clientes.

¿En qué se diferencia de un live chat tradicional?

A diferencia de un chat en vivo que desaparece cuando el visitante sale de la página, WhatsApp mantiene la conversación abierta incluso después. Esto te permite continuar la charla, enviar información o concretar una venta sin perder el contacto con el cliente.

¿El widget es seguro?

Sí. Toda la comunicación ocurre directamente dentro de WhatsApp, por lo que la información está protegida por el cifrado de la plataforma. TBit no almacena tus mensajes ni tus conversaciones. El código se genera en tu navegador con los datos que escribes en esta página.

¿Funciona en cualquier página o país?

Sí. El widget funciona en cualquier sitio web que permita insertar código HTML y en todos los navegadores modernos. Solo necesitas una cuenta activa de WhatsApp Business o personal.

  • Inicio
  • Precios
  • Blog
  • Documentación