Whati Chat (Web Chat): conoce los casos de uso disponibles

El Whati Chat (antes llamado Web Chat) de Whaticket es un chat en tiempo real para hablar con tus clientes desde tu sitio web. Casi todo se configura en la propia conexión, y Whaticket genera el código listo para pegar. En este artículo ves tres configuraciones del código para casos de uso distintos, con comentarios en cada línea.

Antes de empezar

Necesitas una conexión Whati Chat creada en Conexiones. Para editarla, tu perfil necesita el permiso Crear y editar del grupo Conexiones.
En la conexión, abre Editar. En la pestaña Configuración defines Título, Subtítulo, Ícono del botón flotante, Color del Whati Chat, Color de la burbuja, Posición en la pantalla, Mensajes iniciales, Botón flotante, Permitir audio y los campos Pedir nombre, Pedir correo y Pedir teléfono.
En la pestaña Integración agregas los Dominios permitidos y copias el código ya generado con el token. Pégalo antes del cierre de la etiqueta head de tu sitio.
Los ejemplos de abajo sirven si prefieres escribir o ajustar el código a mano. Usa siempre la URL del script que aparece en la pestaña Integración.

Configuración básica: chat anónimo

Chat sin formulario. Ideal para soporte rápido o visitantes que no necesitan identificarse.

Solo necesitas el token.
El visitante inicia el chat sin dar datos y entra como visitante anónimo.

<script>
  // Define el objeto principal del Whati Chat
  window.WTT_API = {
    config: {
      token: "TU_TOKEN_AQUI", // Token del Whati Chat (pestaña Integración)
      title: "¡Bienvenido al soporte!", // Título principal del chat
      subtitle: "¿Cómo podemos ayudarte?", // Subtítulo debajo del título
      position: "left", // Posición en la pantalla: left o right
      initialMessages: ["¡Hola! ¿Cómo puedo ayudarte?"], // Mensajes iniciales
      toggleButtonEnabled: true, // Muestra u oculta el botón flotante
      chatColor: "#42a5f5", // Color del Whati Chat (formato HEX)
      isAudioEnabled: false // Permite o no enviar mensajes de voz
    }
  };
</script>

Configuración con formulario de identificación

Pide nombre, correo y teléfono antes de iniciar el chat. Ideal para capturar leads o dar una atención personalizada.

El formulario muestra los campos que actives.
El agente recibe los datos del visitante automáticamente.

<script>
  // Whati Chat con formulario de identificación previo
  window.WTT_API = {
    config: {
      token: "TU_TOKEN_AQUI", // Token del Whati Chat
      title: "Atención al Cliente", // Título del chat
      subtitle: "Completa tus datos para iniciar la conversación",
      requestName: true, // Pide el nombre
      requestEmail: true, // Pide el correo
      requestNumber: true // Pide el teléfono
    }
  };
</script>

Variaciones posibles:

Solo nombre: requestName: true.
Nombre y correo: requestName: true y requestEmail: true.
Todos los campos: usa los tres parámetros del ejemplo.

También puedes activar estos campos sin tocar el código, en la pestaña Configuración de la conexión.

Configuración para usuario autenticado: identificación automática

Ideal cuando el usuario ya inició sesión en tu sistema o aplicación. El Whati Chat recibe sus datos y no muestra el formulario.

No muestra formulario, porque el usuario ya está identificado.
Permite enviar los datos del perfil y campos personalizados al agente.
Mejora la experiencia y acelera la atención.

// Ejemplo de integración en React/Next.js
// 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 del usuario
  phone: "+595999000000", // Teléfono registrado
  accountType: "Premium", // Tipo de cuenta
  registeredAt: "2024-11-15" // Fecha de alta del cliente
};

window.WTT_API = {
  config: {
    token: "TU_TOKEN_AQUI", // Token del Whati Chat
    title: "Soporte al Cliente",
    subtitle: "Estamos aquí para ayudarte",
    position: "right",
    chatColor: "#8b5cf6",
    // Identificación automática
    userData: {
      externalId: user.id, // ID único para seguir las conversaciones
      name: user.name, // Nombre visible para el agente
      email: user.email,
      number: user.phone, // Teléfono (el parámetro se llama number)
      // Campos personalizados: van dentro de userData
      customFields: [
        { name: "Tipo de cuenta", value: user.accountType },
        { name: "Cliente desde", value: new Date(user.registeredAt).toLocaleDateString() }
      ]
    }
  }
};

// Inserta el script del Whati Chat en la página
const script = document.createElement("script");
script.src = "URL_DEL_SCRIPT"; // Copia la URL del código de la pestaña Integración
script.async = true;
document.body.appendChild(script);

Notas técnicas importantes:

Dentro de userData, el teléfono se envía en number (no en phone) y los customFields van dentro de userData. Fuera de ese objeto, el Whati Chat los ignora.
externalId debe ser siempre el mismo para el mismo usuario.
Usa el ID interno de tu sistema o el correo como identificador.
No uses valores aleatorios ni temporales: externalId es lo que mantiene el historial completo de conversaciones del usuario.
El teléfono enviado en number se guarda como un campo personalizado del contacto, y el contacto se identifica siempre por el externalId.
Opcional: tagIds, dentro de userData, recibe una lista de identificadores de etiquetas para aplicar al contacto.

Referencia de parámetros

Preguntas frecuentes

¿Cómo abro o cierro el chat desde un botón propio?
Usa window.WTT_API.toggle(). Abre o cierra el Whati Chat y sirve para crear un botón personalizado en tu sitio, sobre todo si desactivas el Botón flotante.

¿Por qué el chat no aparece en mi sitio?
Revisa que el dominio del sitio esté en Dominios permitidos, en la pestaña Integración. El Whati Chat solo funciona en los dominios listados.

¿Qué pasa si cambio el token?
Si usas Cambiar token en la pestaña Integración, todos los sitios que usan el token anterior dejan de funcionar hasta que actualices el código.

¿Puedo usar el Whati Chat sin sitio web?
Sí. En la pestaña Whati Link, activa Activar enlace del chat para publicar una página con el chat y usar el enlace en la bio de Instagram, en WhatsApp o en un código QR.