✅Cómo Añadir un Botón de Contacto Flotante de WhatsApp en WordPress Vol.2

En el mundo actual, donde la comunicación rápida es clave, WhatsApp se ha convertido en una herramienta esencial para conectar negocios con sus clientes. Tener un botón de WhatsApp en tu sitio web es una solución práctica y efectiva para facilitar el contacto directo. Ya tengo un tutorial que explica cómo integrar un ícono de WhatsApp sencillo, pero esta nueva versión lleva la funcionalidad a otro nivel.

El diseño mejorado de este botón flotante incluye animaciones llamativas, un mensaje de bienvenida automático en popup que aparece y desaparece a los 5 segundos y una imagen identificativa (como tu foto o el logo de tu empresa) para generar mayor cercanía. Además, el mensaje de bienvenida se muestra solo una vez por sesión, evitando que el usuario se sienta agobiado. Como toque adicional, al pasar el ratón sobre el botón, el mensaje aparece de nuevo de forma suave, invitando al visitante a iniciar el contacto.

Otra ventaja destacada es que al hacer clic en el botón, el usuario es redirigido directamente a WhatsApp con un mensaje personalizado preconfigurado. Esto facilita un primer contacto más directo y profesional, permitiendo al cliente proporcionar detalles o mencionar cómo llegó a tu sitio, lo que mejora la interacción desde el primer momento.

Por último, este diseño funciona perfectamente en cualquier dispositivo, ya sea ordenador o móvil, asegurando que todos los usuarios puedan acceder fácilmente al contacto.

Si buscas destacar y ofrecer una experiencia más profesional y cercana en tu sitio web, este botón flotante mejorado es una excelente solución. No solo facilita la comunicación con tus clientes, sino que también deja una impresión positiva y duradera.

1. Función principal: add_responsive_whatsapp_floating_button()

Esta función es la encargada de generar el HTML, CSS y JavaScript necesarios para añadir el botón flotante de WhatsApp al pie de la página web. Es llamada mediante el hook add_action('wp_footer', ...), lo que asegura que el código se cargue correctamente en el frontend del sitio.

2. HTML: Estructura del botón flotante

Dentro de esta función, encontramos el HTML que define la estructura visual y funcional del botón flotante:

• Contenedor principal: <div id="whatsapp-floating"> Este div actúa como contenedor para todos los elementos del botón flotante y su mensaje asociado. Tiene una posición fija para permanecer visible en la esquina inferior izquierda de la pantalla.
• Enlace de WhatsApp: <a href="https://wa.me/..."> Este enlace redirige al usuario a WhatsApp con un mensaje preconfigurado.
  • Propiedad href: Incluye la URL de WhatsApp con el número de contacto y un mensaje inicial codificado en formato URL (por ejemplo, «Hola vengo de tal sitio…»).
  • Propiedad target="_blank": Abre el enlace en una nueva pestaña para no interrumpir la navegación del usuario.
• Icono flotante: <div class="whatsapp-icon"> Contiene una imagen que representa el ícono de WhatsApp y actúa como el punto visual principal. Es estilizado con animaciones para captar la atención del usuario.
• Mensaje flotante: <div class="whatsapp-message"> Este mensaje complementa el botón principal y aparece automáticamente tras 5 segundos o al interactuar con el botón:
  • Botón de cierre: Permite al usuario ocultar manualmente el mensaje.
  • Imagen de perfil: Personalizable con una foto o logo de la empresa.
  • Texto: Muestra un saludo inicial para invitar al visitante a contactarte.

3. CSS: Estilos visuales y animaciones

El CSS proporciona los estilos que hacen que el botón sea visualmente atractivo y funcional:

