Install live chat with Javascript API

This is a technical article on how to install live chat on any website.

To add your new live chat to any website this is the main Javascript code you need to add.

Please add the snippet just before the </body> tag.

This is the installation code you might want to use on your public landing page.

<script>
!function(){var e=window,i=document,t="customerly",n="queue",o="load",r="settings",u=e[t]=e[t]||[];if(u.t){return void u.i("[customerly] SDK already initialized. Snippet included twice.")}u.t=!0;u.loaded=!1;u.o=["event","attribute","update","show","hide","open","close"];u[n]=[];u.i=function(t){e.console&&!u.debug&&console.error&&console.error(t)};u.u=function(e){return function(){var t=Array.prototype.slice.call(arguments);return t.unshift(e),u[n].push(t),u}};u[o]=function(t){u[r]=t||{};if(u.loaded){return void u.i("[customerly] SDK already loaded. Use `customerly.update` to change settings.")}u.loaded=!0;var e=i.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://messenger.customerly.io/launcher.js";var n=i.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};u.o.forEach(function(t){u[t]=u.u(t)})}();

customerly.load({
      "app_id": "ADD YOUR PROJECT ID"
});
</script>

Live Chat user authentication 

If you have a platform where you have the user information such as the name, email, user id and so on, you can pass them to Customerly live chat. 

This way they will be automatically authenticated and you will know who is contacting you. 

You need to add 2 lines of code in your customerly.load() function as described below.

customerly.load({
        app_id: "ADD YOUR PROJECT ID",
        user_id: "REPLACE WITH YOUR USER ID",// Optional
        name: "REPLACE WITH USER NAME", 
        email: "REPLACE WITH USER EMAIL"});

Replace the strings such as "REPLACE WITH USER NAME" with the actual user data otherwise, all your users will have the same ID and the same conversations. 

Live chat additional user data 

If you want to track whatever user's information, you can add properties to the snippet to save them automatically.

Again in your customerly.load() function add the attributes array as described below.

customerly.load({
        app_id: "ADD YOUR PROJECT ID",
        user_id: "REPLACE WITH YOUR USER ID",// Optional
        name: "REPLACE WITH USER NAME", 
        email: "REPLACE WITH 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 
        }
});

As you can see the attributes array is a key-value array you can extend as much as you need. 

To add any property, the only thing you need to do is adding a new line with value key and value

For example, if you need to track the plan of your user, you might want to add it like this:

customerly.load({
        app_id: "ADD YOUR PROJECT ID",
        user_id: "REPLACE WITH YOUR USER ID",// Optional
        name: "REPLACE WITH USER NAME", 
        email: "REPLACE WITH 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,
            plan: "pro"
        }
});

Track companies for users

To track different companies for each user you will need to add to your load function the following piece of code

company: {
    company_id: "COMPANY_ID",
    name: "ACME", 

    //Add your custom company properties of the user you want to track
    address: "Ground Floor, 71 Lower Baggot Street",
    city: "Dublin",
    employees: 10,
    admin_url: "https://www.company.com/admin/companyID",
    sub_name: "Pro",
    sub_period: "Yearly",
    sub_state: "Active",
    sub_amount: 1188,
    sub_currency: "EUR",
    last_payment_amount: 1188,
    total_revenues: 5940,
    domain: "company.com"
},

Live Chat customization options

If you want to customize the live chat positioning on your website, the colour, or other cool features you might want to use the options described below.

You can add them if you need them in your customerly.load() function as shown below.

customerly.load({
      app_id: "ADD YOUR PROJECT ID",
      
      // Custom options
      direction: “right|left”
});

Let's dive into details.

Live chat data update

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

Live chat position

If you want the live chat on the right, use direction: "right", otherwise use "left".

direction: "right|left"

If you want to move the live chat bubble from the bottom and from the side, use this code:

customerly.load({
        position: {
            desktop: {
                bottom: 50,
                side: 50
            },
            mobile: {
                bottom: 30,
                side: 30
            }
        }
    });

Live chat accent colour

If you want to change the basic colour of your live chat, you can customize it here.

We accept all HEX codes.

accentColor: "#ffffff"

Live chat contrast colour

If you want to change the contrast colour of your live chat, you can customize it here.

We accept all HEX codes.

contrastColor: "#000000"

Live chat hidden

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.

visible: true

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.  

We accept true or false values.

autodetectLocale: false

Live chat hidden on mobile

If you want to hide the live chat only on mobile, you can do it by adding the visibleOnMobile option. 

We accept true or false values.

visibleOnMobile: false

Live chat screenshot available

By default, the live chat offers the screenshot feature. You can decide to hide it by adding the screenshotAvailable option. 

screenshotAvailable: boolean   

Live chat attachments available

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.

attachmentsAvailable: boolean

Live chat custom functions

To fire an event when someone clicks a button, or to update an attribute on the go, or to show or close the live chat, you will find the solution to achieve these goals and more in custom functions. 

Live chat show function

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

customerly.show()

Live chat hide function

To hide the live chat programmatically you can use the hide() method. 

customerly.hide()

Live chat open function

To open the live chat home, you can use the open() method. This will simulate a click on the live chat bubble. 

customerly.open()

Live chat close function

To close the live chat programmatically, you can use the close() method. 

customerly.close()

Fire an event

Let's say you want to fire an event when somebody clicks on a button, or whatever you want to track this is the right implementation.

customerly.event("name")

Change or add an attribute on the go

If you want to change or add an attribute for the user on the go, add this line of code.

customerly.attribute(“key”, “value”)

Log out a user from the live chat
If you want to log out your user in the messenger, you can do it any time with the code below:

customerly.logout()