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>
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.
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: "00c4ed07",
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: "00c4ed07",
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"
}
});
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"
},
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: "00c4ed07",
// Custom options
direction: “right|left”
});
Let's dive into details.
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 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({
app_id: "007b9e3f",
email: "testolo@gmail.com",
position: {
desktop: {
bottom: 50,
side: 50
},
mobile: {
bottom: 30,
side: 30
}
}
});
If you want to change the basic colour of your live chat, you can customize it here.
We accept all HEX codes.
accentColor: "#ffffff"
If you want to change the contrast colour of your live chat, you can customize it here.
We accept all HEX codes.
contrastColor: "#000000"
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
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
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
By default, the live chat offers the screenshot feature. You can decide to hide it by adding the screenshotAvailable option.
screenshotAvailable: boolean
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
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.
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 programmatically you can use the hide() method.
customerly.hide()
To open the live chat home, you can use the open() method. This will simulate a click on the live chat bubble.
customerly.open()
To close the live chat programmatically, you can use the close() method.
customerly.close()
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")
If you want to change or add an attribute for the user on the go, add this line of code.
customerly.attribute(“key”, “value”)
customerly.logout()