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.

window.Tiledesk(event_name, 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

<script type="application/javascript">    
    window.Tiledesk('onBeforeMessageSend', function(event_data) {
      var message =  event_data.detail.message;
      console.log("onBeforeMessageSend called ", message);
    });
    window.Tiledesk('onAfterMessageSend', function(event_data) {
      var message =  event_data.detail.message;
      console.log("onAfterMessageSend called ", message);
    });
</script>

Ex. Widget with visitor fullname and email from localStorage

<script type="application/javascript">    
    //set fullname to localstorage
    localStorage.setItem("user_fullname", "Andrea from localStorage");
    localStorage.setItem("user_email", "[email protected]");

    window.Tiledesk('onLoadParams', function(event_data) {
        window.tiledeskSettings.userFullname = localStorage.getItem("user_fullname");
        window.tiledeskSettings.userEmail = localStorage.getItem("user_email");
    }); 
</script>

Ex. Widget with welcome message with current date

<script type="application/javascript">    
    window.Tiledesk('onLoadParams', function(event_data) {
        window.tiledeskSettings.welcomeMsg = " Hello at: " + new Date().toLocaleString();
    });
</script>

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

<script type="application/javascript">    
    window.Tiledesk('onBeforeMessageSend', function(event_data) {
        var message =  event_data.detail.message;
        message.attributes.userCompany = "Frontiere21";
    });
</script>

Ex. Add a custom attribute (page title) to the message.

<script type="application/javascript">    
    window.Tiledesk('onBeforeMessageSend', function(event_data) {
        var message = event_data.detail.message;
        message.attributes.pagetitle = document.title;
    });
</script>

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:

<script type="application/javascript">    
    window.Tiledesk('onAfterMessageSend', function(event_data) {
        var message =  event_data.detail.message;
        console.log("onAfterMessageSend called ", message);
    });
</script>

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. :

<script type="application/javascript">    
    window.Tiledesk('onAuthStateChanged', function (event_data) {
        console.log("onAuthStateChanged ----> ", event_data.detail.event);
        if (!event_data.detail.isLogged) {
            console.log("NOT logged");                      
            window.tiledesk.signInWithCustomToken("JWT CHANGE IT");                
        } else {
            console.log("logged in");
        }
    });
</script>

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.

<script type="application/javascript">
    window.Tiledesk('onBeforeDepartmentsFormRender', function(event_data) {
        var departments = event_data.detail.departments;
        var lang = window.tiledesk.angularcomponent.component.g.lang;
        if (lang && lang === 'en') {
            var new_deps = departments.filter(function(dep) {
                if (dep.description && dep.description.includes('English')) {
                     return dep;
                }
            });
        } else {
            var new_deps = departments.filter(function(dep) {
                if (dep.description && dep.description.includes('French')){
                    return dep;
                }
            });
        }
        
        //modify the department array by reference
        
        departments.length=0;  //empty the array
        console.log("new_deps",new_deps);
        new_deps.forEach(function(d) { //populate the department array
            departments.push(d);
        });
            
    });
</script>

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.

<script type="application/javascript">    
    window.Tiledesk('onNewConversationComponentInit', function(event_data) {
        const message = 'hello';
        const recipientId = event_data.detail.newConvId;
        const recipientFullname = 'Owner';
        const type = 'text';
        const metadata = {};
        const attributes = {test:'test attributes', subtype: 'info'};
        window.tiledesk.sendSupportMessage(
            message,
            recipientId,
            recipientFullname,
            type,
            metadata,
            attributes
        )
    });
}
</script>

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. :

<script type="application/javascript">    
    window.Tiledesk('onMessageCreated', function(event_data) {
        var message = event_data.detail;
        console.log("TRIGGER onMessageCreated -> ", message);
    });
</script>

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:

<script type="application/javascript">    
    var now = Date.now();
    window.Tiledesk('onConversationUpdated', function(event_data) {
        var dateConvUpdate = event_data.detail.conversation.timestamp
        console.log(" TRIGGER onConversationUpdated -> ", event_data.detail.conversation);
        console.log("now-> ", now);
        console.log("dateConvUpdate-> ", dateConvUpdate);
        if(now < dateConvUpdate){
            console.log(" New conversation!!!");
        }
    });
</script>