• Estilo del botón flotante (#whatsapp-floating) Define su posición fija en la esquina inferior izquierda, asegurando que siempre sea visible. También incluye un alto nivel de prioridad con z-index: 9999.
• Animación del botón (@keyframes exaggerated-float) Simula un movimiento oscilante para captar la atención del usuario de forma sutil pero efectiva.
• Estilo del mensaje flotante (.whatsapp-message) Diseñado como un cuadro emergente con bordes redondeados, sombra y un texto claro. Por defecto, está oculto con display: none y opacity: 0.
• Interacciones con el usuario:
  • Hover sobre el botón: Cambia el tamaño del icono (transform: scale(1.2)) para indicar que es interactivo.
  • Mostrar el mensaje automáticamente o al pasar el ratón: Define la transición suave entre estados de visibilidad.

4. JavaScript: Comportamiento interactivo

El JavaScript añade funcionalidad dinámica al botón y mensaje flotante. Está encapsulado en un evento DOMContentLoaded para asegurarse de que se ejecute después de cargar el contenido de la página.

• Control de la visibilidad del mensaje:
  • Mostrar el mensaje automáticamente una vez por sesión: Utiliza sessionStorage para guardar el estado de la visualización del mensaje. Si el mensaje no se ha mostrado antes, se muestra tras 5 segundos.javascriptCopiarEditarconst messageShown = sessionStorage.getItem('whatsappMessageShown'); if (!messageShown) { setTimeout(function() { floatingButton.classList.add('show-message'); sessionStorage.setItem('whatsappMessageShown', 'true'); }, 5000); }
  • Ocultar el mensaje tras 5 segundos adicionales: Un segundo temporizador elimina el mensaje para evitar saturar al usuario.
• Interacción con el ratón:
  • Mostrar el mensaje al pasar el ratón sobre el botón: Al detectar el evento mouseenter, el mensaje se muestra mediante la clase show-message.javascriptCopiarEditarfloatingButton.addEventListener('mouseenter', function() { floatingButton.classList.add('show-message'); });
  • Ocultar el mensaje al retirar el ratón: Similar al anterior, pero usando el evento mouseleave.javascriptCopiarEditarfloatingButton.addEventListener('mouseleave', function() { floatingButton.classList.remove('show-message'); });
• Botón de cierre del mensaje: Permite al usuario ocultar el mensaje manualmente sin cerrar el botón flotante. Esto evita que el mensaje vuelva a aparecer durante esa sesión.

5. Personalización del enlace de WhatsApp

La URL https://wa.me/ permite configurar un mensaje inicial que se envía al abrir WhatsApp. En este caso, incluye:

• Número de contacto: El teléfono del administrador o empresa.
• Mensaje inicial personalizado: Incluye información como el origen del contacto («Hola, vengo de tal sitio…»).

Esto agiliza el contacto y permite al administrador saber de dónde proviene el cliente.

Resumen

El código integra un botón flotante de WhatsApp con las siguientes funciones clave:

1. Botón animado y visible desde cualquier página.
2. Mensaje de bienvenida que aparece y desaparece automáticamente tras 5 segundos.
3. Control inteligente de visualización (una vez por sesión).
4. Interacciones dinámicas al pasar el ratón.
5. Redirección a WhatsApp con un mensaje inicial preconfigurado.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.

function add_responsive_whatsapp_floating_button() {
    ?>
    <!-- Botón flotante de WhatsApp -->
<div id="whatsapp-floating">
    <a href="https://wa.me/34606000000?text=Hola%20vengo%20de%20tal%20sitio%20y%20necesito%20hacer%20unas%20consultas." target="_blank">
        <div class="whatsapp-icon">
            <img src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/01/whatsapp-1.png" alt="WhatsApp"> <!-- https://www.flaticon.es/iconos-gratis/whatsapp-->
        </div>
    </a>
    <div class="whatsapp-message">
        <button class="close-message">&times;</button> <!-- Botón de cierre -->
        <img class="whatsapp-profile" src="https://codigos.fransalas-proyectos.com/wp-content/uploads/2025/01/fransalas.png" alt="Perfil">
        <div class="whatsapp-text">
            <strong>Asistencia en línea</strong>
            <p>¡Hola! Soy <b>Fran Salas</b> ¿Necesitas algo?</p>
        </div>
    </div>
</div>


    <style>
        /* Contenedor del botón flotante */
        #whatsapp-floating {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 9999;
        }

        /* Icono de WhatsApp con animación */
        #whatsapp-floating .whatsapp-icon {
            width: 70px;
            height: 70px;
            background-color: #2BB140;
            border: 5px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: exaggerated-float 4s infinite ease-in-out;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        #whatsapp-floating .whatsapp-icon:hover {
            transform: scale(1.2);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
        }

        #whatsapp-floating .whatsapp-icon img {
            width: 60px;
            height: 60px;
        }

        /* Contenedor del mensaje flotante */
        #whatsapp-floating .whatsapp-message {
            display: none;
            position: absolute;
            bottom: 100px;
            left: 0;
            max-width: 350px;
            min-width: 250px;
            background: #ffffff;
            color: #000000;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 15px;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            overflow: hidden;
            box-sizing: border-box;
        }

        #whatsapp-floating .whatsapp-message .close-message {
            position: absolute;
            top: 2px;
            left: 2px;
            background: none;
            border: none;
            color: #333333;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10;
            transition: color 0.3s ease;
        }

        #whatsapp-floating .whatsapp-message .close-message:hover {
            color: #2BB140;
        }

        #whatsapp-floating .whatsapp-message .whatsapp-profile {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid #2BB140;
            flex-shrink: 0;
        }

        #whatsapp-floating .whatsapp-message .whatsapp-text {
            flex: 1;
            overflow-wrap: anywhere;
        }

        #whatsapp-floating .whatsapp-message .whatsapp-text strong {
            font-size: 16px;
            color: #2BB140;
        }

        #whatsapp-floating .whatsapp-message .whatsapp-text p {
            font-size: 14px;
            line-height: 1.5;
            color: #333333;
        }

        #whatsapp-floating.show-message .whatsapp-message {
            display: flex;
            opacity: 1;
        }

        @keyframes exaggerated-float {
            0%, 100% {
                transform: translateY(0);
            }
            25% {
                transform: translateY(-15px);
            }
            50% {
                transform: translateY(15px);
            }
            75% {
                transform: translateY(-10px);
            }
        }
 

    </style>

    <script>
