How to migrate from Live Chat V1 to V2

If you are ready to switch from the Customerly Live Chat V1 to the new V2 this is the tutorial you should follow. 

There are 4 things to update when you are fully migrating to the V2:

• Main JS snippet

• Live Chat custom appearances

• Control functions

• Event functions

• Attribute functions

Depending on what you are currently using you will need to update them. 

Main JS snippet

The V1 Javascript Snippet you have installed is something like this:

<!-- Customerly Integration Code --> 
<script>    
window.customerlySettings = {        
   app_id: "PROJECT_ID"    
};    
!function(){function e(){var e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://widget.customerly.io/widget/00c4ed07";    var r=t.getElementsByTagName("script")[0];r.parentNode.insertBefore(e,r)}    var r=window,t=document,n=function(){n.c(arguments)};    r.customerly_queue=[],n.c=function(e){r.customerly_queue.push(e)},r.customerly=n,r.attachEvent?r.attachEvent("onload",e):r.addEventListener("load",e,!1)}(); 
</script>

Replace this code with the following one:

<!-- Customerly Live Chat Snippet Code --> 
<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": "PROJECT_ID"     
  }); 

</script> 
<!-- End of Customerly Live Chat Snippet Code -->

If you were authenticating your users, you can now do this with this piece of code

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

If you want to add user attributes add this piece of code

customerly.load({
        app_id: "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 
        }
});

Live Chat custom appearances 

Widget Position

If you were controlling the positioning of the live chat with the widget_position you can now use the new line direction

customerly.load({
      app_id: "PROJECT_ID",
      
      // Custom options
      direction: "right|left"
});

Widget color

If you were using the widget_color you should use the new accentColor. The widget colour now has 2 variables accentColor and contrastColor.

customerly.load({
      app_id: "PROJECT_ID",
      
      // Custom options
      accentColor: "#220033",
      contrastColor: "#ffffff"
});

Control Functions

Hide Live Chat

To show the live chat programmatically you might be using 

customerly('show');

You should replace it with

customerly.show();

Hide Live Chat

To hide the live chat programmatically you might be using

customerly('hide');

You should replace it with

customerly.hide();

Open Live Chat

To open the live chat programmatically you might be using

customerly('open');

You should replace it with

customerly.open();

Close Live Chat

To close the live chat programmatically you might be using

customerly('close');

You should replace it with

customerly.close();

Event Functions

If you were sending events to customerly and using the following function 

customerly("event", "event_name");

You should now replace it with 

customerly.event("event_name");

Attribute Functions

If you were using functions to update user attributes like this:

 customerly("attribute", "attribute_name", "attribute_value" );

You should now replace it with

customerly.attribute("attribute_name", "attribute_value");

This is everything you need to know. To discover more about how to take full control of your live chat features, please read this tutorial: How to take full control of your live chat with custom Javascript.