En esta guía aprenderás cómo instalar el widget Web Chat de Whaticket en Shopify, cómo configurar el formulario de identificación, cómo crear un botón personalizado para abrir el chat.
¿Qué es Whaticket y por qué usar el widget de chat en Shopify?
Dentro de sus funcionalidades en Whaticketz se encuentra el canal Web Chat, diseñado para integrar un chat directamente en el sitio web de tu empresa.
Implementar el widget en una tienda Shopify permite atender consultas en tiempo real sin que el cliente tenga que abandonar la página. Esto mejora la experiencia de navegación, facilita la resolución de dudas sobre productos, pagos, envíos y soporte, y además permite registrar automáticamente la información del visitante dentro de Whaticket mediante el formulario de identificación.
Pré-requisitos:
Antes de comenzar con la configuración, verifica que cuentas con lo siguiente:
Una cuenta activa en Whaticket
Acceso administrativo al panel de Whaticket
Acceso al código del tema de Shopify
Una conexión de tipo WebChat ya creada dentro de Whaticket
El token correcto de esa conexión
Permisos para editar el archivo layout/theme.liquid
Cómo obtener el token correcto:
Para que el widget funcione correctamente dentro de Shopify, es necesario utilizar el token generado por la conexión Web Chat. Este token es el encargado de autenticar la integración entre tu sitio web y Whaticket.
Sigue estos pasos para obtenerlo:
Ingresa al panel de Whaticket
Dirígete al menú Conexiones
Selecciona la conexión Web Chat que deseas utilizar
Haz clic en Editar
Ubica la sección Code Snippet
Copia el token generado
El token aparecerá dentro del objeto de configuración window.WTT_API, específicamente en la propiedad token.
Recomendación importante: utiliza siempre el token de la conexión Web Chat correcta. Si colocas un token incorrecto o desactualizado, el widget podría no cargar o conectarse a una instancia equivocada.
Instalando el widget en Shopify
Una vez que tienes el token, el siguiente paso es instalar el widget dentro del tema de Shopify. La integración debe realizarse dentro del archivo layout/theme.liquid, específicamente en la sección .
Sigue esta ruta dentro de Shopify:
Ingresa a Tienda Online
Abre la sección Temas
Haz clic en los tres puntos del tema activo
Selecciona Editar código
Busca la carpeta layout
Abre el archivo theme.liquid
Dentro de este archivo, pega el siguiente código antes del cierre de la etiqueta :
Este código configura el widget con título, subtítulo, posición, mensaje inicial, color del botón, formulario de identificación y demás opciones de personalización.
Activando el formulario de identificación
Una funcionalidad muy útil del Web Chat es la posibilidad de solicitar datos al visitante antes de iniciar la conversación. Para ello se utilizan tres propiedades principales: requestName, requestEmail y requestNumber.
Cada una cumple la siguiente función:
requestName: true solicita el nombre del visitanterequestEmail: true solicita el correo electrónicorequestNumber: true solicita el número telefónico
Cuando el usuario completa esta información, los datos se almacenan automáticamente dentro de Whaticket como parte del contacto. Esto permite organizar mejor tu base de clientes y centralizar toda la información comercial.
Ejemplo comentado:
Recomendación: si buscas reducir fricción en el proceso de contacto, puedes solicitar únicamente nombre y correo electrónico. Si deseas una captación más completa, activa también el número telefónico.
Creando un botón personalizado
Muchos negocios prefieren reemplazar el botón flotante predeterminado del widget por uno personalizado, adaptado a la identidad visual de su marca. Para lograrlo, primero debes desactivar el botón nativo del widget con la propiedad toggleButtonEnabled: false.
Luego, agrega tu botón personalizado antes del cierre de la etiqueta :
Y añade el estilo visual:
Finalmente, configura la apertura del chat al hacer clic:
Cómo ocultar el botón cuando el chat está abierto
Para mejorar la experiencia visual, puedes hacer que el botón personalizado desaparezca cuando el chat esté abierto y vuelva a mostrarse al cerrarlo. Esto se logra utilizando setInterval, una variable de estado y un evento de respaldo.
Esta lógica permite mantener la interfaz más limpia y evitar que el botón permanezca visible mientras el chat ya está desplegado.
Personalizaciones disponibles
A continuación, algunas de las propiedades más utilizadas para personalizar el Web Chat:
PropiedadQué haceEjemplo
title
Define el título principal del chat
"¡Bienvenido al soporte!"
subtitle
Muestra un texto secundario debajo del título
"¿Cómo podemos ayudar?"
position
Define el lado de la pantalla donde aparece el widget
"right"
toggleButtonBgColor
Cambia el color del botón nativo del widget
"#25d366"
initialMessages
Muestra uno o más mensajes automáticos al iniciar
["Hola, ¿cómo podemos ayudarte?"]
isAudioEnabled
Activa o desactiva el envío de audio
false
Conclusión — Resumen y buenas prácticas
Personalizar el Web Chat de Whaticket en Shopify es un proceso sencillo cuando se realiza paso a paso. Primero debes obtener el token correcto, luego instalar el script dentro de theme.liquid, activar el formulario de identificación, personalizar el botón de apertura y finalmente ajustar su comportamiento visual.
Para obtener mejores resultados, ten en cuenta estas recomendaciones:
Prueba siempre el widget antes de publicarlo en producción
Verifica que el botón no interfiera con otros elementos en dispositivos móviles
Utiliza textos alineados con la identidad de tu marca
Solicita únicamente la información necesaria para tu proceso comercial
Confirma que los contactos se registren correctamente en Whaticket
Documenta cualquier cambio realizado en el código para futuras modificaciones
¿Tienes dudas adicionales? No te preocupes, estamos aquí para ayudarte. Entra en contacto con nuestro equipo presionando el botón de "Soporte" ubicado en el menú izquierdo de nuestra plataforma.
