Guía avanzada para el canal de sitio web

El canal de sitio web admite más configuraciones basadas en la interfaz del SDK de LiveDesk Widget para satisfacer las necesidades de los usuarios.

Interfaz del SDK del Widget de LiveDesk

Establecer Userid e información de usuario (Modo normal)

window.addEventListener("livedesk:ready", function () { window.$livedesk.setUserId("ID único de usuario (por ejemplo, user_id)", { // El primer parámetro es el identificador único email: "usuario@ejemplo.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 único de usuario (por ejemplo, user_id)", {  // El primer parámetro es el identificador único
    email: "usuario@ejemplo.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

Establecer Userid e información de usuario (Modo cifrado)

Habilitar autenticación (recomendado): Para evitar falsificaciones y garantizar persistencia de sesión entre navegadores, activa HMAC en la configuración (usa SHA256 para generar el identifier_hash). Ejemplo (JavaScript):

const crypto = require('crypto'); const key = 'Tu Token HMAC'; // Copia desde la configuración de Inboxes const message = 'ID único de usuario'; const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex'); // Adjunta en setUser window.$livedesk.setUserId("ID único de usuario", { ...otra información, identifier_hash: identifier_hash });
              
              const crypto = require('crypto');
const key = 'Tu Token HMAC';  // Copia desde la configuración de Inboxes
const message = 'ID único de usuario';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');

// Adjunta en setUser
window.$livedesk.setUserId("ID único de usuario", {
  ...otra información,
  identifier_hash: identifier_hash
});

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

Establecer "Atributos personalizados de la conversación"

window.$livedesk.setConversationCustomAttributes({ utm_source: "google", // Ejemplo: utm a nivel de sesión session_type: "soporte" });
              
              window.$livedesk.setConversationCustomAttributes({
  utm_source: "google",  // Ejemplo: utm a nivel de sesión
  session_type: "soporte"
});

            
Este bloque de código se muestra en una ventana flotante
  • Estas variables personalizadas se muestran en Livedesk - Conversación - Información de la conversación.

Establecer "Atributos personalizados de contacto"

window.addEventListener("livedesk:ready", function () { window.$livedesk.setCustomAttributes({ pricing_plan: "premium", // clave: identificador único predefinido, valor: según el tipo (ejemplo: 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",  // clave: identificador único predefinido, valor: según el tipo (ejemplo: 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 - Conversación - Atributos del contacto".

Eliminar atributo de usuario

Elimina el atributo personalizado especificado.

window.$livedesk.deleteCustomAttribute("pricing_plan");//nombre de la clave string del atributo
              
              window.$livedesk.deleteCustomAttribute("pricing_plan");//nombre de la clave string del atributo

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

Abrir/cerrar el bubble de chat

Alterna el estado abierto/cerrado del widget.

window.$livdesk.toggle(); // Alterna estado pasando argumento window.$livedesk.toggle("open"); // Abrir el widget de chat window.$livedesk.toggle("close"); // Cerrar el widget de chat
              
              window.$livdesk.toggle();

// Alterna estado pasando argumento
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/Ocultar el bubble 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 ventana emergente

Abre la interfaz de chat en modo ventana emergente.

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

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

Establecer idioma

Configura el idioma del widget

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

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

Añadir/Eliminar etiquetas

Añade una etiqueta a la conversación actual (antes de que inicie la conversación), la etiqueta se asignará automáticamente

window.$livdesk.setLabel('soporte-ticket');// identificador string de la etiqueta window.$livdesk.removeLabel('soporte-ticket');
              
              window.$livdesk.setLabel('soporte-ticket');// identificador string de la etiqueta
window.$livdesk.removeLabel('soporte-ticket');

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

Objeto de configuración del Widget de Livedesk

Objeto global establecido en la inicialización (antes de cargar el SDK) para personalizar el comportamiento del widget. Defínelo vía window.livedeskSettings y pásalo a window.livedeskSDK.run().

Propiedades del objeto

Nombre Tipo Descripción Valor por defecto Ejemplo
hideMessageBubble booleano Oculta el bubble de mensaje. false true
showUnreadMessagesDialog booleano Muestra 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 por defecto. Idioma del panel 'zh-CN'
useBrowserLanguage booleano Usa el idioma del navegador (omite locale). false true
type string Tipo de widget. 'standard' 'expanded_bubble'
darkMode booleano Activa modo oscuro. false true
baseDomain string Dominio base (opcional, para multidominio). - 'example.com'
launcherTitle string Título del lanzador. - 'Soporte'
showPopoutButton booleano Muestra botón de ventana emergente. true false
welcomeTitle string Título de bienvenida. - '¡Bienvenido!'
welcomeDescription string Descripción de bienvenida. - '¿Cómo podemos ayudarte?'
availableMessage string Mensaje en línea. - 'Estamos en línea.'
unavailableMessage string Mensaje fuera de línea. - 'Responderemos más tarde.'
enableFileUpload booleano Permitir subir archivos. true false
enableEmojiPicker booleano Permitir selector de emojis. true false
enableEndConversation booleano Permitir botón de finalizar conversación. true false

Ejemplo de código

<script> // 1. Establece la configuración global antes de cargar sdk.js (debe colocarse al inicio del script) window.livedeskSettings = { // Posición del widget: esquina inferior izquierda (por defecto es inferior derecha) position: "left", // Forzar idioma chino simplificado (se 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, pon true y elimina locale arriba) // useBrowserLanguage: true, // Tipo de widget: expanded_bubble = burbuja grande (con mensaje de bienvenida), standard = burbuja pequeña clásica type: "expanded_bubble", // Modo oscuro (sigue sistema automáticamente o forza oscuro) darkMode: "auto", // Valores: true | false | "auto" // Ocultar el icono de burbuja pequeño abajo (útil para botones personalizados) hideMessageBubble: false, // Ocultar el botón de "ventana emergente" en la esquina inferior derecha showPopoutButton: false, // Título personalizado del lanzador (visible en modo burbuja expandida) launcherTitle: "Soporte en línea", // Mensaje de bienvenida (solo en modo expanded_bubble) welcomeTitle: "Hola, ¿cómo podemos ayudarte?", welcomeDescription: "Normalmente respondemos en unos minutos~", // Textos mostrados cuando está en línea/fuera de línea availableMessage: "Estamos en línea y listos para ayudarte", unavailableMessage: "Actualmente estamos fuera de línea, responderemos en cuanto sea posible en horario laboral", // Funcionalidades enableFileUpload: true, // Permitir subir archivos enableEmojiPicker: true, // Permitir emojis enableEndConversation: true, // Permitir que usuario finalice la conversación // Otras opciones avanzadas (activar según necesidad) // showUnreadMessagesDialog: true, // Ventana pop-up cuando hay mensajes no leídos (por defecto true) // baseDomain: "tuempresa.com", // Útil para despliegues multidominio }; </script> <!-- 2. Cargar el SDK del Widget de Livedesk (reemplaza con tu dominio y token) --> <script> (function(d,t) { var BASE_URL="https://www.engagelab.com"; // ← Cambia a tu dirección 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', // ← Cambia por tu Website Token baseUrl: BASE_URL }); } })(document,"script"); </script>
              
              <script>
// 1. Establece la configuración global antes de cargar sdk.js (debe colocarse al inicio del script)
window.livedeskSettings = {
  // Posición del widget: esquina inferior izquierda (por defecto es inferior derecha)
  position: "left",

  // Forzar idioma chino simplificado (se 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, pon true y elimina locale arriba)
  // useBrowserLanguage: true,

  // Tipo de widget: expanded_bubble = burbuja grande (con mensaje de bienvenida), standard = burbuja pequeña clásica
  type: "expanded_bubble",

  // Modo oscuro (sigue sistema automáticamente o forza oscuro)
  darkMode: "auto",        // Valores: true | false | "auto"

  // Ocultar el icono de burbuja pequeño abajo (útil para botones personalizados)
  hideMessageBubble: false,

  // Ocultar el botón de "ventana emergente" en la esquina inferior derecha
  showPopoutButton: false,

  // Título personalizado del lanzador (visible en modo burbuja expandida)
  launcherTitle: "Soporte en línea",

  // Mensaje de bienvenida (solo en modo expanded_bubble)
  welcomeTitle: "Hola, ¿cómo podemos ayudarte?",
  welcomeDescription: "Normalmente respondemos en unos minutos~",

  // Textos mostrados cuando está en línea/fuera de línea
  availableMessage: "Estamos en línea y listos para ayudarte",
  unavailableMessage: "Actualmente estamos fuera de línea, responderemos en cuanto sea posible en horario laboral",

  // Funcionalidades
  enableFileUpload: true,       // Permitir subir archivos
  enableEmojiPicker: true,      // Permitir emojis
  enableEndConversation: true,  // Permitir que usuario finalice la conversación

  // Otras opciones avanzadas (activar según necesidad)
  // showUnreadMessagesDialog: true,   // Ventana pop-up cuando hay mensajes no leídos (por defecto true)
  // baseDomain: "tuempresa.com",      // Útil para despliegues multidominio
};

</script>

<!-- 2. Cargar el SDK del Widget de Livedesk (reemplaza con tu dominio y token) -->
<script>
  (function(d,t) {
    var BASE_URL="https://www.engagelab.com";          // ← Cambia a tu dirección 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',  // ← Cambia por tu Website Token
        baseUrl: BASE_URL
      });
    }
  })(document,"script");
</script>

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

Escucha de eventos del Widget de Livedesk

Nombre del evento Descripción Ejemplo de escucha
livedesk:ready SDK completamente cargado, seguro llamar métodos. window.addEventListener('livedesk:ready', () => { /* Inicialización */ });
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 ocurre un error en el SDK (v2.3.0+). window.addEventListener('livedesk:error', (error) => { console.error(error); });
Icon Solid Transparent White Qiyu
Contacto