El Web Chat de Whaticket es un chat en tiempo real que permite comunicarte con tus clientes directamente desde tu sitio web. A continuación verás tres configuraciones listas para copiar y pegar, cada una con comentarios explicativos en cada línea.
Configuración básica:
Chat anónimo sin formulario. Ideal para soporte rápido o visitantes sin identificación.
Características:
- Solo necesitas el token.
- El usuario inicia el chat sin proporcionar datos.
- El nombre se genera automáticamente.
Configuración con formulario completo:
Solicita nombre, correo y teléfono antes de iniciar el chat. Ideal para capturar leads o atención personalizada.
Características:
- Formulario con tres campos obligatorios.
- Captura completa de información del visitante.
- El agente recibe los datos automáticamente.
Variaciones posibles:
- Solo nombre → requestName: true
- Nombre + email → requestName: true, requestEmail: true
- Todos los campos → usa los tres parámetros del ejemplo.
Configuración para usuario logueado — Identificación automática:
Ideal para entornos donde el usuario ya está autenticado (como un sistema o aplicación interna).
El Web Chat detecta la sesión y omite el formulario.
Ventajas:
- No muestra formulario (usuario ya identificado).
- Permite pasar datos completos del perfil.
- Mejora la experiencia y acelera la atención.
- Permite enviar etiquetas o campos personalizados al agente.
// Ejemplo de integración en React/Next.js con comentarios
// Datos del usuario autenticado (obtenidos desde tu sistema)
const user = {
id: "user-12345", // Identificador único del usuario
name: "Juan Pérez", // Nombre completo
email: "juan@empresa.com", // Correo electrónico del usuario
phone: "+595999000000", // Número telefónico registrado
accountType: "Premium", // Tipo de cuenta o plan
registeredAt: "2024-11-15" // Fecha de registro o alta del cliente
};
// Configuración principal del Widget
window.WTT_API = {
config: {
token: "TU_TOKEN_AQUI", // Token generado en Whaticket para esta conexión
title: "Soporte al Cliente", // Título principal visible en el chat
subtitle: "Estamos aquí para ayudarte ", // Subtítulo o mensaje de bienvenida
position: "right", // Posición del botón flotante
toggleButtonBgColor: "#8b5cf6", // Color del botón flotante (HEX)
// Sección de identificación automática
userData: {
externalId: user.id, // ID único usado para rastrear conversaciones
name: user.name, // Nombre visible en el panel del agente
email: user.email, // Correo del usuario
phone: user.phone // Teléfono del usuario
},
// Campos personalizados visibles para los agentes dentro de Whaticket
customFields: [
{ name: "Tipo de cuenta", value: user.accountType }, // Muestra el tipo de plan del cliente
{ name: "Cliente desde", value: new Date(user.registeredAt).toLocaleDateString() } // Muestra la fecha de alta
]
}
};
// Inserta dinámicamente el script del Widget en el documento HTML
const script = document.createElement("script"); // Crea un nuevo elemento