Botón flotante de WhatsApp para tu web
Configura, mira la vista previa y copia el código. HTML + CSS puros: no usa JavaScript ni scripts de terceros, y pesa menos de 2 KB.
Esto es el botón que lleva a tu WhatsApp. Si lo que querés es que tus visitantes armen su propio link sin salir de tu página, eso es el widget para tu sitio.
Dónde pegarlo en :
Dónde se pega el código, por plataforma
El código va siempre antes de </body>. Lo que cambia es el camino de menús en cada plataforma y lo que filtra cada plan. Los menús están verificados en la ayuda oficial de cada una; en la guía está el paso a paso con las fuentes.
| Plataforma | Dónde se pega | Ojo con |
|---|---|---|
| WordPress | Bloque «HTML personalizado». En una página: el editor. En todo el sitio: Apariencia → Editor (tema de bloques) o Apariencia → Widgets (tema clásico). | WordPress.com gratuito borra el <svg> al guardar: el círculo queda verde y sin ícono. Ahí conviene el botón inline con texto de la guía. |
| Shopify | Sin tocar código: una sección o bloque «Liquid personalizado» desde Personalizar. Para todo el sitio: Tienda online → Temas → ⋯ → Editar código → layout/theme.liquid, antes de </body>. | La sección «Liquid personalizado» vive solo en la página donde la agregás; para toda la tienda, theme.liquid. El checkout no se edita desde el tema. |
| Tiendanube | Primero el botón nativo: Configuración → Botón de WhatsApp. Para código propio: Tienda online → Diseño → Editar el código (FTP), en la plantilla Layout.tpl. «Códigos externos» NO es el lugar. | Si ya activaste el botón nativo, no pegues este: dos botones de WhatsApp confunden. |
| Wix | Panel de control → Ajustes → Código personalizado (Desarrollo e integraciones) → + Agregar código personalizado → Todas las páginas → Cuerpo - final. | «Código personalizado» exige el sitio publicado con dominio conectado (plan Premium o Wix Studio). En el plan gratuito no hay dónde pegarlo para todo el sitio. |
| HTML puro | En el archivo de cada página (o en la plantilla/pie compartido), justo antes de </body>. | — |
Guías relacionadas
- El botón de WhatsApp en tu web: dónde se pega en WordPress, Shopify, Tiendanube, Wix y HTML — Poner el botón en tu página web
- WhatsApp Business vs. WhatsApp normal — Elegir con qué app atender clientes
- «Mi link de WhatsApp no funciona» — Tu link ya está publicado y no abre el chat
- Todas las guías
Preguntas frecuentes
¿Cómo agrego el botón de WhatsApp a mi página web?
Copia el código que genera esta herramienta y pégalo antes del cierre de