Saltar al contenido
OmniChannels.ai
Menú

Herramienta gratuita

Botón de chat de WhatsApp para su sitio web

Añada un botón flotante de WhatsApp a cualquier sitio web en minutos. Configure su número, el mensaje predefinido, el color, la posición, el saludo y el retardo, véalo en tiempo real en una vista previa de escritorio o móvil y copie un fragmento de código pequeño e independiente con instrucciones de instalación para WordPress, Shopify, Wix y HTML simple.

Gratis · sin registro · en su navegador

Número y mensaje

Escríbalo como lo marcaría localmente, o empiece con + o 00. Puede usar espacios, guiones y paréntesis.

Aparece en el cuadro de texto del cliente, que puede editarlo antes de enviarlo. El árabe, los emojis y los saltos de línea se codifican automáticamente.

Ajustes del botón

Posición

Un icono blanco sobre este color tiene un contraste de 2.0:1, por debajo del 3:1 recomendado para iconos. Sigue teniendo nombre accesible, pero un verde más oscuro se ve mejor.

Aparece junto al botón; el visitante puede cerrarla durante el resto de su visita. Déjela vacía para no mostrarla.

La leen los lectores de pantalla y se muestra como información al pasar el cursor.

Mostrar en

Con 0 aparece al instante. Un retraso breve evita competir con la llamada a la acción principal de la página.

Vista previa en tiempo real

Su código para insertar

Introduzca un número de WhatsApp válido para completar su código.

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-r" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>Hola 👋 ¿En qué podemos ayudarle?</span><button type="button" class="ocwa-x" aria-label="Cerrar">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=%C2%A1Hola%21%20Tengo%20una%20pregunta%20sobre%20su%20sitio%20web." target="_blank" rel="noopener" aria-label="Chatee con nosotros por WhatsApp" title="Chatee con nosotros por WhatsApp"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

Autónomo: unos 3,8 KB, sin scripts, fuentes ni imágenes externas y sin cookies.

Cómo instalarlo

  1. 1Copie el código de arriba.
  2. 2Instale un plugin para código de cabecera y pie como WPCode, o abra Apariencia → Editor si usa un tema de bloques.
  3. 3Pegue el código en la sección del pie (final del body) o en un bloque HTML personalizado de la parte de plantilla del pie.
  4. 4Guarde, vacíe la caché si usa un plugin de caché y pruebe en su teléfono.

¿Se acumulan los chats en un solo teléfono? Responda estos chats desde una bandeja de entrada compartida del equipo

Nada de lo que escriba se envía a nuestros servidores.

Respuesta breve

Un botón de chat de WhatsApp es un pequeño botón flotante en un sitio web que, al hacer clic, abre un chat de WhatsApp con la empresa. Es un enlace a https://wa.me/ más el número de la empresa y un mensaje predefinido opcional, con aspecto de icono en una esquina de la página. Los visitantes inician la conversación en su propio teléfono o en WhatsApp Web, sin formularios ni guardar el número.

Infraestructura de confianzaMeta Business Solution Provider oficialPartner de Google RBMMiembro de la GSMAISO/IEC 27001:2022ISO/IEC 27018ISO 9001:2015ISO 22301SOC 2 Type IICumple el RGPD

Cómo añadir un botón de WhatsApp a su sitio web

  1. 1

    Introduzca su número y su mensaje

    Elija el país, escriba su número de WhatsApp y redacte el mensaje que enviarán los visitantes, por ejemplo una pregunta sobre un pedido.

  2. 2

    Personalice el botón

    Elija la esquina, el color, la burbuja de saludo, los dispositivos y un retardo. La vista previa en tiempo real muestra el botón en una página de ejemplo en escritorio y en móvil.

  3. 3

    Copie el código

    Copie el fragmento. Son unos pocos kilobytes de HTML, CSS y JavaScript sin solicitudes externas, cookies ni seguimiento.

  4. 4

    Péguelo antes de </body>

    Siga los pasos para WordPress, Shopify, Wix o HTML simple, publique y pruebe el botón en un teléfono y en un equipo de escritorio.

Qué hace el código generado

El fragmento añade un enlace de posición fija en la esquina inferior de sus páginas. El enlace es una URL estándar de clic para chatear con el formato que WhatsApp documenta en su página de ayuda (faq.whatsapp.com/5913398998672934): https://wa.me/ más su número internacional completo y, si lo desea, ?text= con un mensaje codificado para URL. Abre la aplicación de WhatsApp en los teléfonos y WhatsApp Web o la aplicación de escritorio en los equipos de escritorio.

Todo está integrado en línea: el icono de WhatsApp es un trazado SVG, los estilos se limitan a un único prefijo de clase y el script son unas pocas líneas que gestionan el retardo y el saludo descartable. No hay scripts, fuentes, imágenes ni cookies externos, por lo que el botón no ralentiza su página ni añade un rastreador de terceros.

Accesible y preparado para RTL desde el diseño

