Javascript API: Listeners/Events
These event will triggers only when Tiledesk Widget fired some event in a specific situation. Once it's up, you'll be able to do something you need in the fanction handler.
Register an event handler to an event type.
Available events:
event_name | description |
---|---|
onLoadParams | Fired when the parameters are loaded*. |
onInit | Fired when the widget is initialized |
onAuthStateChanged | The event is generated when the user logs in or logs out |
onOpen | Fired when the widget is open |
onClose | Fired when the widget is closed |
onBeforeMessageSend | Fired before the message sending. |
onAfterMessageSend | This event is generated after the message has been sent. |
onOpenEyeCatcher | Fired when the callout box is open |
onClosedEyeCatcher | Fired when the callout box is closed |
onCloseMessagePreview | Fired when the user click on close button in message preview while new message is received and widget is closed |
onNewConversationComponentInit | Fired just after a new conversation is initialized |
onBeforeDepartmentsFormRender | Fired just before rendering Departments in the Departments view |
onMessageCreated | Fired when the widget receive a message |
onNewConversation | Fired when the widget start a new conversation |
onConversationUpdated | Fired when the widget receive a conversation update |
*This event will be fired before the tiledesk parameters is loaded. Use this event to change at runtime your Tiledesk settings.
Initial events lifecycle:
onLoadParams -> onInit -> onAuthStateChanged
The handler will have the signature function(event_data).
event_data is a Javascript CustomEvent. More info about CustomEvent here
Arguments:
Parameter | Type | Required | Description |
---|---|---|---|
event_name | String | YES | Event name to bind to |
handler | Function | YES | Function with the signature function(event_data) |
Important payload of event_data:
Parameter | Type | Description |
---|---|---|
detail.default_settings | Object | the constructor default settings |
Ex. Logging of widget events
Ex. Widget with visitor fullname and email from localStorage
Ex. Widget with welcome message with current date
onBeforeMessageSend
This event will be fired before the message sending. Use this event to add user information or custom attributes to your chat message.
Important payload of event_data:
Parameter | Type | Description |
---|---|---|
detail.message | Object | the message that is being sent |
Ex. Programmatic setting custom user metadata
Ex. Add a custom attribute (page title) to the message.
onAfterMessageSend
This event is generated after the message has been sent.
Important payload of event_data:
Parameter | Type | Description |
---|---|---|
detail.message | Object | the message that was sent |
Ex:
onAuthStateChanged
This event is generated when the authentication state changed (Ex: user sign-in, user logout, etc.) Important payload of event_data:
Parameter | Type | Description |
---|---|---|
detail | Object | the auth event |
Auth Event description:
Parameter | Type | Description |
---|---|---|
event | string | Possible values: 'online' when user is logged in, 'offline' when user is logged out |
isLogged | boolean | Possible values: true if the user is logged, false if not logged |
user_id | string | The current user identifier |
global | object | An object with all the widget global parameters |
default_settings | object | The initial widget config parameters (window.tiledeskSettings) |
appConfigs | object | The remote widget config parameters obtained from the remote Tiledesk server |
Ex. :
onBeforeDepartmentsFormRender
This event is generated before rendering the Departments selection View. Use this event if you want to filter the default Departments list based on some conditions.
Important payload of event_data:
Parameter | Type | Description |
---|---|---|
detail.departments | Object | the array of the default Departments |
Ex. :
In the following example Departments are filtered based on the current widget language. Actually a Department doesn't provide a specific "language" field. In this example Department language is put in the Department description field. Attention you can modify the departments array only by reference.
onNewConversationComponentInit
This event is generated as soon as a new conversation view is rendered. Use this event if you want to execute some actions on a Conversation start.
Important payload of event_data:
Parameter | Type | Description |
---|---|---|
detail.newConvId | Object | the id of the conversation that fired the event |
Ex. :
In the following example a hidden message is sent as soon as a conversation starts. Sending a hidden message is useful to fire a bot welcome message, if one is invited in the conversation.
onMessageCreated
This event is generated when the widget receive a message.
Important payload of event_data:
Parameter | Type | Description |
---|---|---|
detail | Object | the message that was received |
Ex. :
onConversationUpdated
This event is generated when the widget receive a conversation update.
Important payload of event_data:
Parameter | Type | Description |
---|---|---|
detail | Object | the conversation that was received |
Example:
Last updated