Cómo agregar un botón flotante de WhatsApp en Blogger

💬📲 Botón flotante de WhatsApp con mensajes personalizados

Un botón flotante de WhatsApp es una excelente forma de facilitar el contacto con tus visitantes. En lugar de abrir WhatsApp directamente, este método muestra una interfaz intermedia donde el usuario puede elegir o escribir un mensaje antes de iniciar el chat.

Este sistema es ideal para soporte técnico, ventas, consultas o atención al cliente, y funciona perfectamente en Blogger.

---

🧠 ¿Cómo funciona?

• 🟢 El usuario presiona el botón flotante de WhatsApp
• 🪟 Se abre una pequeña interfaz (panel/modal)
• ✍️ El usuario selecciona o escribe un mensaje
• 📲 Se abre WhatsApp con el mensaje listo para enviar

Esto mejora la experiencia del usuario y te permite recibir mensajes más claros desde el primer contacto.

---

🚀 ¿Para qué puedes usarlo?

• 🛠️ Soporte técnico
• 💼 Atención a clientes
• 🛒 Ventas de productos o servicios
• 👥 Comunidad o asesorías
• 📱 Contacto rápido desde móvil

---

🧩 Código listo para usar

Copia el siguiente código y pégalo dentro de una entrada de Blogger o en un gadget HTML/JavaScript.

<!-- BOTÓN FLOTANTE -->
<div class="wa-float-btn" onclick="openWaPanel()">
  <i class="fab fa-whatsapp"></i>
</div>

<!-- PANEL WHATSAPP -->
<div id="waPanel" class="wa-panel">
  <div class="wa-box">
    <h3>💬 ¿Cómo podemos ayudarte?</h3>

    <select id="waSelect">
      <option value="">Selecciona un mensaje</option>
      <option value="Hola, necesito soporte">Soporte</option>
      <option value="Hola, quiero información">Información</option>
      <option value="Hola, quiero comprar">Comprar</option>
    </select>

    <textarea id="waCustom" placeholder="O escribe tu mensaje personalizado"></textarea>

    <button onclick="openWhatsApp()">Abrir WhatsApp</button>
    <span class="wa-close" onclick="closeWaPanel()">Cancelar</span>
  </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
.wa-float-btn{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  background:#25d366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  cursor:pointer;
  z-index:9999;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}

.wa-panel{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
}

.wa-box{
  background:#fff;
  padding:20px;
  border-radius:16px;
  max-width:300px;
  width:90%;
  text-align:center;
}

.wa-box select,
.wa-box textarea{
  width:100%;
  padding:10px;
  margin-top:10px;
  border-radius:10px;
  border:1px solid #ccc;
}

.wa-box textarea{
  resize:none;
  height:70px;
}

.wa-box button{
  margin-top:12px;
  width:100%;
  padding:12px;
  background:#25d366;
  border:none;
  color:#fff;
  border-radius:10px;
  font-size:15px;
  cursor:pointer;
}

.wa-close{
  display:block;
  margin-top:10px;
  font-size:13px;
  color:#777;
  cursor:pointer;
}
</style>

<script>
const WA_NUMBER = "573245945588"; // CAMBIA TU NÚMERO

function openWaPanel(){
  document.getElementById("waPanel").style.display = "flex";
}

function closeWaPanel(){
  document.getElementById("waPanel").style.display = "none";
}

function openWhatsApp(){
  const selectMsg = document.getElementById("waSelect").value;
  const customMsg = document.getElementById("waCustom").value.trim();
  const msg = customMsg || selectMsg;

  if(!msg){
    alert("Escribe o selecciona un mensaje");
    return;
  }

  const url = "https://wa.me/" + WA_NUMBER + "?text=" + encodeURIComponent(msg);
  window.open(url, "_blank");
}
</script>

---

📘 Mini tutorial rápido

1. Abre tu entrada en Blogger
2. Cambia a modo HTML
3. Pega el código completo
4. Cambia el número de WhatsApp por el tuyo
5. Personaliza los mensajes si lo deseas
6. Guarda y publica

---

⚙️ ¿Qué cosas debes cambiar?

• 📞 Número de WhatsApp (con código de país, sin +)
• ✍️ Mensajes del selector
• 🎨 Colores o posición del botón

Este sistema es una forma profesional y moderna de mejorar la comunicación con tus visitantes y aumentar conversiones sin usar plugins externos.

Explora más herramientas y guías en el blog para seguir optimizando tu proyecto 🚀