WhatsApp Flotante en Shopify: Tutorial Paso a Paso 2026

{% schema %}
{
  "name": "Botón Flotante Asesor",
  "settings": [
    {
      "type": "header",
      "content": "Contenido Principal"
    },
    {
      "type": "text",
      "id": "phone_number",
      "label": "Número de WhatsApp",
      "default": "573112167782",
      "info": "Incluye el código de país sin el símbolo +"
    },
    {
      "type": "textarea",
      "id": "prefilled_message",
      "label": "Mensaje predeterminado",
      "default": "Hola, estoy interesada en..."
    },
    {
      "type": "checkbox",
      "id": "append_page_context",
      "label": "Agregar contexto de página al mensaje",
      "info": "Incluye el nombre y URL del producto/página en el mensaje de WhatsApp",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "advisor_image",
      "label": "Foto del Asesor"
    },
    {
      "type": "text",
      "id": "text_bubble",
      "label": "Texto del Globo",
      "default": "Hola 👋, ¿te ayudo?"
    },
    {
      "type": "checkbox",
      "id": "dismissible_bubble",
      "label": "Permitir cerrar el globo",
      "info": "Muestra una X para que el usuario pueda cerrar el globo (se recuerda por sesión)",
      "default": true
    },
    {
      "type": "header",
      "content": "Diseño y Colores"
    },
    {
      "type": "color",
      "id": "color_bubble_bg",
      "label": "Fondo del Globo",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "color_bubble_text",
      "label": "Texto del Globo",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "color_badge_bg",
      "label": "Fondo del Icono de WhatsApp",
      "default": "#25D366"
    },
    {
      "type": "color",
      "id": "color_badge_icon",
      "label": "Color del Icono de WhatsApp",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Posición y Tamaño"
    },
    {
      "type": "select",
      "id": "position",
      "label": "Posición en pantalla",
      "options": [
        { "value": "left", "label": "Izquierda" },
        { "value": "right", "label": "Derecha" }
      ],
      "default": "right"
    },
    {
      "type": "range",
      "id": "button_size",
      "min": 40,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Tamaño del botón",
      "default": 65
    },
    {
      "type": "range",
      "id": "bottom_offset",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Distancia desde abajo (desktop)",
      "default": 25
    },
    {
      "type": "range",
      "id": "bottom_offset_mobile",
      "min": 10,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Distancia desde abajo (móvil)",
      "info": "Aumenta este valor si tienes un botón sticky de 'Agregar al carrito'",
      "default": 20
    },
    {
      "type": "checkbox",
      "id": "enable_pulse",
      "label": "Activar animación de pulso",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_on_mobile",
      "label": "Mostrar texto en móviles",
      "default": true
    },
    {
      "type": "header",
      "content": "Comportamiento Avanzado"
    },
    {
      "type": "select",
      "id": "bubble_trigger",
      "label": "Cuándo mostrar el globo",
      "options": [
        { "value": "immediate", "label": "Inmediatamente (1s)" },
        { "value": "scroll", "label": "Después de hacer scroll" },
        { "value": "delay", "label": "Después de 10 segundos" },
        { "value": "exit", "label": "Al intentar salir (exit intent)" }
      ],
      "default": "scroll"
    },
    {
      "type": "checkbox",
      "id": "hide_on_scroll_down",
      "label": "Ocultar al hacer scroll hacia abajo",
      "info": "Mejora la experiencia de lectura en móvil",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_tracking",
      "label": "Activar tracking de clics",
      "info": "Envía eventos a Google Analytics (gtag) y Meta Pixel (fbq) si están instalados",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Botón Flotante Asesor"
    }
  ]
}
{% endschema %}
<style>
  /* Variables dinámicas desde Shopify */
  .ws-container-{{ section.id }} {
    --ws-bottom: {{ section.settings.bottom_offset }}px;
    --ws-bottom-mobile: {{ section.settings.bottom_offset_mobile }}px;
    --ws-size: {{ section.settings.button_size }}px;
    --ws-bubble-bg: {{ section.settings.color_bubble_bg }};
    --ws-bubble-text: {{ section.settings.color_bubble_text }};
    --ws-badge-bg: {{ section.settings.color_badge_bg }};
    --ws-badge-icon: {{ section.settings.color_badge_icon }};
  }
  /* Contenedor Principal */
  .ws-container-{{ section.id }} .whatsapp-sticky-container {
  position: fixed;
  bottom: var(--ws-bottom);
  z-index: 99;
  display: flex;
  align-items: center;
  font-family: "Rethink Sans", sans-serif;
  opacity: 0;
  transform: translateY(50px);
  animation: slideInUp 0.5s ease-out 0.3s forwards;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Estado oculto al hacer scroll down */
.ws-container-{{ section.id }} .whatsapp-sticky-container.ws-hidden {
  transform: translateY(200px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
}
@media (max-width: 768px) {
  .ws-container-{{ section.id }} .whatsapp-sticky-container.ws-hidden {
    transform: translateY(calc(100% + var(--ws-bottom-mobile) + 20px));
  }
}
  /* Posicionamiento IZQUIERDA */
  .ws-container-{{ section.id }} .ws-pos-left { 
    left: 25px; 
    flex-direction: row; 
  }
  
  /* Posicionamiento DERECHA */
  .ws-container-{{ section.id }} .ws-pos-right { 
    right: 25px; 
    flex-direction: row-reverse; 
  }
  .ws-container-{{ section.id }} .whatsapp-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
  }
  /* Hereda la dirección del contenedor padre */
  .ws-container-{{ section.id }} .ws-pos-left .whatsapp-link {
    flex-direction: row;
  }
  
  .ws-container-{{ section.id }} .ws-pos-right .whatsapp-link {
    flex-direction: row-reverse;
  }
  /* Círculo de la Foto (El Asesor) */
  .ws-container-{{ section.id }} .whatsapp-button {
    width: var(--ws-size);
    height: var(--ws-size);
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform 0.3s ease;
    position: relative;
    border: 2px solid #ffffff;
    flex-shrink: 0;
  }
  /* Pulso optimizado con pseudo-elemento (usa transform en lugar de box-shadow) */
  {% if section.settings.enable_pulse %}
  .ws-container-{{ section.id }} .whatsapp-button::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background-color: var(--ws-badge-bg);
    z-index: -1;
    animation: pulse-{{ section.id }} 2s infinite;
    will-change: transform, opacity;
  }
  {% endif %}
  /* Imagen específica del asesor */
  .ws-container-{{ section.id }} .advisor-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }
  /* BADGE: El icono de WhatsApp */
  .ws-container-{{ section.id }} .whatsapp-badge {
    position: absolute;
    bottom: -2px;
    right: -5px;
    width: calc(var(--ws-size) * 0.4);
    height: calc(var(--ws-size) * 0.4);
    min-width: 20px;
    min-height: 20px;
    background-color: var(--ws-badge-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  /* Icono SVG dentro del badge */
  .ws-container-{{ section.id }} .whatsapp-badge svg {
    width: 55%;
    height: 55%;
    display: block;
    fill: var(--ws-badge-icon);
  }
  /* Efecto Hover */
  .ws-container-{{ section.id }} .whatsapp-link:hover .whatsapp-button {
    transform: scale(1.1);
  }
  .ws-container-{{ section.id }} .whatsapp-link:hover .whatsapp-button::before {
    animation: none;
  }
  /* Feedback táctil en móvil */
  .ws-container-{{ section.id }} .whatsapp-link:active .whatsapp-button {
    transform: scale(0.95);
    transition: transform 0.1s ease;
  }
  /* Estado de foco para accesibilidad */
  .ws-container-{{ section.id }} .whatsapp-link:focus-visible {
    outline: none;
  }
  .ws-container-{{ section.id }} .whatsapp-link:focus-visible .whatsapp-button {
    outline: 3px solid var(--ws-badge-bg);
    outline-offset: 4px;
  }
  /* Globo de Texto */
  .ws-container-{{ section.id }} .whatsapp-text-bubble {
    background-color: var(--ws-bubble-bg);
    color: var(--ws-bubble-text);
    padding: 9px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    max-width: 200px;
    line-height: 1.3;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    margin: 0 15px;
    position: relative;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* Globo visible (se activa por JS según el trigger) */
  .ws-container-{{ section.id }} .whatsapp-text-bubble.ws-bubble-visible {
    opacity: 1;
    transform: translateX(0);
  }
  /* Globo cerrado por el usuario */
  .ws-container-{{ section.id }} .whatsapp-text-bubble.ws-bubble-dismissed {
    display: none;
  }
  /* Botón de cerrar el globo */
  .ws-container-{{ section.id }} .ws-bubble-close {
    background: none;
    border: none;
    color: var(--ws-bubble-text);
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
  }
  .ws-container-{{ section.id }} .ws-bubble-close:hover {
    opacity: 1;
  }
  /* Flechas del globo según posición */
  .ws-container-{{ section.id }} .ws-pos-left .whatsapp-text-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -12px;
    border: 6px solid transparent;
    border-right-color: var(--ws-bubble-bg);
    transform: translateY(-50%);
  }
  .ws-container-{{ section.id }} .ws-pos-right .whatsapp-text-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    border: 6px solid transparent;
    border-left-color: var(--ws-bubble-bg);
    transform: translateY(-50%);
  }
  /* Animaciones Dinámicas */
  {% if section.settings.enable_pulse %}
  @keyframes pulse-{{ section.id }} {
    0% { 
      transform: scale(1); 
      opacity: 0.5; 
    }
    100% { 
      transform: scale(1.4); 
      opacity: 0; 
    }
  }
  {% endif %}
  @keyframes slideInUp {
  from { 
    transform: translateY(50px); 
    opacity: 0; 
  }
  to { 
    transform: translateY(0); 
    opacity: 1; 
  }
}
  /* Respeta las preferencias del usuario de reducir movimiento */
  @media (prefers-reduced-motion: reduce) {
    .ws-container-{{ section.id }} .whatsapp-sticky-container,
    .ws-container-{{ section.id }} .whatsapp-button::before,
    .ws-container-{{ section.id }} .whatsapp-text-bubble {
      animation: none !important;
      transition: opacity 0.2s ease !important;
    }
    
    .ws-container-{{ section.id }} .whatsapp-text-bubble.ws-bubble-visible {
      transform: none;
    }
  }
  /* Mobile Responsive */
  @media (max-width: 768px) {
    .ws-container-{{ section.id }} .whatsapp-button { 
      width: calc(var(--ws-size) * 0.85); 
      height: calc(var(--ws-size) * 0.85); 
    }
    .ws-container-{{ section.id }} .whatsapp-sticky-container { 
      bottom: var(--ws-bottom-mobile); 
    }
    .ws-container-{{ section.id }} .ws-pos-left { left: 20px; }
    .ws-container-{{ section.id }} .ws-pos-right { right: 20px; }
    
    {% unless section.settings.show_on_mobile %}
      .ws-container-{{ section.id }} .whatsapp-text-bubble { display: none; }
    {% endunless %}
  }
</style>
{%- liquid
  assign base_message = section.settings.prefilled_message
  assign encoded_message = base_message | url_encode
  if section.settings.append_page_context
    if template contains 'product'
      assign context_text = product.title | append: ' - ' | append: shop.url | append: product.url
      assign encoded_message = base_message | append: ' ' | append: context_text | url_encode
    elsif template contains 'collection'
      assign context_text = collection.title | append: ' - ' | append: shop.url | append: collection.url
      assign encoded_message = base_message | append: ' ' | append: context_text | url_encode
    endif
  endif
  assign whatsapp_url = 'https://wa.me/' | append: section.settings.phone_number | replace: '+', '' | replace: ' ', '' | append: '?text=' | append: encoded_message
-%}
<div class="ws-container-{{ section.id }}" 
     data-bubble-trigger="{{ section.settings.bubble_trigger }}"
     data-hide-on-scroll="{{ section.settings.hide_on_scroll_down }}"
     data-dismissible="{{ section.settings.dismissible_bubble }}"
     data-tracking="{{ section.settings.enable_tracking }}"
     data-section-id="{{ section.id }}">
  <div class="whatsapp-sticky-container ws-pos-{{ section.settings.position }}">
    <a href="{{ whatsapp_url }}" 
       target="_blank" 
       rel="noopener noreferrer"
       class="whatsapp-link" 
       aria-label="Hablar con un asesor por WhatsApp">
      
      <div class="whatsapp-button">
        {% if section.settings.advisor_image %}
          <img src="{{ section.settings.advisor_image | image_url: width: 150 }}"
               srcset="{{ section.settings.advisor_image | image_url: width: 100 }} 1x,
                       {{ section.settings.advisor_image | image_url: width: 200 }} 2x"
               alt=""
               class="advisor-img" 
               width="{{ section.settings.button_size }}" 
               height="{{ section.settings.button_size }}"
               loading="lazy"
               decoding="async">
        {% else %}
          {{ 'image' | placeholder_svg_tag: 'advisor-img' }}
        {% endif %}
        <div class="whatsapp-badge" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <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.288.173-1.412-.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>
        </div>
      </div>
      {% if section.settings.text_bubble != blank %}
        <div class="whatsapp-text-bubble" role="status">
          <span>{{ section.settings.text_bubble }}</span>
          {% if section.settings.dismissible_bubble %}
            <button type="button" 
                    class="ws-bubble-close" 
                    aria-label="Cerrar mensaje"
                    onclick="event.preventDefault(); event.stopPropagation(); this.closest('.whatsapp-text-bubble').classList.add('ws-bubble-dismissed'); try { sessionStorage.setItem('ws-dismissed-{{ section.id }}', '1'); } catch(e) {}">
              &times;
            </button>
          {% endif %}
        </div>
      {% endif %}
    </a>
  </div>
</div>
<script>
  (function() {
    var container = document.querySelector('.ws-container-{{ section.id }}');
    if (!container) return;
    console.log(
      '%c◉ Botón Flotante Asesor %cpor Orbit%c\n%chttps://orbitlabco.com',
      'background:#25D366;color:#fff;padding:4px 8px;border-radius:4px 0 0 4px;font-weight:bold;',
      'background:#000;color:#fff;padding:4px 8px;border-radius:0 4px 4px 0;font-weight:bold;',
      '',
      'color:#666;font-size:11px;'
    );
    var stickyContainer = container.querySelector('.whatsapp-sticky-container');
    var bubble = container.querySelector('.whatsapp-text-bubble');
    var link = container.querySelector('.whatsapp-link');
    var sectionId = container.dataset.sectionId;
    var trigger = container.dataset.bubbleTrigger;
    var hideOnScroll = container.dataset.hideOnScroll === 'true';
    var isDismissible = container.dataset.dismissible === 'true';
    var trackingEnabled = container.dataset.tracking === 'true';
    var wasDismissed = false;
    try {
      wasDismissed = sessionStorage.getItem('ws-dismissed-' + sectionId) === '1';
    } catch(e) {}
    if (bubble && wasDismissed) {
      bubble.classList.add('ws-bubble-dismissed');
    }
    function showBubble() {
      if (bubble && !wasDismissed && !bubble.classList.contains('ws-bubble-visible')) {
        bubble.classList.add('ws-bubble-visible');
      }
    }
    if (bubble && !wasDismissed) {
      if (trigger === 'immediate') {
        setTimeout(showBubble, 1000);
      } else if (trigger === 'delay') {
        setTimeout(showBubble, 10000);
      } else if (trigger === 'scroll') {
        var scrollHandler = function() {
          var scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
          if (scrollPercent > 20 || window.scrollY > 400) {
            showBubble();
            window.removeEventListener('scroll', scrollHandler);
          }
        };
        window.addEventListener('scroll', scrollHandler, { passive: true });
      } else if (trigger === 'exit') {
        var exitHandler = function(e) {
          if (e.clientY < 10) {
            showBubble();
            document.removeEventListener('mouseleave', exitHandler);
          }
        };
        document.addEventListener('mouseleave', exitHandler);
        setTimeout(showBubble, 15000);
      }
    }
    if (hideOnScroll) {
      var lastScrollY = window.scrollY;
      var ticking = false;
      var scrollThreshold = 5;
      var handleScroll = function() {
        var currentScrollY = window.scrollY;
        var scrollDelta = currentScrollY - lastScrollY;
        if (Math.abs(scrollDelta) < scrollThreshold) {
          ticking = false;
          return;
        }
        var scrollingDown = scrollDelta > 0;
        var pastInitialScroll = currentScrollY > 200;
        if (scrollingDown && pastInitialScroll) {
          stickyContainer.classList.add('ws-hidden');
        } else if (!scrollingDown) {
          stickyContainer.classList.remove('ws-hidden');
        }
        lastScrollY = currentScrollY;
        ticking = false;
      };
      window.addEventListener('scroll', function() {
        if (!ticking) {
          window.requestAnimationFrame(handleScroll);
          ticking = true;
        }
      }, { passive: true });
    }
    if (trackingEnabled && link) {
      link.addEventListener('click', function() {
        var eventData = {
          location: window.location.pathname,
          section_id: sectionId
        };
        if (typeof window.gtag === 'function') {
          window.gtag('event', 'whatsapp_click', eventData);
        }
        if (typeof window.fbq === 'function') {
          window.fbq('track', 'Contact', { method: 'WhatsApp' });
        }
        if (window.ShopifyAnalytics && window.ShopifyAnalytics.lib) {
          try {
            window.ShopifyAnalytics.lib.track('WhatsApp Click', eventData);
          } catch(e) {}
        }
      });
    }
  })();
</script>