Migration guide to the new code snippet

Hello there!

We are continuously improving Xeno to make it better everyday, and the chatbox is one of the most important part of it. As this is what you are showing to your contacts, it becomes a part of your image.

This is why we've recently reworked it internally to provide you with a reliable product over the years. But parts of this move must also be done by you if you want to take all the benefits out of this update!

What are these benefits?

• Increased stability (in many ways)
• Better compatibility with all websites (no more JS or CSS conflict)
• Better compatibility with different browsers (Internet Explorer 9+)
• Takes less bandwidth upon loading

How to switch to the new chatbox?

Changing the code snippet will load the new chatbox. It will look exactly the same, will work as the previous one, but will be more stable.

Please follow the steps in each section that matches your use case, you can skip everything else

• You are using a Wordpress or Shopify plugin
• You are using the "default" code snippet
• You are using the "smart" code snippet
• Your init function has two arguments
• You are using custom CSS
• You have a Single page App

You are using a Wordpress or Shopify plugin

You don't have anything to do! We will do it for you

You are using the "default" code snippet

This is the simplest code snippet which requires no editing. It looks like this:

!function(){var x=document.createElement("script");x.src="https://cdn.xeno.app/chat.js",x.type="text/javascript",x.async="true",x.onload=x.onreadystatechange=function(){var x=this.readyState;if(!x||"complete"==x||"loaded"==x)try{

  _xeno.init("YOUR-PUBLIC-KEY");

}catch(x){}};var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(x,t)}();

• Find your public key so you can use it in the new code snippet
• Then replace the code above with the one below:

<script>
  window._xenoSettings = {
    key: "YOUR-PUBLIC-KEY"
  };
</script>
<script src="https://cdn.xeno.app/chat_loader.js" async="true"></script>

You are using the "smart" code snippet

This code snippet allows you to identify your contacts by providing details from your own application. It looks like this:

!function(){var x=document.createElement("script");x.src="https://cdn.xeno.app/chat.js",x.type="text/javascript",x.async="true",x.onload=x.onreadystatechange=function(){var x=this.readyState;if(!x||"complete"==x||"loaded"==x)try{


  _xeno.identify({
    id: 1234,
    name: "John Doe"
  })
  _xeno.init("YOUR-PUBLIC-KEY");


}catch(x){}};var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(x,t)}();

• Find your public key so you can use it in the new code snippet
• Find also the lines containing info about your contact (id, name)
• Then replace the code above with the one below:

<script>
  window._xenoSettings = {
    identify: function() { return {
      id: 1234,
      name: "John Doe"
    }},
    key: "YOUR-PUBLIC-KEY"
  };
</script>
<script src="https://cdn.xeno.app/chat_loader.js" async="true"></script>

Deprecation:

• _id and user_id are deprecated in favor of id.

Your init function has two arguments

You're using options to modify the behavior of your chatbox aren't you? Then look for these options in your code snippet:

_xeno.init("YOUR-PUBLIC-KEY", { "team_id": 42, "pulse": true });

And add them as an object defined in the options key in _xenoSettings.

window._xenoSettings = {
  key: "YOUR-PUBLIC-KEY",
  options: {
    "team_id": 42,
    "pulse": true
  }
};

Deprecations:

• user_group_id is deprecated in favor of team_id
• user_hash should no longer be used in options, but in identify instead
• user_token and visitor_token should also be used in identify, and named id

You are using custom CSS

Even though we don't recommend it, I know many of you out there need it

Now that the chatbox is loaded in "iframes", your CSS rules won't affect it whether you did it deliberately or not. But don't worry, you can declare your rules explicitly in the new code snippet, check our documentation Add custom CSS to your chatbox.

You have a Single Page App

The implementation of Xeno on SPA has been improved

To keep it simple, use these functions with no argument in the appropriate scenario:

_xeno.updateContact();    // Your user goes to another page
_xeno.destroy();          // Your user logs out
_xeno.identifyContact();  // Another user logs in

You can remove any other function call including those functions: identify, updateVisitorInfo, auth.

To better understand how it works, I can only suggest you to check this documentation: Enabling Xeno to work with Single-Page Application (SPA)