Los botones flotantes suelen ser solo un icono, lo que deja a los usuarios de lectores de pantalla adivinando. El enlace generado tiene un aria-label que usted controla («Chatee con nosotros por WhatsApp» por defecto), un contorno de foco visible para los usuarios de teclado y un icono decorativo oculto para las tecnologías de asistencia. El saludo tiene un botón de cierre real con su propia etiqueta.

Los visitantes que configuran su dispositivo para reducir el movimiento ven el botón sin la animación de entrada ni el zoom al pasar el cursor. El saludo usa dirección de texto automática y propiedades CSS lógicas, de modo que el árabe y otros textos de derecha a izquierda se muestran correctamente, y puede colocar el botón abajo a la izquierda en sitios RTL.

  • Enlace accesible con el teclado y con un nombre accesible claro.
  • Respeta prefers-reduced-motion.
  • Oculto al imprimir y opcional por tipo de dispositivo.
  • El cierre del saludo se recuerda durante la visita, sin cookies.

Cómo elegir color, posición y momento de aparición

Abajo a la derecha es la convención en sitios de izquierda a derecha y abajo a la izquierda suele funcionar mejor en sitios en árabe, pero compruebe que el botón no tape un banner de cookies, el lanzador de un chatbot o la barra de pago en móvil. El verde de WhatsApp (#25D366) se reconoce al instante; con un icono blanco tiene un contraste de aproximadamente 2:1, así que, si la accesibilidad es lo más importante, un verde más oscuro como #128C7E ofrece alrededor de 4:1.

Un retardo de unos segundos permite a los visitantes leer la página antes de que aparezca el botón, y mostrarlo solo en móvil es una opción sensata cuando su equipo responde desde el teléfono. Limite el saludo a una sola línea breve y concreta, como «¿Dudas sobre la entrega? Chatee con nosotros».

El botón oficial «Chat on WhatsApp» y las normas de marca

WhatsApp también publica un botón de marca «Chat on WhatsApp» en verde y blanco y en tres tamaños, y pide a las empresas que lo usen sin modificaciones. Según el servicio de ayuda de WhatsApp, por ahora solo está disponible en inglés. El botón de icono flotante de esta herramienta es un formato distinto y compacto; use el que use, no modifique el logo de WhatsApp ni dé a entender que WhatsApp respalda su empresa.

Cuando un solo teléfono ya no es suficiente

Un botón en el sitio web puede multiplicar rápidamente los chats entrantes. En la aplicación WhatsApp Business, las conversaciones están en un número limitado de dispositivos vinculados. En la WhatsApp Business Platform (API), el mismo enlace wa.me puede alimentar una bandeja de entrada compartida del equipo, donde los chats se asignan a agentes, se responden primero con chatbots o agentes de IA y se les da seguimiento con plantillas aprobadas una vez cerrada la ventana de atención al cliente de 24 horas.

Planifique quién responde, en qué horario y con qué rapidez. Indique su horario de respuesta en el saludo si no atiende los chats las 24 horas.

Preguntas sobre el botón de WhatsApp para web

¿Cómo añado un botón de WhatsApp a mi sitio web?

Genere el código de arriba con su número y su mensaje, cópielo y péguelo justo antes de la etiqueta de cierre </body> de su sitio, o en el área de código del pie de página de su creador de sitios web. A partir de ese momento aparecerá en todas las páginas.

¿Este widget de chat de WhatsApp es gratuito?

Sí. El generador y el código son gratuitos, no requieren cuenta y no tienen límites de uso. El botón enlaza directamente con WhatsApp, por lo que no hay ninguna suscripción ni script alojado detrás.

¿Un botón de WhatsApp ralentizará mi sitio web?

No. El fragmento son unos pocos kilobytes de HTML, CSS y JavaScript en línea y no realiza solicitudes de red hasta que un visitante hace clic, a diferencia de los widgets que cargan scripts, fuentes y rastreadores externos.

¿Cómo añado un botón de WhatsApp en WordPress?

Use un plugin de código para encabezado y pie de página, como WPCode, y pegue el fragmento en la sección del pie de página, o añádalo a un bloque HTML personalizado en la plantilla del pie de página si usa un tema de bloques. Vacíe la caché y pruébelo.

¿Cómo añado un botón de WhatsApp en Shopify?

En el panel de control de Shopify, abra Tienda online → Temas y luego Editar código en su tema publicado. Abra layout/theme.liquid y pegue el fragmento justo antes de </body>; después guarde y revise su tienda en el móvil.

¿Puedo mostrar el botón de WhatsApp solo en móvil?

Sí. Desmarque Escritorio en el generador y el botón se ocultará en pantallas de 768 píxeles de ancho o más. También puede desmarcar Móvil para mostrarlo solo en escritorio.

¿Pueden varios agentes responder los chats del botón de la web?

Desde un solo teléfono, no de forma eficaz. Conecte el número a la WhatsApp Business API y dirija los chats a una bandeja de entrada compartida, donde varios agentes y chatbots pueden responder desde el mismo número.

Más herramientas gratuitas