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.
<script>
window.WTT_API = {
config: {
token: "TU_TOKEN_AQUI"
}
};
</script>
🔷 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 <head>.
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 </head>:
<!-- Configuración del widget de Whaticket -->
<script>
window.WTT_API = {
config: {
// Token generado en la conexión WebChat
token: "TU_TOKEN_AQUI",
// Título visible en la ventana del chat
title: "¡Bienvenido al soporte!",
// Subtítulo visible debajo del título
subtitle: "¿Cómo podemos ayudar?",
// Posición del widget en pantalla
position: "right",
// Mensaje inicial que verá el cliente
initialMessages: ["Hola, ¿cómo podemos ayudarte?"],
// Desactiva el botón flotante nativo
toggleButtonEnabled: false,
// Color del botón nativo, por si luego decides activarlo
toggleButtonBgColor: "#25d366",
// Desactiva el envío de audio desde el widget
isAudioEnabled: false,
// Activa formulario de identificación
requestName: true,
requestEmail: true,
requestNumber: true
}
};
</script>
<!-- Script público del widget -->
<script async crossorigin="*" src="https://public.whaticket.com/widget/production/wtt-widget-default.js"></script>
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 visitante
▪️ requestEmail: true solicita el correo electrónico
▪️ requestNumber: 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:
<script>
window.WTT_API = {
config: {
token: "TU_TOKEN_AQUI",
// Solicita el nombre del visitante
requestName: true,
// Solicita el correo electrónico
requestEmail: true,
// Solicita el número de teléfono
requestNumber: true
}
};
</script>
🔷 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.
<script>
window.WTT_API = {
config: {
token: "TU_TOKEN_AQUI",
// Apaga el botón que trae el widget por defecto
toggleButtonEnabled: false
}
};
</script>
Luego, agrega tu botón personalizado antes del cierre de la etiqueta </body>:
<!-- Botón personalizado para abrir el chat -->
<button id="whaticket-btn" aria-label="Abrir chat">
Entre en contacto
</button>
Y añade el estilo visual:
<style>
/* Estilo del botón personalizado */
#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);
}
/* Clase para ocultar el botón */
#whaticket-btn.hidden {
display: none !important;
}
</style>
Finalmente, configura la apertura del chat al hacer clic:
<script>
document.addEventListener("DOMContentLoaded", function () {
var btn = document.getElementById("whaticket-btn");
btn.addEventListener("click", function () {
// Abre o cierra el widget de Whaticket
if (window.WTT_API && window.WTT_API.toggle) {
window.WTT_API.toggle();
}
});
});
</script>
🔵 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.
<script>
document.addEventListener("DOMContentLoaded", function () {
var btn = document.getElementById("whaticket-btn");
var chatAbierto = false;
// Al hacer clic, abre el chat y oculta el botón
btn.addEventListener("click", function () {
if (window.WTT_API && window.WTT_API.toggle) {
window.WTT_API.toggle();
chatAbierto = true;
btn.classList.add("hidden");
}
});
// Revisa cada medio segundo si el widget sigue visible
setInterval(function () {
if (!chatAbierto) return;
var widget =
document.querySelector("#wtt-widget-container") ||
document.querySelector('[id^="wtt-"]') ||
document.querySelector('iframe[src*="whaticket"]') ||
document.querySelector('iframe[src*="canove"]');
// Si no encuentra el widget, vuelve a mostrar el botón
if (!widget) {
chatAbierto = false;
btn.classList.remove("hidden");
return;
}
var rect = widget.getBoundingClientRect();
var visible =
rect.width > 0 &&
rect.height > 0 &&
getComputedStyle(widget).display !== "none" &&
getComputedStyle(widget).visibility !== "hidden";
// Si el widget ya no está visible, reaparece el botón
if (!visible) {
chatAbierto = false;
btn.classList.remove("hidden");
}
}, 500);
// Evento de respaldo por si el widget dispara cierre nativo
window.addEventListener("wtt:close", function () {
chatAbierto = false;
btn.classList.remove("hidden");
});
});
</script>
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
<script>
window.WTT_API = {
config: {
token: "TU_TOKEN_AQUI",
// Textos visibles
title: "¡Bienvenido al soporte!",
subtitle: "¿Cómo podemos ayudar?",
// Posición del chat
position: "right",
// Mensaje inicial
initialMessages: ["Hola, ¿cómo podemos ayudarte?"],
// Personalización del botón nativo
toggleButtonBgColor: "#25d366",
// Desactiva audios
isAudioEnabled: false
}
};
</script>
🔵 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.
