How to add Live Chat callbacks

Let's say you want to track a conversion when a new chat has been started on a specific page, the best way to do it is with callbacks.


These are the callbacks you can use as you need. 


Please check first the tutorial to understand how the Live Chat Javascript integration works.


When you have correctly integrated the live chat as described in the tutorial, you can add callbacks as described below.


customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onChatClosed: function() { … },
      }
});


This is an example where we added the onChatClosed callback. 


Let's get deep in the knowledge of each callback. 


onLeadGenerated

If you want to be notified from the live chat when someone instances a new conversation with you, you can use the onLeadGenerated callback.


The function returns:

  • email: the lead's email inserted into the live chatbox. (if present, otherwise will be nil)


customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onLeadGenerated: function( email ) { … },
      }
});



onChatOpened

The onChatOpened callback will be triggered when the client opens the chat window. Ideal if you want to control the live chat icon after they open the chat window. (To control the chat window please refer to the tutorial here)


customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onChatOpened: function() { … },
      }
});



onChatClosed

The onChatClosed callback will be triggered when the client closes the chat window. Ideal if you want to hide the live chat icon after they close the chat window. (To close the chat window please refer to the tutorial here)


customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onChatClosed: function() { … },
      }
});


onNewConversation

The onNewConversation callback will be triggered when a user or a lead start a new conversation. Ideal if you want to track in Google Analytics or other analytics service you use the pages with more conversation opened.


The function returns:

  • message: The string with the message just sent.
  • attachments: is a list of dictionaries with the content of the attachments added to the message.


customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onNewConversation: function( message ,attachments ) { … },
      }
});


onProfilingQuestionAnswered

The onProfilingQuestionAnswered callback will be triggered when the lead answer to any of the profiling questions. 


The function returns:

  • attribute: The attribute for the related question asked
  • value: the answer the lead left.


customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onProfilingQuestionAnswered: function( attribute, value ) { … },
      }
});


onProfilingQuestionAsked

The onProfilingQuestionAsked callback will be triggered when any of the profiling questions have been shown to the visitor. 


The function returns:

  • attribute: The attribute for the related question asked



customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onProfilingQuestionAsked: function( attribute ) { … },
      }
});


onRealtimeVideoAnswered

The onRealtimeVideoAnswered callback will be triggered when the client answers a Realtime Video Call.


customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onRealtimeVideoAnswered: function() { … },
      }
});


onRealtimeVideoRejected

The onRealtimeVideoRejected callback will be triggered when the client rejects a Realtime Video Call.


customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onRealtimeVideoRejected: function() { … },
      }
});


onHelpCenterArticleOpened

The onHelpCenterArticleOpened callback will be triggered when the client opens a Help Center Article within the live chat widget.


The function returns:

  • article: The article the client opened.


The article payload consists in:

  • account: Account
  • body: string
  • collection: Collection
  • created_at: number
  • description: string
  • knowledge_base_article_id: number
  • slug: string
  • title: string
  • updated_at: number



customerly.load({
      app_id: "REPLACE_APP_ID",
      
      callbacks: {
        onHelpCenterArticleOpened: function( article ) { … },
      }
});