El SDK web sin interfaz gráfica proporciona eventos que puedes escuchar para controlar acciones o actualizaciones específicas en tu aplicación.
const handleReady = () => {
console.log("**** client is ready")
}
client.on("ready", handleReady)
// client.off("ready", handleReady)
Eventos generales
Los siguientes son eventos generales del SDK
ready
Se emite cuando el cliente está listo para la comunicación.
client.on("ready", () => {
})
authenticated
Se emite cuando el cliente se autenticó con el token del usuario.
client.on("authenticated", () => {
})
Todos los eventos disponibles
El SDK proporciona varios eventos que puedes escuchar para controlar acciones o actualizaciones específicas dentro de tu aplicación.
Puedes agregar y quitar objetos de escucha de eventos con los métodos .on y .off.
const handleReady = () => {
console.log(" client is ready")
}
client.on("ready", handleReady)
// client.off("ready", handleReady)
Esta es una lista completa de todos los eventos disponibles:
Eventos globales
| Nombre del evento | Descripción |
|---|---|
ready |
Se emite cuando el cliente está listo para la comunicación |
Eventos obsoletos
El SDK sigue emitiendo los siguientes eventos para mantener la retrocompatibilidad. No los uses en integraciones nuevas.
| Nombre del evento | Descripción | Orientación |
|---|---|---|
authenticated |
Se emite cuando el cliente se autenticó con el token del usuario | Obsoleto y programado para su eliminación. Las integraciones existentes pueden seguir recibiéndolo hasta que se quite. |
chat.connected |
Se emite cuando el chat se conecta con el proveedor. | Obsoleto. Usa chat.connectedMessages, que también proporciona la carga útil de los mensajes iniciales. |
Eventos de chat
| Nombre del evento | Descripción |
|---|---|
chat.ongoing |
Se emite cuando hay un chat en curso. |
chat.updated |
Se emite cuando se actualiza la instancia de chat. |
chat.message |
Se emite cuando hay un mensaje nuevo. |
chat.memberJoined |
Se emite cuando un miembro nuevo se une a la conversación. |
chat.memberLeft |
Se emite cuando un miembro abandona la conversación. |
chat.typingStarted |
Se emite cuando un miembro comienza a escribir. |
chat.typingEnded |
Se emite cuando un miembro termina de escribir. |
chat.connectedMessages |
Se emite cuando el SDK se conecta a una conversación con el proveedor. |
chat.disconnected |
Se emite cuando el chat se desconecta del proveedor. |
chat.dismissed |
Se emite cuando el estado del chat cambia a dismissed. |
chat.timeout |
Se emite cuando el chat finaliza debido a un "tiempo de espera". |
chat.ended |
Se emite cuando finaliza el chat. |
chat.destroyed |
Se emite cuando se llama a destroyChat. |
chat.checkInRequested |
Se emite cuando se puede registrar el chat. |
chat.checkInTimedOut |
Se emite cuando se agota el tiempo de espera de la confirmación de chat |
Eventos de navegación conjunta
| Nombre del evento | Descripción |
|---|---|
cobrowse.request |
Se emite cuando el usuario final o el agente solicitan la navegación conjunta |
cobrowse.loaded |
Se emite cuando se carga la sesión de navegación compartida |
cobrowse.updated |
Se emite cuando se actualiza la sesión de navegación compartida |
cobrowse.ended |
Se emite cuando finaliza la sesión de navegación compartida. |
Ejemplos de uso
client.on("ready", () => {
// Client is ready
})
client.on("chat.message", message => {
console.log(message)
})
client.on("chat.connectedMessages", async ({ chat, messages }) => {
// Handle chat and messages
})
client.on("cobrowse.request", ({ from }) => {
console.log("Cobrowse requested by", from)
})
Configuración de datos personalizados
La opción custom_data te permite pasar datos arbitrarios de pares clave-valor al SDK
web.
Uso
Puedes proporcionar datos personalizados como un objeto (sin firma) o una cadena (con firma) cuando creas un chat:
interface ChatRequest {
lang?: string;
trigger_id?: string;
ticket_id?: string;
email?: string;
greeting?: string;
cobrowsable?: boolean;
custom_data?: {
signed?: string;
unsigned?: Record<string, any>;
};
}
Ejemplo
Consulta el siguiente ejemplo:
const custom_data = {
unsigned: {
version: {
label: 'Version',
value: '1.0.0'
}
},
signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}
try {
const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
// handle error
}
Transferencia de chatbot externo
En algunos casos, es posible que quieras mantener el historial y las interacciones
de otros proveedores de chat. Para ello, puedes usar custom_data object.
Consulta el siguiente ejemplo:
cconst custom_data = {
unsigned: {
external_chat_transfer: {
greeting_override: "Please hold while we connect you with a human agent.",
agent: {
name: "Agent Name",
avatar: "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
},
transcript: [
{
sender: "agent",
timestamp: "2021-03-15 12:00:00Z",
content: [
{
type: "text",
text: "Hello! How can I help you today?"
},
{
type: "buttons",
buttons: [
{
label: "Create New Order",
selected: false
},
{
label: "Check Order Status",
selected: true
},
{
label: "Check Account Balance",
selected: false
},
]
}
]
},
{
sender: "end_user",
timestamp: "2021-03-15 12:00:15Z",
content: [
{
type: "text",
text: "Check Order Status"
}
]
},
{
sender: "agent",
timestamp: "2021-03-15 12:00:16Z",
content: [
{
type: "text",
text: "I can help you with that, what's your order number?"
}
]
},
{
sender: "end_user",
timestamp: "2021-03-15 12:00:20Z",
content: [
{
type: "media",
media: {
type: "image",
url: "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
}
}
]
}
]
}
},
signed: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // JWT or other signed payload
}
try {
const chat: Chat = await client.createChat(123, { custom_data })
} catch (error) {
// handle error
}