Si estás creando tu web con OSORED y quieres agregar el clásico botón flotante de WhatsApp (muy usado en Latinoamérica), aquí tienes la solución más simple y efectiva.
No necesitas plugins, extensiones ni servicios externos. Solo usarás el bloque HTML personalizado, pegarás un código y cambiarás tu número y mensaje.
🧩 Paso 1: Agrega un bloque HTML personalizado
- Ingresa al editor de tu sitio en OSORED.
- Agrega un bloque llamado HTML personalizado.
- Pega el código completo que verás más abajo.
- Guarda y publica tu sitio.
Una vez publicado, el botón de WhatsApp aparecerá flotando en la parte inferior derecha de tu web.
✅ Código listo para copiar y pegar
Este es el código recomendado porque:
- No depende de servicios externos
- No requiere suscripciones
- Funciona perfectamente en OSORED
- Carga rápido y no instala nada
⚠️ IMPORTANTE: luego de pegar el código, deberás cambiar tu número de WhatsApp.
<!-- Botón flotante de WhatsApp para OSORED -->
<style>
.oso-wa-float{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 99999;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-family: Arial, sans-serif;
}
.oso-wa-pill{
background: #ffffff;
color: #111;
padding: 10px 12px;
border-radius: 999px;
box-shadow: 0 10px 25px rgba(0,0,0,.18);
font-size: 14px;
line-height: 1;
border: 1px solid rgba(0,0,0,.06);
max-width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.oso-wa-btn{
width: 56px;
height: 56px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 10px 25px rgba(0,0,0,.22);
display: grid;
place-items: center;
}
.oso-wa-btn svg{
width: 28px;
height: 28px;
fill: #ffffff;
}
@media (max-width: 520px){
.oso-wa-pill{
display:none;
}
}
</style>
<a class="oso-wa-float"
href="https://wa.me/51999999999?text=Hola%20👋%20Quiero%20información%20por%20favor."
target="_blank" rel="noopener noreferrer"
aria-label="Chatear por WhatsApp">
<span class="oso-wa-pill">¿Te ayudo por WhatsApp?</span>
<span class="oso-wa-btn">
<svg viewBox="0 0 32 32">
<path d="M19.11 17.2c-.28-.14-1.65-.82-1.9-.91-.26-.1-.45-.14-.64.14-.19.28-.74.91-.91 1.1-.17.19-.33.21-.62.07-.28-.14-1.17-.43-2.23-1.37-.82-.73-1.38-1.63-1.54-1.91-.16-.28-.02-.43.12-.57.12-.12.28-.33.42-.5.14-.17.19-.28.28-.47.09-.19.05-.36-.02-.5-.07-.14-.64-1.54-.88-2.11-.23-.55-.47-.48-.64-.49l-.55-.01c-.19 0-.5.07-.76.36-.26.28-1 1-1 2.43 0 1.43 1.03 2.82 1.17 3.02.14.19 2.03 3.1 4.92 4.34.69.3 1.23.48 1.65.62.69.22 1.32.19 1.82.12.56-.08 1.65-.67 1.88-1.32.23-.64.23-1.19.16-1.32-.07-.12-.25-.19-.53-.33z"/>
<path d="M16 3C8.82 3 3 8.57 3 15.45c0 2.59.85 4.99 2.31 6.95L4 29l6.87-1.78c1.83.97 3.93 1.52 6.13 1.52 7.18 0 13-5.57 13-12.45S23.18 3 16 3zm0 23.31c-2.09 0-4.03-.6-5.67-1.64l-.41-.25-4.08 1.06 1.09-3.86-.27-.41c-1.2-1.78-1.9-3.9-1.9-6.16C4.76 9.9 9.8 5.17 16 5.17s11.24 4.73 11.24 10.28S22.2 26.31 16 26.31z"/>
</svg>
</span>
</a>
🛠️ ¿Qué debes personalizar?
1️⃣ Cambiar tu número de WhatsApp
Busca esta parte del código:
https://wa.me/51999999999Reemplaza el número por el tuyo usando este formato:
- Perú:
51XXXXXXXXX - México:
52XXXXXXXXXX - Colombia:
57XXXXXXXXX
Sin +, sin espacios y sin guiones.
2️⃣ Cambiar el mensaje automático
En el mismo enlace, cambia el texto después de text=.
Ejemplo:
Hola%20👋%20Quiero%20cotizar%20mi%20sitio%20web.3️⃣ Cambiar el color del botón
Busca esta línea:
background: #25D366;Y reemplázala por el color de tu marca.
❓ Preguntas frecuentes
¿Necesito pagar algo?
No. Este botón es completamente gratuito.
¿Funciona en celular?
Sí. En móviles se muestra solo el ícono para no tapar la pantalla.
¿Instala algo o rastrea usuarios?
No. Es solo HTML y CSS, sin scripts externos.
💡 Tip OSORED: puedes usar este mismo código en todas tus páginas y cambiar solo el mensaje para cada servicio.