document.addEventListener('DOMContentLoaded', function() {
    const floatingButton = document.querySelector('#whatsapp-floating');
    const closeButton = document.querySelector('#whatsapp-floating .close-message');
    const messageBox = document.querySelector('#whatsapp-floating .whatsapp-message');

    // Comprobar si el mensaje ya se mostró en esta sesión
    const messageShown = sessionStorage.getItem('whatsappMessageShown');

    // Mostrar mensaje automáticamente si no se mostró antes
    if (!messageShown) {
        setTimeout(function() {
            floatingButton.classList.add('show-message');
            sessionStorage.setItem('whatsappMessageShown', 'true'); // Registrar que se mostró el mensaje

            // Ocultar mensaje automáticamente después de otros 5 segundos
            setTimeout(function() {
                floatingButton.classList.remove('show-message');
            }, 5000);
        }, 5000);
    }

    // Mostrar el mensaje al pasar el ratón sobre el botón
    floatingButton.addEventListener('mouseenter', function() {
        floatingButton.classList.add('show-message');
    });

    // Ocultar el mensaje al sacar el ratón del botón
    floatingButton.addEventListener('mouseleave', function() {
        floatingButton.classList.remove('show-message');
    });

    // Cerrar mensaje cuando se haga clic en la "X"
    closeButton.addEventListener('click', function(event) {
        event.stopPropagation(); // Evita conflictos con el enlace
        floatingButton.classList.remove('show-message');
    });
});

    </script>
    <?php
}
add_action('wp_footer', 'add_responsive_whatsapp_floating_button');

Lenguaje del código: PHP (php)

Nos vemos en el siguiente tutorial. Un saludo.