Eventos de Instancia

El widget web de Jelou emite eventos para interactuar con las acciones del usuario.

Objeto Miembro

Aquí está la interfaz del objeto miembro:

/**
 * @typedef Member
 * @property {string} id - id del miembro
 * @property {MemberTypes} memberType - Tipo de dato de miembro
 * @property {string} names - Propiedad del miembro
 * @property {string} socketId - id de socket del miembro
 * @property {number} state - estado del miembro
 * @property {string} type - Tipo de dato de dato
 * @property {string} roomId - id de la sala personal del miembro
 * @property {string} color - color del estilo del miembro
 * @property {string} avatar - imagen del avatar del miembro
 * @property {string} referenceId - id de referencia del miembro
 * @property {string} createdAt - fecha de creación del miembro
 */

Cuando se abre el widget

Se activa cuando el widget se ha abierto:

widgetInstance.on("open", () => {
  // widget open
});

Cuando se cierra el Widget

Se activa cuando el widget se ha cerrado

widgetInstance.on("close", () => {
  // widget cerrado
});

Cuando se Elimina un Miembro

/**
 * @typedef RoomMemberRemove
 * @property {'me' | 'other'} type - ¿es el miembro "yo" o "otro"?
 * @property {string} roomId - id de la sala donde se elimina al miembro
 */

widgetInstance.on("removedFromRoom", (data: RoomMemberRemove): void => {
    // algún código
});

Cuando se Agrega un Miembro

/**
 * @typedef RoomMemberAdd
 * @property {'me' | 'other'} type - ¿es el miembro "yo" o "otro"?
 * @property {string} roomId - id de la sala donde se agrega al miembro
 * @property {Member} socketId - socketId del miembro agregado
 */

widgetInstance.on("addedToRoom", (data: RoomMemberAdd): void => {
    // algún código
});

Cuando se Recibe un Mensaje

/**
 * @typedef By =
 *    'user' | 'bot' | 'operator' | 'company' | 'client';
 */

/**
 * @typedef MessageTypes =
 *    'TEXT' | 'IMAGE' | 'AUDIO' | 'FILE' | 'DOCUMENT'  | 'LOCATION' |
 *    'POSTBACK';
 */

/**
 * @typedef BaseMessage
 * @property {string} type - message type
 * @property {By} by - sender by type
 * @property {string} roomId - room id
 * @property {string} senderId - sender id
 * @property {number} createdAt - date of creation
 * @property {number} timestamp - time of creation
 * @property {Option[]?} options - a list of options, aka button type message
 * @property {string} id - message id
 * @property {MessageStatuses} status - message status
 */

/**
 * @typedef TextMessage extends BaseMessage
 * @property {string} text - message text
 * @property {readonly 'TEXT'} type - message type
 */

/**
 * @typedef PostbackMessage extends BaseMessage
 * @property {string} text - message text
 * @property {Record<string, any>} payload - post back payload
 * @property {readonly 'POSTBACK'} type - message type
 */

/**
 * @typedef ImageMessage extends BaseMessage
 * @property {string} mediaUrl - image url
 * @property {string?} caption - caption for image
 * @property {readonly 'IMAGE'} type - message type
 */

/**
 * @typedef AudioMessage extends BaseMessage
 * @property {string} mediaUrl - audio url
 * @property {string?} duration - duration of the audio
 * @property {readonly 'AUDIO'} type - message type
 */

/**
 * @typedef DocumentMessage extends BaseMessage
 * @property {string} mediaUrl - document url
 * @property {string?} caption - caption for document
 * @property {readonly 'DOCUMENT' | 'FILE'} type - message type
 */

/**
 * @typedef LocationMessage extends BaseMessage
 * @property {Record<string, string>} coordinates - coordinates object
 * @property {string} coordinates.lat - latitude
 * @property {string} coordinates.lng - longitude
 * @property {readonly 'LOCATION'} type - message type
 */

 /**
 * @typedef Message =
 *     TextMessage | ImageMessage | AudioMessage | DocumentMessage |
 *     LocationMessage | PostbackMessage
 */

widgetInstance.on("message", (data: Message): void => {
    // example data text message type
    // {
    //     "text": "jelou",
    //     "type": "TEXT",
    //     "by": "user",
    //     "roomId": "<some-room-id>",
    //     "senderId": "<some-sender-id>",
    //     "createdAt": "2022-02-09T10:34:40-05:00",
    //     "timestamp": 1644420880316,
    //     "id": "<some-message-id>",
    //     "status": "DELIVERED_CHANNEL"
    // }
});

Evento Conectado

/**
 * @typedef CONNECTED
 * @property {string} socket_id - pusher socket id
 */

 widgetInstance.on("connected", (data: CONNECTED): void => {
     // some code
 });

Evento de Cambio de Estado

widgetInstance.on("state_change", (data: STATE_CHANGE): void => {
    // algún código
});

Cuando se Renderiza

Se emite cuando el contenedor del widget se ha renderizado:

widgetInstance.on("onRender", (): void => {
    // algún código
});

Cuando se Realiza una Búsqueda

Se activa cuando el usuario escribe en la barra de búsqueda de contactos:

widgetInstance.on("search", (query) => {
  // query = consulta de búsqueda
});

El tiempo de espera para la búsqueda es de 300 ms.

En mensajes no leídos

El evento se ejecuta cuando el widget está cerrado y recibe nuevos mensajes que aún no han sido leídos.

 widgetInstance.on("newUnreadMessages", (): void => {
     // some code
 });