Cómo personalizar el Whati Chat de Whaticket en Shopify

El Whati Chat (antes Web Chat) es el chat de Whaticket para tu sitio. En una tienda Shopify, permite responder dudas sobre productos, pagos y envíos sin que el cliente salga de la página, y registra los datos del visitante como contacto en Whaticket.

Qué cambia en tu operación

Atiendes a los visitantes de la tienda en tiempo real, desde la misma bandeja de Whaticket.
Los datos del formulario de identificación quedan guardados en el contacto.
Puedes usar un botón con la identidad visual de tu marca para abrir el chat.

Antes de empezar

Una conexión Whati Chat creada en Conexiones. Si todavía no la tienes, haz clic en Agregar Conexión y elige Whati Chat.
Tu perfil necesita el permiso Crear y editar del grupo Conexiones.
Acceso a Editar código del tema en Shopify, para modificar el archivo layout/theme.liquid.

Paso a paso:

Configura la apariencia y el formulario

En Conexiones, haz clic en Editar en tu conexión Whati Chat.
Abre la sección Configuración.
Completa Título, Subtítulo y, si quieres, el Ícono del botón flotante.
Elige el Color del Whati Chat, el Color de la burbuja y la Posición en la pantalla.
En Mensajes iniciales, escribe los mensajes que el visitante ve antes de escribir y presiona Enter en cada uno.
Activa Pedir nombre, Pedir correo y Pedir teléfono para mostrar el formulario de identificación. Sin Pedir nombre, el contacto entra como visitante anónimo.
Activa Permitir audio si quieres que el visitante envíe mensajes de voz.
Haz clic en Guardar.

Para reducir la fricción, pide solo nombre y correo. Si quieres una captación más completa, agrega también el teléfono.

Agrega el dominio de tu tienda y copia el código

En la misma ventana, abre la sección Integración.
En Dominios permitidos, agrega la dirección de tu tienda, por ejemplo https://mitienda.com. Si también usas la dirección de Shopify, agrega https://mitienda.myshopify.com.
Haz clic en Guardar.
En Snippet de código:, haz clic en el ícono de copiar. El código ya trae el token de la conexión y todo lo que configuraste en la sección Configuración.

El Whati Chat solo funciona en los dominios de la lista. Si el dominio de la tienda no está ahí, el chat no carga.

Instala el código en Shopify

En Shopify, entra a Tienda online > Temas.
Haz clic en los tres puntos del tema activo y selecciona Editar código.
En la carpeta layout, abre el archivo theme.liquid.
Pega el código copiado antes del cierre de la etiqueta </head> y guarda.

Abre la tienda y revisa que el Whati Chat aparezca. Envía un mensaje de prueba y confirma que llega a Whaticket.

Crea un botón personalizado

En Whaticket, vuelve a Configuración de la conexión, desactiva Botón flotante y guarda. Sin el botón nativo, el chat se abre con la función WTT_API.toggle().
En Integración, copia el código de nuevo y reemplaza el que pegaste en theme.liquid.
En theme.liquid, agrega tu botón antes del cierre de la etiqueta </body>:

<!-- Botón personalizado para abrir el chat -->
<button id="whaticket-btn" aria-label="Abrir chat">Contáctanos</button>

Agrega el estilo del botón:

<style>
  #whaticket-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    background-color: #25d366;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
  }
  #whaticket-btn.hidden {
    display: none !important;
  }
</style>

Y el script que abre el chat al hacer clic:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var btn = document.getElementById("whaticket-btn");

    // Abre o cierra el Whati Chat
    btn.addEventListener("click", function () {
      if (window.WTT_API && window.WTT_API.toggle) {
        window.WTT_API.toggle();
      }
    });
  });
</script>

Oculta el botón mientras el chat está abierto

Reemplaza el script del paso anterior por este. Revisa cada medio segundo si el Whati Chat está abierto y oculta o muestra el botón.
Guarda theme.liquid y prueba abrir y cerrar el chat en la tienda.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var btn = document.getElementById("whaticket-btn");

    btn.addEventListener("click", function () {
      if (window.WTT_API && window.WTT_API.toggle) {
        window.WTT_API.toggle();
      }
    });

    // Cada medio segundo revisa si el Whati Chat está abierto
    setInterval(function () {
      var frame = document.getElementById("wtt-widget-iframe");
      var abierto = Boolean(frame) && getComputedStyle(frame).display !== "none";
      btn.classList.toggle("hidden", abierto);
    }, 500);
  });
</script>

Propiedades del código

El código copiado de Whaticket trae estas propiedades dentro de window.WTT_API.config. Lo ideal es cambiarlas en la sección Configuración y copiar el código de nuevo.

token: identifica la conexión Whati Chat.
title y subtitle: textos del encabezado del chat.
iconUrl: imagen del botón flotante.
chatColor y bubbleColor: color del chat y de la burbuja.
position: "left" o "right".
initialMessages: lista de mensajes iniciales.
toggleButtonEnabled: muestra u oculta el botón flotante nativo.
isAudioEnabled: permite mensajes de voz.
requestName, requestEmail y requestNumber: campos del formulario de identificación.

Preguntas frecuentes

El Whati Chat no aparece en mi tienda. ¿Qué reviso?
Confirma que el dominio de la tienda está en Dominios permitidos, que el código está antes de </head> en theme.liquid y que el tema editado es el tema activo.

¿Qué pasa si hago clic en Cambiar token?
Se genera un token nuevo y los sitios que usan el código anterior dejan de funcionar. Copia el código de nuevo y actualízalo en Shopify.

Mi código antiguo usa toggleButtonBgColor. ¿Sigue funcionando?
Sí, pero hoy el color se define con chatColor. Para evitar dudas, copia el código actualizado desde la sección Integración.

¿Qué buenas prácticas sigo?
Prueba el chat antes de publicarlo, revisa que el botón no tape otros elementos en el celular, usa textos alineados con tu marca y pide solo los datos que tu proceso comercial necesita.