Web Chat: Conoce los casos de uso disponibles

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.

<!-- Código HTML con comentarios -->

<script>

  // Define el objeto principal del Widget Whaticket

  window.WTT_API = {

    // Sección de configuración del widget

    config: {

      token: "TU_TOKEN_AQUI", // Token de autenticación generado en Whaticket

      title: "¡Bienvenido al soporte!", // Título principal del chat

      subtitle: "¿Cómo podemos ayudarte?", // Subtítulo visible debajo del título

      position: "left", // Posición del botón flotante (left o right)

      initialMessages: ["👋 ¡Hola! ¿Cómo puedo ayudarte?"], // Mensaje automático inicial al cargar el widget

      toggleButtonEnabled: true, // Habilita o desactiva el botón flotante del chat

      toggleButtonBgColor: "#42a5f5", // Define el color del botón flotante (formato HEX)

      isAudioEnabled: false // Habilita o desactiva el envío de mensajes de audio

    }

  };

</script>

<script async crossorigin="*" src="https://public.whaticket.com/widget/staging/wtt-widget-default.js"></script>

🔹 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.

<!-- Código HTML con comentarios -->

<script>

  // Inicializa el Widget con un formulario de identificación previo

  window.WTT_API = {

    config: {

      token: "TU_TOKEN_AQUI", // Token único de autenticación del widget

      title: "Atención al Cliente", // Título visible en la parte superior del chat

      subtitle: "Completa tus datos para iniciar la conversación", // Subtítulo del formulario



      // Campos del formulario de identificación

      requestName: true, // Activa la solicitud de nombre

      requestEmail: true, // Activa la solicitud de correo electrónico

      requestNumber: true // Activa la solicitud de número telefónico

    }

  };

</script>



<script async src="https://public.whaticket.com/widget/staging/wtt-widget-default.js"></script>

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: "[email protected]", // 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 <script>



script.src = "https://public.whaticket.com/widget/staging/wtt-widget-default.js"; // URL del script oficial de Whaticket



script.async = true; // Carga el script de forma asíncrona (no bloquea la página)

document.body.appendChild(script); // Agrega el script al final del <body> para ejecutarlo

Notas técnicas importantes:

externalId debe ser siempre el mismo para un mismo usuario.
Se recomienda usar el ID interno del sistema o el correo electrónico como identificador.
No uses valores aleatorios o temporales.
Este parámetro permite mantener y rastrear el historial completo de conversaciones del usuario

Tabla de referencia rápida:

Guía de personalización:

Ejemplo de personalización con usuario autenticado (comentado):

// Objeto de datos del usuario autenticado

userData: {

  externalId: "user-123", // ID único que identifica al usuario en el sistema

  name: "Juan Pérez", // Nombre que verá el agente en el panel

  email: "[email protected]" // Correo electrónico del usuario

}

Puedes ampliar este objeto con campos como phone, plan, fechaRegistro, o cualquier información adicional relevante.

Referencia completa de la API:

Métodos JavaScript disponibles:

🔹 Abrir o cerrar el Web Chat

<button onclick="window.WTT_API.toggle()">Abrir Chat</button>

window.WTT_API.toggle() → Abre o cierra el Web Chat.
Puede usarse para crear un botón personalizado dentro del sitio.

En resumen:

El Web Chat de Whaticket conecta tu sitio con tu cuenta de atención en tiempo real.
Su instalación es sencilla y puede implementarse en cualquier plataforma.
Permite personalizar diseño, comportamiento y lógica de usuario.
Cuenta con una API flexible para desarrolladores.
Garantiza seguridad mediante dominios permitidos y tokens únicos.

¿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.

¿Quedó resuelta tu pregunta?