Take full control of your Live Chat thanks to powerful JS API
Collect user data and track their behaviour on your platform or website
If you want to control your live chat appearance and behavior programmatically
Perfect to get notified when someone interact with your chat
If you want to authenticate your users automatically, check out the code below
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
user_id: "USER_ID", // Optional
name: "USER_NAME",
email: "USER_EMAIL",
});
Collect user data automatically every time they use your app so when the Customerly JS snippet loads we will update all your customers' data
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
user_id: "USER_ID", // Optional
name: "USER_NAME",
email: "USER_EMAIL",
// Add your custom attributes of the user you want to track
attributes: {
created_at: 1384902000, // Add dates as Unix timestamp
license_expire_at: 1603490400 // Add any other attribute here with value_key:value
}
});
If you manage users that handle different companies or projects within your platform you might want to use companies to track them. When the user switch company in your platform, pass the relative companies to Customerly as shown below and we will track them
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
user_id: "USER_ID", // Optional
name: "USER_NAME",
email: "USER_EMAIL",
// Company Properties can be added here as you wish
company: {
company_id: "COMPANY_ID", // Your internal ID of the company or project
name: "COMPANY_NAME", // The name of the user's project or company
// Add another property here that you might need to track
// The format should follow:
// - property_name: property_value
license_expire_at: 1603490400
}
});
If you want to update any value in your user details, you might want to call the update() function and passing the same load() function dictionary
customerly.update({...}) // Same value as load
If your users update a property in your platform you will need to call this function to update it to Customerly too
customerly.attribute("plan", "unlimited")
The fundamental of great marketing automation starts from tracking user behavior on your platform. Track events for the most important actions on your app or website
customerly.event("subscribed")
If you want to log out your user in the messenger, you can do it any time with the code below
customerly.logout()
With some tweaks to the Live Chat JS API you can control even more your live chat behavior. Open and close it as you wish and much more
The live chat autodetects the user locale and it adapts its language by default to one of the multiple languages. If you want to force the main language you select in your dashboard, add the autodetectLocale option and use false
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
// Custom options
autodetectLocale: false
});
To show the live chat, if you had previously hidden with the visible: false mentioned above, you can use the show() function
customerly.show()
To hide the live chat at certain actions, you can use the hide() function
customerly.hide()
You might want to hide the live chat on certain pages, you can do it by adding the visible option with the boolean value. We accept true or false values
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
// Custom options
visible: false
});
If you want to hide the live chat only on mobile, you can do it by adding the visibleOnMobile option
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
// Custom options
visibleOnMobile: false
});
To open the live chat home page, you can use the open() method. This will simulate a click on the live chat bubble. This is super useful if you want to connect your live chat open to your custom button
customerly.open()
If you want to open the live chat with a pre-populated chat message you can use the following function
customerly.sendNewMessage("Hey team, I need an Enterprise plan for my project, can you help?");
If you want to close the live chat programmatically while it’s open, this is how you can do it
customerly.close()
If you want the live chat on the right, use direction: "right", otherwise use "left".
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
// Custom options
direction: "right | left",
position: {
desktop: {
bottom: 50,
side: 50
},
mobile: {
bottom: 30,
side: 30
}
}
});
If you want to change the basic color of your live chat, you can customize it here. We accept all HEX codes
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
// Custom options
accentColor: "#ffffff"
});
If you want to change the contrast color of your live chat, you can customize it here. We accept all HEX codes
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
// Custom options
contrastColor: "#000000"
});
By default, the live chat offers a clip icon to attach files to the conversation. If you want to hide the attachment feature, you can use the attachmentsAvailable option and set it to false
customerly.load({
app_id: "YOUR_CUSTOMERLY_ID",
// Custom options
attachmentsAvailable: false
});
If you want to track a PPC conversion every time someone is opening a live chat, or maybe you want to customize the behaviour of your live chat, use live chat callbacks
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.onChatOpened = function( ) { … };
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.onChatClosed = function( ) { … };
If you want to be notified from the live chat when someone instances a new conversation with you and leave their email, you can use the onLeadGenerated callback.
The function returns:
- email: the lead's email inserted into the live chatbox (if present, otherwise will be null).
customerly.onLeadGenerated = function( ) { … };
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: a string containing the message just sent.
- attachments: a list of dictionaries with the content of the attachments added to the message
customerly.onNewConversation = function( ) { … };
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.onProfilingQuestionAsked = function( ) { … };
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.onProfilingQuestionAnswered = function( ) { … };
The onRealtimeVideoAnswered callback will be triggered when the client answers a Realtime Video Live Chat
customerly.onRealtimeVideoAnswered = function( ) { … };
The onRealtimeVideoRejected callback will be triggered when the client rejects a Realtime Video Live Chat
customerly.onRealtimeVideoRejected = function( ) { … };
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.onHelpCenterArticleOpened = function( ) { … };
Track whenever your users or visitors are receiving a chat trigger in order to understand the performances of your triggers.
customerly.onTriggerFired = function(triggerId) { … };