Guía avanzada de uso de Website
El canal Website admite opciones de configuración adicionales a través de la interfaz LiveDesk Widget SDK o mediante el uso de un iframe para satisfacer distintas necesidades de los usuarios.
Configuración relacionada con iframe
Omitir la pantalla de bienvenida
En el modo iframe, los usuarios pueden omitir la pantalla de bienvenida al abrir la burbuja añadiendo el parámetro action=autoStart, que les lleva directamente al cuadro de chat para iniciar una conversación.
<iframe
class="livedesk-widget-iframe"
src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=iTMtGDnzR1tccf3fiikLjL71&action=autoStart" // Sustituye website_token por el valor correspondiente generado tras crear el canal
title="Live desk"
allow="camera;microphone"
/>
Establecer el ID de usuario
Hay disponibles dos métodos de configuración:
Método 1:
Array.from(document.getElementsByTagName('iframe'))
.filter((iframe) => iframe.src && iframe.src.includes('livedesk'))
.forEach((iframe) =>
iframe.contentWindow?.postMessage(
'livedesk-widget:' +
JSON.stringify({
event: 'set-user',
identifier: 'your_user_id',
user: { name: 'Display Name', email: 'user@example.com' },
}),
'*',
),
);
Método 2: añade el parámetro user_id=xxxxx al iframe.
<iframe
class="livedesk-widget-iframe"
src="https://livedesk-stg.engagelab.com/console/livedesk/widget/?website_token=Etsz4XtvqKi7iqbHf8Ma6ZLR&action=autoStart&user_id=5002"
title="LiveDesk"
allow="camera;microphone"
/>
Interfaz LiveDesk Widget SDK
Establecer el ID de usuario y la información del usuario (modo estándar)
window.addEventListener("livedesk:ready", function () {
window.$livedesk.setUserId("ID de usuario único (como user_id)", { // El primer parámetro es el identificador único
email: "user@example.com",
name: "Nombre del usuario",
avatar_url: "https://example.com/avatar.jpg", // Opcional
phone_number: "+1234567890" // Opcional
});
});
window.addEventListener("livedesk:ready", function () {}).
Establecer el ID de usuario y la información del usuario (modo cifrado)
Habilita la autenticación (recomendado): para evitar falsificaciones y garantizar la persistencia de la sesión entre navegadores, habilita HMAC en la configuración (usa SHA256 para generar identifier_hash). Ejemplo (JavaScript):
const crypto = require('crypto');
const key = 'Your HMAC Token'; // Copia desde la configuración de Inbox
const message = 'Unique user ID';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');
// Adjuntar en setUser
window.$livedesk.setUserId("Unique user ID", {
...Other information,
identifier_hash: identifier_hash
});
Establecer variables personalizadas de la conversación
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // Ejemplo: UTM a nivel de conversación
session_type: "support"
});
- Estas variables personalizadas se muestran en
LiveDesk - Conversation - Conversation Info.
Establecer variables personalizadas del usuario
window.addEventListener("livedesk:ready", function () {
window.$livedesk.setCustomAttributes({
pricing_plan: "premium", // key: identificador único predefinido; value: establecer según el tipo (como string)
signup_date: new Date(), // Ejemplo: tipo fecha
account_id: 123 // Ejemplo: tipo numérico
});
});
- Estas variables personalizadas se muestran en
LiveDesk - Conversation - Contact Attributes.
Eliminar atributos de usuario
Elimina el atributo personalizado especificado.
window.$livedesk.deleteCustomAttribute("pricing_plan"); // Nombre de la clave del atributo de tipo string
Alternar el estado de apertura de la burbuja de chat
Alterna el estado abierto/cerrado del widget.
window.$livdesk.toggle();
// Alternar el widget pasando un estado
window.$livedesk.toggle("open"); // Abrir el widget de chat
window.$livedesk.toggle("close"); // Cerrar el widget de chat
Mostrar u ocultar la burbuja de chat
window.$livedesk.toggleBubbleVisibility('hide'); // Mostrar/ocultar
Modo emergente
Abre la interfaz de chat en modo de ventana emergente.
window.$livedesk.popoutChatWindow();
Establecer el idioma
Establece el idioma del widget.
window.$livedesk.setLocale("en"); // Código de idioma de tipo string, por ejemplo: zh-CN
Añadir o eliminar etiquetas
Añade etiquetas a la sesión actual (antes de que comience la conversación). Las etiquetas se aplicarán automáticamente a la conversación.
window.$livdesk.setLabel('support-ticket'); // Identificador de etiqueta de tipo string
window.$livdesk.removeLabel('support-ticket');
Objeto de configuración de LiveDesk Widget
Un objeto global establecido durante la inicialización (antes de cargar el SDK) para personalizar el comportamiento del widget. Defínelo mediante window.livedeskSettings y luego pásalo a window.livedeskSDK.run().
Propiedades del objeto
| Nombre de la propiedad | Tipo | Descripción | Valor por defecto | Ejemplo |
|---|---|---|---|---|
hideMessageBubble |
boolean | Oculta la burbuja de mensajes. | false | true |
showUnreadMessagesDialog |
boolean | Muestra el cuadro de diálogo de mensajes no leídos. | true | false |
position |
string | Posición del widget. | 'right' |
'left' |
locale |
string | Código de idioma predeterminado. | Idioma del panel | 'zh-CN' |
useBrowserLanguage |
boolean | Usa el idioma del navegador (ignora locale). |
false | true |
type |
string | Tipo de widget. | 'standard' |
'expanded_bubble' |
darkMode |
boolean | Habilita el modo oscuro. | false | true |
baseDomain |
string | Dominio base (opcional, para varios dominios). | - | 'example.com' |
launcherTitle |
string | Título del lanzador. | - | 'Support' |
showPopoutButton |
boolean | Muestra el botón de ventana emergente. | true | false |
welcomeTitle |
string | Título de bienvenida. | - | 'Welcome!' |
welcomeDescription |
string | Descripción de bienvenida. | - | 'How can we help you?' |
availableMessage |
string | Mensaje en línea. | - | 'We are online.' |
unavailableMessage |
string | Mensaje fuera de línea. | - | 'We will reply later.' |
enableFileUpload |
boolean | Habilita la carga de archivos. | true | false |
enableEmojiPicker |
boolean | Habilita el selector de emojis. | true | false |
enableEndConversation |
boolean | Habilita el botón para finalizar la conversación. | true | false |
Código de ejemplo
<script>
// 1. Antes de cargar sdk.js, establece primero la configuración global (debe colocarse al principio del script)
window.livedeskSettings = {
// Posición del widget: abajo a la izquierda (por defecto es abajo a la derecha)
position: "left",
// Forzar el idioma a chino simplificado (mostrará chino incluso si el navegador está en inglés)
locale: "zh-CN",
// Detectar automáticamente el idioma del navegador (si quieres priorizar el idioma del navegador del usuario, establece true y elimina el locale anterior)
// useBrowserLanguage: true,
// Tipo de widget: expanded_bubble = burbuja grande (con mensaje de bienvenida), standard = burbuja pequeña clásica
type: "expanded_bubble",
// Modo oscuro (seguir el sistema automáticamente o forzar el modo oscuro)
darkMode: "auto", // Valores opcionales: true | false | "auto"
// Ocultar el icono de la pequeña burbuja de la parte inferior (adecuado para colocarlo en un botón personalizado)
hideMessageBubble: false,
// Ocultar el botón con flecha de "ventana emergente" en la esquina inferior derecha
showPopoutButton: false,
// Título personalizado del lanzador (se muestra en el modo de burbuja grande)
launcherTitle: "Online Support",
// Mensaje de bienvenida (surte efecto en el modo expanded_bubble)
welcomeTitle: "Hello! How can we help you?",
welcomeDescription: "We usually reply within a few minutes.",
// Texto de aviso que se muestra cuando está en línea/fuera de línea
availableMessage: "We are online and ready to assist you at any time",
unavailableMessage: "We are currently offline and will reply as soon as possible during business hours",
// Interruptores de funciones
enableFileUpload: true, // Permitir la carga de archivos
enableEmojiPicker: true, // Permitir el uso de emojis
enableEndConversation: true, // Permitir que los usuarios finalicen la conversación de forma proactiva
// Otras opciones avanzadas (habilítalas según sea necesario)
// showUnreadMessagesDialog: true, // Recordatorio emergente cuando hay mensajes no leídos (por defecto: true)
// baseDomain: "yourcompany.com", // Se utiliza para despliegues multidominio
};
</script>
<!-- 2. Cargar el LiveDesk Widget SDK (sustituye por tu propio dominio y token) -->
<script>
(function(d,t) {
var BASE_URL="https://www.engagelab.com"; // ← Sustituye por tu dirección de LiveDesk
var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=BASE_URL+"/packs/js/sdk.js";
g.defer = true;
g.async = true;
s.parentNode.insertBefore(g,s);
g.onload=function(){
window.livedeskSDK.run({
websiteToken: 'abcdefgh1234567890abcdefgh123456', // ← Sustituye por tu Website Token
baseUrl: BASE_URL
});
}
})(document,"script");
</script>
Detectores de eventos de LiveDesk Widget
| Nombre del evento | Descripción | Ejemplo de listener |
|---|---|---|
livedesk:ready |
Se activa cuando el SDK está completamente cargado y los métodos se pueden llamar con seguridad. | window.addEventListener('livedesk:ready', () => { /* Initialization */ }); |
livedesk:on-message |
Se activa cuando se recibe un mensaje nuevo. | window.addEventListener('livedesk:on-message', (data) => { console.log(data); }); |
livedesk:error |
Se activa cuando se produce un error del SDK (v2.3.0+). | window.addEventListener('livedesk:error', (error) => { console.error(error); }); |










