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
});
});
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
});
Establecer "Atributos personalizados de la conversación"
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // Ejemplo: utm a nivel de sesión
session_type: "soporte"
});
- 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
});
});
- 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
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
Mostrar/Ocultar el bubble de chat
window.$livedesk.toggleBubbleVisibility('hide');// mostrar/ocultar
Modo ventana emergente
Abre la interfaz de chat en modo ventana emergente.
window.$livedesk.popoutChatWindow();
Establecer idioma
Configura el idioma del widget
window.$livedesk.setLocale("en");// código string de idioma, ejemplo: zh-CN
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');
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>
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); }); |
