Open your IDE and test the Live Chat API

Take full control of your Live Chat thanks to powerful JS API

Customerly

Recognize your users automatically

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", 
});

Add properties to keep track of your most important customer data

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 
    }
});

Add companies for your users

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
    }
});

Update user data

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

Change a user property when the user update it

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

Track events to get more insights on every user move

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

Log out your users

If you want to log out your user in the messenger, you can do it any time with the code below

customerly.logout()
Let’s customize your Live Chat behavior and appearance

Let’s customize your Live Chat behavior and appearance

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

Live Chat localization

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
});

Show the Live Chat programmatically

To show the live chat, if you had previously hidden with the visible: false mentioned above, you can use the show() function

customerly.show()

Hide the Live Chat programmatically

To hide the live chat at certain actions, you can use the hide() function

customerly.hide()

Change visibility of the Live Chat

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
});

Change visibility of the Live Chat on mobile only

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
});

Open the Live Chat programmatically

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

Open the Live Chat programmatically with pre-populated message

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?");

Close the Live Chat programmatically

If you want to close the live chat programmatically while it’s open, this is how you can do it

customerly.close()

Move your Live Chat

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
        }
    }
});

Change the accent color

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"
});

Change the contrast color

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"
});

Enable/disable attachments

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
});
Use callbacks to get notified based on user actions

Use callbacks to get notified based on user actions

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

Live Chat callback when the chat has been opened

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( ) { … };

Live Chat Callback when the chat has been closed

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( ) { … };

Live Chat callback when a lead has been generated

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( ) { … };

Live Chat Callback when a new conversation has been started

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( ) { … };

Live Chat Callback when a pre-chat has been asked

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( ) { … };

Live Chat Callback when a pre-chat has been answered

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( ) { … };

Live Chat Callback when a video live chat has been answered

The onRealtimeVideoAnswered callback will be triggered when the client answers a Realtime Video Live Chat

customerly.onRealtimeVideoAnswered = function( ) { … };

Live Chat Callback when a video live chat has been rejected

The onRealtimeVideoRejected callback will be triggered when the client rejects a Realtime Video Live Chat

customerly.onRealtimeVideoRejected = function( ) { … };

Live Chat Callback when an help center article has been opened

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( ) { … };

Live Chat callback when someone receive a chat trigger

Track whenever your users or visitors are receiving a chat trigger in order to understand the performances of your triggers.

customerly.onTriggerFired = function(triggerId) { … };
Live Chat Messenger Chat Details
arrow
Live Chat Messenger Conversation History

AI Support That Sets You Apart — Start Leading Today.

Some of the businesses that choose Customerly
  • appinstitute
  • cookie-script
  • epayco
  • nibol
  • njlitics
  • startupgeeks
  • paymo
  • paykickstart
  • tedx
  • tweethunter
  • appinstitute
  • cookie-script
  • epayco
  • nibol
  • njlitics
  • startupgeeks
  • paymo
  • paykickstart
  • tedx
  • tweethunter