Lección 08-08 – Botón WhatsApp flotante en todas las páginas
¿De qué trata esta lección?
Vamos a agregar un botón verde de WhatsApp fijo en la esquina inferior derecha de todas las páginas del sitio. El visitante lo ve siempre, sin importar cuánto haga scroll. Al hacer clic, abre WhatsApp directamente con un mensaje predefinido. Se hace con CSS y un pequeño código que pegás en WordPress — sin plugins.
Vamos a agregar un botón verde de WhatsApp fijo en la esquina inferior derecha de todas las páginas del sitio. El visitante lo ve siempre, sin importar cuánto haga scroll. Al hacer clic, abre WhatsApp directamente con un mensaje predefinido. Se hace con CSS y un pequeño código que pegás en WordPress — sin plugins.
¿Cómo va a quedar?
▶ Vista previa — Botón WhatsApp flotante en la página
¿Por qué es tan efectivo?
Analogía: Es como el timbre de un local. No importa en qué parte de la tienda esté el cliente — siempre puede llamar al vendedor con un solo toque. El botón flotante funciona igual: el visitante puede contactarte en cualquier momento, desde cualquier página, sin tener que buscar la página de contacto.
Comparativa — Con tooltip vs sin tooltip
Solo el ícono — menos conversión
Ícono + texto + pulso ✅
Paso 1 — Armar el link de WhatsApp
El botón va a abrir WhatsApp con un mensaje ya escrito. Para eso el link tiene este formato:
https://wa.me/NÚMERO?text=MENSAJEEjemplo con número argentino y mensaje predefinido:
https://wa.me/5491112345678?text=Hola%2C%20me%20interesa%20un%20curso| Parte del link | Qué significa | Ejemplo |
|---|---|---|
wa.me/ |
Dominio oficial de WhatsApp | — |
549 |
Argentina con prefijo móvil | 549 · España: 34 · México: 52 |
11 1234-5678 |
Tu número sin espacios ni guiones | 1112345678 |
?text= |
Mensaje predefinido (opcional) | Los espacios se escriben como %20 |
Paso 2 — El código completo del botón
Este es el código listo para pegar. Solo tenés que cambiar el número de teléfono y el texto del mensaje:
<!-- ═══ BOTÓN WHATSAPP FLOTANTE ═══ -->
<a
id="wsp-flotante"
href="https://wa.me/5491112345678?text=Hola%2C%20me%20interesa%20un%20curso"
target="_blank"
rel="noopener noreferrer"
aria-label="Contactar por WhatsApp"
>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path 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>
<span class="wsp-tooltip">¿Consultas? ¡Escribinos!</span>
</a>
<style>
/* ═══════════════════════════════════
BOTÓN WHATSAPP FLOTANTE
═══════════════════════════════════ */
#wsp-flotante {
position: fixed;
bottom: 28px;
right: 28px;
width: 58px;
height: 58px;
background-color: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5);
z-index: 99999;
text-decoration: none;
animation: wsp-pulso 2.5s infinite;
transition: transform 0.2s ease;
}
#wsp-flotante:hover {
transform: scale(1.1);
}
#wsp-flotante svg {
width: 30px;
height: 30px;
fill: #ffffff;
}
/* Animación de pulso */
@keyframes wsp-pulso {
0%, 100% {
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5);
}
50% {
box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5),
0 0 0 8px rgba(37, 211, 102, 0.15);
}
}
/* Tooltip con el mensaje */
.wsp-tooltip {
position: absolute;
bottom: 68px;
right: 0;
background: #0d1b2a;
color: #ffffff;
font-size: 12px;
font-family: "Segoe UI", sans-serif;
font-weight: 600;
padding: 7px 14px;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
/* Flecha del tooltip */
.wsp-tooltip::after {
content: '';
position: absolute;
bottom: -6px;
right: 18px;
border: 6px solid transparent;
border-top-color: #0d1b2a;
border-bottom: none;
}
/* Mostrar tooltip al pasar el mouse */
#wsp-flotante:hover .wsp-tooltip {
opacity: 1;
transform: translateY(0);
}
</style>Paso 3 — ¿Dónde pegarlo en WordPress?
Tenés dos opciones. La más limpia es con un plugin gratuito:
| Opción | Cómo | Ventaja |
|---|---|---|
| Plugin WPCode (recomendado) | WordPress → WPCode → + Añadir nuevo snippet → tipo HTML → pegás el código → activás → ubicación: "Footer del sitio" | No tocás el tema. Se desactiva fácil. Compatible con cualquier tema. |
| Apariencia → Personalizar → CSS adicional | Solo el CSS (sin el HTML del botón) | Solo para los estilos — el HTML del botón igual necesita WPCode o similar |
| functions.php del child theme | wp_footer hook |
Para desarrolladores — más técnico |
El plugin WPCode es la mejor opción: Instalalo desde WordPress → Plugins → Añadir nuevo, buscá "WPCode". Es gratuito, tiene más de 2 millones de instalaciones y te deja agregar código HTML/CSS/JS sin tocar el tema.
Paso 4 — Personalizar el número y el mensaje
En el código del Paso 2 buscá esta línea y cambiá los datos:
href="https://wa.me/5491112345678?text=Hola%2C%20me%20interesa%20un%20curso"| Qué cambiar | Ejemplo Argentina | Ejemplo España |
|---|---|---|
| Número | 5491112345678 |
34612345678 |
| Mensaje | Hola%2C%20quiero%20info%20sobre%20los%20cursos |
Mismo formato — espacios = %20, comas = %2C |
Paso 5 — Ocultar en desktop si querés (opcional)
Si preferís que el botón aparezca solo en mobile, agregá este CSS al final del bloque de estilos:
/* Solo visible en mobile */
@media (min-width: 981px) {
#wsp-flotante {
display: none;
}
}
¿Por qué solo mobile?
En desktop el visitante puede usar el formulario de contacto o el email del topbar. En mobile WhatsApp es la forma más natural y rápida de comunicarse — por eso en muchos sitios el botón flotante solo se activa en dispositivos móviles.
En desktop el visitante puede usar el formulario de contacto o el email del topbar. En mobile WhatsApp es la forma más natural y rápida de comunicarse — por eso en muchos sitios el botón flotante solo se activa en dispositivos móviles.
Lo que aprendiste en esta lección
El link de WhatsApp usa el formato
https://wa.me/NÚMERO?text=MENSAJE. El número va sin espacios, guiones ni paréntesis, con el código de país al inicio (549 para Argentina, 34 para España).
El botón flotante usa
position: fixed; bottom: 28px; right: 28px; z-index: 99999 — el fixed es lo que lo hace quedarse en pantalla mientras el visitante hace scroll.
La animación de pulso con
@keyframes hace que el botón llame la atención sutilmente — el círculo verde se expande y contrae. El tooltip con el mensaje aparece al pasar el mouse con una transición suave.
El código se pega en WordPress con el plugin gratuito WPCode — tipo HTML, ubicación Footer del sitio. Sin tocar el tema, sin riesgo de romper nada.