Aprende a instalar un botón de WhatsApp flotante en tu tienda STEL Order. Recibe consultas con la URL del producto y cierra ventas más rápido. ¡Copia y pega!
Embedded Files
Botón WhatsApp STEL Order
Añadir botón WhatsApp flotante a tu STEL Order
¿Te imaginas poder resolver las dudas de tus clientes sabiendo al instante qué producto de tu tienda online están mirando? A menudo, un cliente interesado contacta por WhatsApp, obligándote a preguntar "¿a qué artículo te refieres?", un proceso que puede enfriar una venta. En esta guía paso a paso, te daremos los códigos y las instrucciones exactas para instalar un botón de WhatsApp inteligente en tu tienda STEL Order que envía automáticamente la URL del producto, dándote todo el contexto para cerrar ventas de forma rápida y eficaz.
Índice
CRM fácil, rápido y 100% móvil
Fomenta relaciones sólidas con tus clientes y brinda asistencia instantánea a través de nuestras eficientes herramientas de CRM.
⚠️ AVISO DE CONTENIDO NO OFICIAL
Este artículo describe un truco no documentado oficialmente por STEL Order. Es una solución basada en nuestra propia experiencia. Úsala bajo tu propia responsabilidad. STEL Order no ofrece soporte para este procedimiento y una futura actualización podría hacer que deje de funcionar.
El problema: Un contacto a ciegas que enfría la venta
Cuando un cliente tiene una duda sobre un producto en tu tienda online, quiere una respuesta rápida. Si su primer mensaje es genérico, te obliga a iniciar un pequeño interrogatorio para identificar el artículo de su interés.
Este intercambio, aunque breve, introduce fricción y consume un tiempo valioso. En el mundo del e-commerce, cada segundo cuenta, y este retraso puede ser suficiente para que un comprador potencial pierda el interés.
La solución: Un botón de WhatsApp con "Memoria"
Gracias a la personalización de la tienda en STEL Order, podemos implementar un botón de WhatsApp flotante y dinámico que soluciona este problema de raíz.
Este botón no solo facilita el contacto, sino que adjunta automáticamente la URL del producto que el cliente está viendo en su primer mensaje. De este modo, recibes la consulta con todo el contexto que necesitas para ofrecer una respuesta inmediata, precisa y orientada a la venta.
Guía de Instalación en 3 pasos
Para instalar este botón, solo necesitas permisos de Administrador en STEL Order y seguir estas sencillas instrucciones. Usaremos las casillas de personalización de la tienda: "CSS personalizado" para el estilo y "Body personalizado" para la funcionalidad.
Paso 1: Accede a las integraciones de tu tienda
En el panel principal de STEL Order, haz clic en el icono de los seis cuadraditos 𓃑 (Funcionalidades) en la parte superior central. Selecciona la opción "🛒 Shop". Dentro de la configuración de tu tienda, ve a la pestaña "Integración". Aquí encontrarás las dos casillas donde pegaremos los códigos "Body personalizado:" y "CSS personalizado:".
Paso 2: El estilo (Código CSS)
Este código se encarga de la apariencia del botón: lo fija en la esquina inferior derecha, le da su forma, color y añade una sutil animación para captar la atención.
Copia todo el siguiente bloque y pégalo en la casilla "CSS personalizado":CSS
/* =================== ESTILOS BOTÓN WHATSAPP INTELIGENTE =================== *//* Contenedor principal */.whatsapp-container { position: fixed; bottom: 15px; right: 15px; z-index: 9999; cursor: pointer;}/* Burbuja de texto */.whatsapp-text-bubble { position: absolute; bottom: 70px; /* Ajusta la altura sobre el botón */ right: 0; background-color: #007da5; /* ¡Color personalizable! */ color: white; padding: 8px 15px; border-radius: 15px; font-family: Arial, sans-serif; font-size: 14px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease-in-out;}
/* Muestra la burbuja al pasar el ratón por encima */.whatsapp-container:hover .whatsapp-text-bubble { opacity: 1;}
/* El botón (la imagen) con animación */.whatsapp-float img { border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,0.2); animation: whatsapp-pulse 2s infinite;}
/* Animación de pulso */@keyframes whatsapp-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); }}
Paso 3: La estructura y la inteligencia (Código HTML y JavaScript)
Este segundo bloque crea la estructura del botón (el icono y la burbuja de texto) y contiene el código JavaScript, que es el cerebro de la operación. Este detecta la página actual y construye el enlace de WhatsApp personalizado.
Copia este bloque y pégalo en la casilla "Body personalizado":HTML
<div class="whatsapp-container"> <div class="whatsapp-text-bubble"> ¿Dudas o no hay stock? ¡Pregúntanos! </div> <a href="#" id="whatsapp-link-dinamic" class="whatsapp-float" aria-label="Contactar por WhatsApp" onclick="openDynamicWhatsApp(event); return false;"> <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="Icono de WhatsApp" width="60" /> </a></div><script> function openDynamicWhatsApp(event) { event.preventDefault(); // ⬇️ ¡IMPORTANTE! REEMPLAZA ESTE NÚMERO POR EL TUYO ⬇️ const phoneNumber = 'AQUÍ TU NÚMERO DE TELÉFONO'; // Formato internacional sin '+' ni espacios. Ej: 34666777888 const baseText = "Tengo una duda sobre este producto: "; const encodedBaseText = encodeURIComponent(baseText); const currentPageUrl = window.location.href; const finalWhatsAppUrl = `https://wa.me/${phoneNumber}?text=${encodedBaseText}${currentPageUrl}`; window.open(finalWhatsAppUrl, '_blank'); }</script>
¡No te olvides! Personaliza tu botón
Para que todo funcione a la perfección, necesitas hacer unos pequeños ajustes en el código que acabas de pegar en la casilla "Body personalizado".
Añade tu número de teléfono (Obligatorio): Busca la línea const phoneNumber = 'AQUÍ TU NÚMERO DE TELÉFONO'; y reemplaza el texto por tu número de empresa, incluyendo el prefijo de tu país pero sin el símbolo + ni espacios (ej: 34612345678).
Adapta los textos: Puedes cambiar el mensaje de la burbuja (¿Dudas o no hay stock? ¡Pregúntanos!) en el código HTML. También puedes modificar el mensaje inicial de WhatsApp en la línea const baseText = "Tengo una duda sobre este producto: "; del código JavaScript.
Cambia los colores: En el código CSS, busca la línea background-color: #007da5; y cambia el código hexadecimal por el color corporativo de tu marca.
Implementar un botón de WhatsApp inteligente en tu tienda STEL Order es una mejora pequeña en esfuerzo pero gigante en impacto. Con solo copiar y pegar dos fragmentos de código, eliminas la fricción en la comunicación, ofreces un soporte al cliente contextualizado y aumentas las posibilidades de convertir una simple duda en una venta cerrada. Es la herramienta perfecta para profesionalizar tu tienda online y agilizar tu proceso de ventas.
¿Te animas a instalarlo? Si tienes cualquier duda durante el proceso, ¡déjala en los comentarios y te ayudamos!
Bonus track
¡Comienza hoy mismo a personalizar tu tienda online y a darle a tus interacciones un aspecto profesional!
Documentación oficial
Encuentra más ayuda en STEL Order:
Report abuse