Instance Events

Member object

here is the interface of member object

/**
 * @typedef Member
 * @property {string} id - member id
 * @property {MemberTypes} memberType - member type
 * @property {string} names - member name
 * @property {string} socketId - member socket id
 * @property {number} state - member state 
 * @property {string} type - data type
 * @property {string} roomId - member personal room id
 * @property {string} color - member style color
 * @property {string} avatar - member avatar image
 * @property {string} referenceId - member reference id
 * @property {string} createdAt - member creation date
 */

On Widget Open

Triggers when the widget has been opened

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

On Widget Close

Triggers when the widget has been closed

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

On Member Remove

/**
 * @typedef RoomMemberRemove
 * @property {'me' | 'other'} type - is member me or other
 * @property {string} roomId - room id where member is removed
 */
 
widgetInstance.on("removedFromRoom", (data: RoomMemberRemove): void => {
    // some code
});

On Member Add

/**
 * @typedef RoomMemberAdd
 * @property {'me' | 'other'} type - is member me or other
 * @property {string} roomId - room id where member is added
 * @property {Member} socketId - added member socketId
 */

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

On Message

/**
 * @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"
    // }
});

On Connected Event

/**
 * @typedef CONNECTED
 * @property {string} socket_id - pusher socket id
 */
 
 widgetInstance.on("connected", (data: CONNECTED): void => {
     // some code
 });

On State Change Event

/**
 * @typedef State = 
 *    'initialized' | 
 *    'connecting' | 
 *    'connected' | 
 *    'unavailable' | 
 *    'failed' | 
 *    'disconnected'
 */

/**
 * @typedef STATE_CHANGE
 * @property {State} current - current state
 * @property {State} previous - previous state
 */
 
 this.channel.bind("state_change", (data: STATE_CHANGE): void => {
     // some code
 });

On Render

Event is emited when the container element of the widget is rendered.

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

On Search

Triggers when the user types in the contact search bar

widgetInstance.on("search", (query) => {
    // query = search query
});

The search input has a debounced timeout of 300ms

On New Unread Messages

Event is emitted when the widget is closed and receives new messages, which have not yet been read.

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