Saltar al contenido
Hola Pedido

Botón de WhatsApp para tu página web

Un botón de WhatsApp para web es un enlace flotante que se queda en una esquina de tu página y abre el chat de tu negocio con un toque. Hola Pedido Pro genera el código HTML y CSS con tu color, tu texto y la posición que elijas, sin plugins, sin scripts externos y sin rastreo.

Probar 3 días gratisVer precio

MXN 120/mes o USD 7/mes. Anual: MXN 1,200 o USD 70, en un solo pago por 12 meses. 3 días de prueba gratis con tarjeta para negocios nuevos; cobro automático al terminar salvo cancelación.

<!-- Hola Pedido Pro: paste once, before </body>. No external scripts or trackers. -->
<style>
.sa-wa-widget{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:9999;display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:calc(100vw - 40px);box-sizing:border-box;padding:14px 20px;border:0;border-radius:999px;background:#0f7a45;color:#ffffff;font:600 16px/1.3 system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 24px #0002}
.sa-wa-widget svg{width:24px;height:24px;flex-shrink:0}.sa-wa-widget span{min-width:0;overflow-wrap:anywhere}.sa-wa-widget:focus-visible{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:no-preference){.sa-wa-widget{transition:transform .2s ease,box-shadow .2s ease}.sa-wa-widget:hover{transform:translateY(-2px);box-shadow:0 9px 28px #0003}}
</style>
<a class="sa-wa-widget" href="https://wa.me/525518713940?text=Hola%2C%20tengo%20una%20pregunta." target="_blank" rel="noopener noreferrer" aria-label="Escríbenos por WhatsApp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 21l1.6-5.2A8.5 8.5 0 1 1 21 11.5Z M10 14l4-4 M10 10h4v4"/></svg>
<span>Escríbenos por WhatsApp</span>
</a>
Así se ve el botón en una página y el código que pegas en tu sitio. El enlace es de ejemplo.

Cómo poner un botón de WhatsApp en tu web

  1. Elige el texto y el color

    Escribe el texto del botón, de hasta 40 caracteres, o muestra solo el ícono. El color del texto se ajusta para mantener el contraste.

  2. Elige la posición

    Esquina inferior izquierda o derecha. El botón respeta los bordes seguros de los teléfonos con muesca.

  3. Copia el código

    Copia el bloque de HTML y CSS. No carga archivos de otros servidores ni instala cookies.

  4. Pégalo en tu sitio

    Pégalo una sola vez antes de la etiqueta </body>. Funciona en WordPress, Shopify, Wix, Tiendanube o una página hecha a mano.

Plugin de WhatsApp o código propio

Muchos plugins cargan scripts de terceros que hacen más lenta tu página y pueden rastrear a tus visitantes.

Desliza para ver todas las columnas. Con teclado, enfoca la tabla y usa las flechas.

Plugin de WhatsApp o código propio
CaracterísticaPlugin típicoBotón de Hola Pedido
Scripts externosSuele cargarlosNinguno
Rastreo o cookiesFrecuenteNinguno
Funciona en cualquier plataformaSolo la del pluginSí
Accesible con teclado y lector de pantallaVariableSí
Respeta «reducir movimiento»VariableSí

Qué sitios lo aprovechan

Hola Pedido ProComanda
Lo que incluye
Lo que incluye
CantidadConcepto
1Bloque de HTML y CSSpara pegar antes de </body>
40Caracteres de textoo solo ícono
2Posicionesizquierda o derecha
0Scripts externosni cookies
1Página de ejemplopara probarlo antes

TotalMXN 120 / mes

o USD 7 / mes. Prueba gratis de 3 días.

  • Tiendas en línea

    Resuelve dudas de tallas o envíos antes de la compra.

    Mensaje de ejemplo: Hola, tengo una pregunta sobre un producto.

  • Despachos y consultorios

    Convierte una visita en una cita.

    Mensaje de ejemplo: Hola, quiero agendar una consulta.

  • Inmobiliarias

    Cada visitante pregunta por la propiedad que está viendo.

    Mensaje de ejemplo: Hola, me interesa la propiedad que vi en su sitio.

  • Escuelas y cursos

    Atiende dudas de inscripción al instante.

    Mensaje de ejemplo: Hola, quiero información de inscripciones.

Preguntas frecuentes sobre botón de WhatsApp para web

¿Cómo pongo un botón de WhatsApp en mi página web?

Genera el botón en Hola Pedido Pro, copia el bloque de código y pégalo una sola vez antes de la etiqueta </body> de tu sitio. En WordPress puedes pegarlo con un bloque de HTML personalizado o en el pie de página del tema.

¿Hace más lenta mi página?

No de forma apreciable. Es un enlace con unas líneas de CSS y un ícono SVG integrado. No descarga archivos de otros servidores.

¿El botón rastrea a mis visitantes?

No. No incluye scripts, cookies ni píxeles de seguimiento. Solo abre el enlace de WhatsApp cuando alguien lo toca.

¿Funciona en Shopify, Wix o Tiendanube?

Sí, en cualquier plataforma que permita pegar HTML personalizado en el sitio o en el tema.

¿Puedo añadir un mensaje predefinido?

Sí. El botón abre tu chat con el mensaje que elijas ya escrito; la persona puede editarlo antes de enviarlo.

¿Cuánto cuesta?

El botón para web forma parte de Hola Pedido Pro. MXN 120/mes o USD 7/mes. Anual: MXN 1,200 o USD 70, en un solo pago por 12 meses. 3 días de prueba gratis con tarjeta para negocios nuevos; cobro automático al terminar salvo cancelación.

Todas las herramientas, un solo plan.

Botón de WhatsApp para web viene incluido en Hola Pedido Pro, junto con el resto de herramientas para tu negocio. 2 meses gratis: 12 meses al precio de 10. Un solo cobro anual.

Probar 3 días gratisVer la demo completa