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" />
              
              <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"
/>

            
Este bloque de código se muestra en una ventana flotante

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' }, }), '*', ), );
              
              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' },
}),
'*',
),
);

            
Este bloque de código se muestra en una ventana flotante

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" />
              
              <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"
/>

            
Este bloque de código se muestra en una ventana flotante

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 () {
  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
  });
});

            
Este bloque de código se muestra en una ventana flotante
Nota: Si la configuración del ID de usuario se activa por parte del usuario final, puedes eliminar el contenedor del evento 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 });
              
              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
});

            
Este bloque de código se muestra en una ventana flotante

Establecer variables personalizadas de la conversación

window.$livedesk.setConversationCustomAttributes({ utm_source: "google", // Ejemplo: UTM a nivel de conversación session_type: "support" });
              
              window.$livedesk.setConversationCustomAttributes({
  utm_source: "google",  // Ejemplo: UTM a nivel de conversación
  session_type: "support"
});

            
Este bloque de código se muestra en una ventana flotante
  • 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 }); });
              
              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
  });
});

            
Este bloque de código se muestra en una ventana flotante
  • 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
              
              window.$livedesk.deleteCustomAttribute("pricing_plan"); // Nombre de la clave del atributo de tipo string

            
Este bloque de código se muestra en una ventana flotante

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

            
Este bloque de código se muestra en una ventana flotante

Mostrar u ocultar la burbuja de chat

window.$livedesk.toggleBubbleVisibility('hide'); // Mostrar/ocultar
              
              window.$livedesk.toggleBubbleVisibility('hide'); // Mostrar/ocultar

            
Este bloque de código se muestra en una ventana flotante

Modo emergente

Abre la interfaz de chat en modo de ventana emergente.

window.$livedesk.popoutChatWindow();
              
              window.$livedesk.popoutChatWindow();

            
Este bloque de código se muestra en una ventana flotante

Establecer el idioma

Establece el idioma del widget.

window.$livedesk.setLocale("en"); // Código de idioma de tipo string, por ejemplo: zh-CN
              
              window.$livedesk.setLocale("en"); // Código de idioma de tipo string, por ejemplo: zh-CN

            
Este bloque de código se muestra en una ventana flotante

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');
              
              window.$livdesk.setLabel('support-ticket'); // Identificador de etiqueta de tipo string
window.$livdesk.removeLabel('support-ticket');

            
Este bloque de código se muestra en una ventana flotante

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

            
Este bloque de código se muestra en una ventana flotante

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); });
Icon Solid Transparent White Qiyu
Contacto