Botón WhatsApp Flotante

Codigo HTML

Ultima Actualización: 05 de Octubre del 2025

Descripción General

Este es un componente de front-end autocontenido en un solo archivo HTML. Permite agregar un botón de WhatsApp interactivo a cualquier sitio web. Al hacer clic, el botón abre una ventana de chat simulada que guía al usuario a través de opciones de servicio predefinidas o le permite escribir un mensaje personalizado antes de redirigirlo a la aplicación de WhatsApp.

Características Principales

Botón Flotante Animado: Un botón con una sutil animación de «pulso» para atraer la atención.
Ventana de Chat Interactiva: En lugar de ir directamente a WhatsApp, abre una ventana emergente personalizable.
Mensajes y Avatar Configurables: El título del chat, el estado del agente, el mensaje de bienvenida y el avatar se pueden cambiar fácilmente.
Menú de Servicios: Muestra botones para que los usuarios seleccionen un tema de interés, generando mensajes predefinidos.
Mensaje Personalizado: Opción para que el usuario escriba su propia consulta.
Burbuja Proactiva (CTA): Después de unos segundos, aparece un mensaje proactivo para incentivar la interacción.
Fácil de Configurar: Toda la personalización se realiza a través de atributos data-* en el HTML, sin necesidad de editar el código JavaScript.
Diseño Moderno y Responsivo: Se adapta a dispositivos móviles y de escritorio.

Instalación

Simplemente copia y pega el contenido completo del archivo whatsapp_button_documented.html justo antes de la etiqueta de cierre </body> en tu página web. El widget es completamente autocontenido (HTML, CSS y JavaScript en un solo lugar), por lo que no se necesitan archivos adicionales.

Configuración

La configuración principal se realiza en el div con la clase whatsapp-container. Todos los parámetros se ajustan mediante atributos data-*.

<div 
    class="whatsapp-container"
    data-phone-number="519xxxxxxxx"
    data-header-title="Nombre de tu Empresa"
    data-agent-status="Generalmente responde en minutos"
    data-welcome-message="¡Hola! 👋<br>¿En qué podemos ayudarte?"
    data-tooltip-message="¿Hablamos?"
    data-avatar-url="URL_de_tu_logo_o_avatar.png"
    data-services='[ ... ]'
    data-cta-message="¡Hola! ¿Necesitas ayuda?"
    data-play-sound="true"
>
    <!-- ... resto del widget ... -->
</div>

Atributos `data-*`

Atributo `data-*`	Descripción	Ejemplo
`data-phone-number`	(Requerido) El número de teléfono de WhatsApp, incluyendo el código de país (sin el símbolo `+`).	`51987654321`
`data-header-title`	El título que aparece en la cabecera de la ventana de chat.	`Soporte Técnico`
`data-agent-status`	El texto que aparece debajo del título (estado).	`Disponible 24/7`
`data-welcome-message`	El mensaje de bienvenida que se muestra al abrir el chat. Puedes usar `<br>` para saltos de línea.	`¡Hola! 👋<br>¿Cómo podemos ayudarte?`
`data-tooltip-message`	El texto que aparece al pasar el cursor sobre el botón flotante (solo en escritorio).	`¿Necesitas ayuda?`
`data-avatar-url`	La URL de la imagen que se usará como avatar en la cabecera del chat.	`https://tusitio.com/avatar.jpg`
`data-services`	Un objeto JSON en formato de cadena de texto que define los botones de servicio. Cada objeto debe tener una clave `"name"`.	`'[{"name": "Ventas"}, {"name": "Soporte"}]'`
`data-cta-message`	El mensaje que aparece en la burbuja proactiva después de unos segundos.	`¡Estamos en línea para ayudarte!`
`data-play-sound`	Activa (`"true"`) o desactiva (`"false"`) el sonido de notificación cuando aparece la burbuja proactiva.	`"true"`

Personalización Avanzada

Colores (CSS)

Puedes cambiar fácilmente la paleta de colores del widget modificando las variables CSS definidas al principio de la sección <style>, dentro de :root.

:root {
    --whatsapp-green: #25D366; /* Color principal de WhatsApp */
    --whatsapp-green-dark: #075E54;
    --header-start: #ff00ea; /* Color de los íconos de servicio */
    --hover-dark: #012d25;   /* Color del header y del hover en botones */
    /* ...otros colores... */
}

Iconos (JavaScript)

Si deseas agregar nuevos servicios con iconos personalizados, puedes hacerlo modificando el objeto icons en el código JavaScript. Agrega una nueva entrada donde la clave sea el nombre exacto del servicio (tal como lo pones en data-services) y el valor sea el código SVG del icono.

// --- DICCIONARIO DE ICONOS SVG ---
// Asocia nombres de servicios con su respectivo ícono SVG.
const icons = {
    "default": `<svg>...</svg>`,
    "Diseño de Redes": `<svg>...</svg>`,
    "Tu Nuevo Servicio": `<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>` // <-- Añade tu nuevo ícono aquí
    // ...otros iconos...
};

Si un servicio no tiene un icono asociado en este objeto, se usará el icono default.