Tiledesk Developer Hub
WebsiteCommunityTutorialsGet started
  • Introduction
  • Community
  • Ask for Support
  • Public Roadmap and Changelog
  • Tutorials
  • Widget
    • Widget SDK
    • Javascript API: Methods
    • Javascript API: Attributes
    • Javascript API: Listeners/Events
    • Widget Authentication
    • Widget Angular integration
    • Widget React integration
    • Widget for Android with WebView
    • Widget for iOS with WKWebView
    • Widget for Flutter with WebView
    • Widget for React with WebView
    • Widget for Wix Website platform
    • Tutorials
      • Hide widget
      • Show/Hide widget programmatically
      • Force widget loading without user interaction
      • Mobile positioning
      • Custom size (width/height)
      • Installing widget on selected pages
    • Conversation Embedded Apps
      • Payment App Tutorial
      • Prechat form App Tutorial
    • Advanced
      • Preset the Widget on a specific Department
      • Authentication Flow
      • Widget protocol specs
      • Prechat Form JSON specs
      • Prevent multiple conversations
      • Old versions
        • Web SDK v4
  • External Chatbot
    • Introduction
    • Hello World tutorial
    • Chatbot to Human handoff
    • Send Text Buttons
    • Advanced Tutorials
      • Introduction
      • Tutorial 1 - Dialogflow as external chatbot
      • Tutorial 2 - Buttons and images
      • Tutorial 3 - Automatic human handoff with fallback intent
      • Tutorial 4 - Explicit Human handoff with user intent
      • Tutorial 5 - Gracefully handling operating hours during handoff
      • Generate Dialogflow Google Credentials file
    • Rasa tutorials
      • Rasa Tutorial 1 - Rasa as external chatbot
  • Resolution bot
    • Introduction
    • Quickstart
    • Webhook service
    • Rich messages
    • Tutorials
      • Chatbot chooser (multilanguage)
      • Department chooser
      • Order info (webhook)
  • APIs
    • REST APIs
      • Introduction
      • Authentication
      • Requests
      • Leads
      • Messages
      • Activities
      • Projects
      • Team
      • User
      • Analytics
      • Canned responses
      • Tags
      • Events
      • Jwt
      • Labels
      • Images
      • Files
      • Segments
      • Chatbots
      • Knowledge Bases
        • Knowledge Base
        • Contents
        • Question & Answer
      • Management Api
        • Departments
        • Groups
    • NodeJS SDK
    • Webhooks
      • Subscriptions
    • Conversation Messages APIs tips
    • Realtime API
    • JWT Authentication
      • JWT Custom authentication Tutorial
    • Tutorials
      • REST API
        • Sending and receiving messages with Tiledesk APIs
        • PHP Tiledesk REST API example
        • Import multiple messages into Tiledesk using REST APIs from third party app
      • Webhooks
        • Custom Request assignment
        • Request transcript on close
  • Apps
    • Build Custom App - Quick start
    • External Channels integration flow diagram
    • Telegram integration tutorial
  • Dashboard & AgentChat SDK
    • Dashboard SDK
    • Agent Chat SDK
  • Architecture
    • Architecture overview
    • Components list
    • Bot Design diagram
    • Multi Channel Message Flow
  • Installation
    • Installation
    • Running Tiledesk using Docker Compose
    • Running Tiledesk with Kubernetes using Helm
    • Choosing Hardware
  • Configuration
    • Chat21 channel configuration
    • Email parameters and templates configuration
    • Configure the logging system
Powered by GitBook
On this page
  • Available events:
  • Initial events lifecycle:
  • Important payload of event_data:
  • onBeforeMessageSend
  • onAfterMessageSend
  • onAuthStateChanged
  • onBeforeDepartmentsFormRender
  • onNewConversationComponentInit
  • onMessageCreated
  • onConversationUpdated

Was this helpful?

  1. Widget

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

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", "andrea.leo@f21.it");

    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>
PreviousJavascript API: AttributesNextWidget Authentication

Last updated 1 year ago

Was this helpful?

event_data is a Javascript CustomEvent. More info about CustomEvent

here