Skip to main content
LibredeskLibredesk
Búsqueda

Chat en vivo

Integra el widget de chat en tu sitio y verifica la identidad de tus usuarios.

Abhinav Raut · Última actualización

El widget de chat en vivo de libredesk se integra en cualquier sitio web mediante una sola etiqueta de script. Los visitantes pueden iniciar conversaciones de forma anónima. También puedes verificar su identidad con un JWT firmado por el servidor para que el widget se cargue con su perfil asociado.

Crear una bandeja de chat en vivo

1. Ve a Administración, Bandejas, Nueva bandeja, Chat en vivo. Completa el nombre, el nombre de la marca y la URL del sitio web.

2. Configura el color y la posición del lanzador, el logotipo, el mensaje de bienvenida y la pantalla de inicio en las pestañas Apariencia y Mensajes. Los cambios se publican en cuanto guardas.

3. Abre la pestaña Instalación y copia el fragmento de script. Pégalo antes de la etiqueta de cierre de body en cada página donde deba aparecer el widget.

Instalar el widget

El fragmento para visitantes anónimos tiene este aspecto.

<script>
  window.LibredeskSettings = {
    baseURL: 'https://support.example.com',
    inboxID: 'YOUR_INBOX_UUID'
  };
</script>
<script async src="https://support.example.com/widget.js"></script>

baseURL es la URL de tu instancia de libredesk. inboxID es el UUID que aparece en la pestaña Instalación de la bandeja. Cualquier visitante de la página podrá abrir el widget. Cada sesión corresponde a un nuevo visitante anónimo, a menos que añadas la verificación de identidad.

Verificación de identidad

Si los usuarios ya han iniciado sesión en tu producto, envía un JWT firmado para que el widget se cargue con su contacto existente en libredesk. Sin él, el widget no puede distinguir a un usuario que regresa de un nuevo visitante en otro dispositivo.

Tu servidor firma un JWT con la clave secreta de la bandeja, configurada en la pestaña Seguridad. La página envía ese JWT al widget como userJWT. libredesk verifica la firma y busca o crea el contacto mediante external_user_id. El algoritmo es HS256. El secreto nunca sale de tu servidor.

{
  "external_user_id": "your_app_user_123",
  "email": "[email protected]",
  "first_name": "John",
  "last_name": "Doe",
  "phone_number": "9876543210",
  "phone_number_country_code": "IN",
  "exp": 1735689600,
  "contact_custom_attributes": {
    "plan": "premium",
    "company": "Acme Inc"
  }
}

Los campos obligatorios son external_user_id (un ID único y estable de tu sistema que permite reconocer a quienes regresan), email, first_name y exp (una marca de tiempo Unix en segundos). Los campos opcionales son last_name, phone_number, phone_number_country_code (ISO 3166-1 alfa-2, por ejemplo IN) y contact_custom_attributes, que se guarda en el registro del contacto al iniciar sesión.

Firma el token en tu servidor.

import jwt, time

payload = {
    "external_user_id": "your_app_user_123",
    "email": "[email protected]",
    "first_name": "John",
    "exp": int(time.time()) + 3600,
}
token = jwt.encode(payload, SECRET, algorithm="HS256")
const jwt = require('jsonwebtoken');

const token = jwt.sign({
  external_user_id: 'your_app_user_123',
  email: '[email protected]',
  first_name: 'John',
  exp: Math.floor(Date.now() / 1000) + 3600,
}, SECRET, { algorithm: 'HS256' });

Nunca incluyas el secreto de la bandeja en el código del cliente. Firma el JWT en tu servidor e insértalo en la página al renderizarla, u obténlo desde un endpoint autenticado.

Después, envíalo al widget.

<script>
  window.LibredeskSettings = {
    baseURL: 'https://support.example.com',
    inboxID: 'YOUR_INBOX_UUID',
    userJWT: 'YOUR_SIGNED_JWT_TOKEN_HERE'
  };
</script>
<script async src="https://support.example.com/widget.js"></script>

API de JavaScript

Cuando el widget se carga, window.Libredesk expone estos métodos.

  • Libredesk.show() - abre el widget
  • Libredesk.hide() - cierra el widget
  • Libredesk.toggle() - alterna entre abierto y cerrado
  • Libredesk.setUser(jwt) - inicia la sesión de un usuario después de cargar la página
  • Libredesk.logout() - borra la sesión y vuelve al modo anónimo
  • Libredesk.onShow(fn) - función que se ejecuta cuando se abre el widget
  • Libredesk.onHide(fn) - función que se ejecuta cuando se cierra el widget
  • Libredesk.onUnreadCountChange(fn) - función que recibe el número de mensajes sin leer

Continuidad de las conversaciones

Los contactos no tienen que permanecer en el chat en vivo. Si se marchan antes de que termine la conversación, libredesk puede enviarles por correo los mensajes que no hayan leído. Las respuestas a ese hilo de correo se añaden a la misma conversación del chat en vivo.

  • offline_threshold - cuánto tiempo deben permanecer desconectados los agentes antes de enviar un correo alternativo, por ejemplo 10m
  • max_messages_per_email - número máximo de mensajes por correo. Los mensajes restantes se envían en otro correo
  • min_email_interval - tiempo mínimo entre correos alternativos de la misma conversación

Seguridad

En la pestaña Seguridad, indica los dominios que pueden integrar el widget. Las solicitudes de otros orígenes se rechazan. Se admiten comodines, por ejemplo example.com, *.example.com o staging.example.com. Si dejas el campo vacío se permitirán todos los orígenes, así que configúralo siempre en producción.

También puedes impedir que direcciones IP o rangos CIDR concretos abran el widget, por ejemplo 192.168.1.0/24, 10.0.0.1 o 2001:db8::/32.

La duración de la sesión controla cuánto tiempo permanece autenticada una sesión del widget antes de que sea necesario verificar de nuevo el JWT. El valor predeterminado es 10h. El formato admite s, m y h.

Was this article helpful?