Enabling Xeno to work with Single-Page Application (SPA)

Xeno supports Single Page Applications with just a few functions call!

This guide will help you master Xeno so your chatbox can get the best from your SPA.

Make sure you've first followed our steps to deploy Xeno. You can find the "Deploy" page in the main menu of our app.

Understanding the initialization

When the Xeno script is loaded, it reads your _xenoSettings configurations to initialize the chatbox. By default, this initialization only happens when the script is loaded, so you Contact identity and attributes will be defined at this moment.

Update Contact attributes dynamically

Whenever an information from your Contact changes, you can call the following function to make Xeno aware of it right away.

_xeno.updateContact(info)

info is an object containing new information about your Contact. If they changed their name to "John", the object will look like { name: "John" }. This will replace the name attribute you provided earlier in the identify function from your code snippet.

If you are using the Automated Communications feature along with an SPA, the communications will only be checked upon the first loading. If you want them to be re-checked upon page navigation within your SPA, there is an additional parameter that will allow you to do so:

_xeno.updateContact(info, { triggersCheck: true })

Also, in any case, calling the function with or without parameter will check the current page URL and make sure to update it, so you can keep track on your Contact. It is a good practice to always call this function, even empty, upon page navigation within your SPA. You can however force the current page reported to Xeno by adding a current_page attribute to the info object.

Identify your Contact dynamically

While the process of "updating Contact attributes" gathers information about a Contact, "identifying" them means "Who are them?".

In a Single Page Application, if your Contacts can log in and out without refreshing the page, you will need to ask Xeno to re-identify your Contact.

1. Let's take a look to the identify function in the code snippet first.

window._xenoSettings = {
  identify: function() {
    return {
      id: ____,
      name: ____,
      email: ____,
      avatar: ____
    }
  },
  key: "you-public-key",
};

This function returns an object containing the unique ID identifying your Contact. Make sure it always returns the ID and the other attributes of the current Contact, so if another Contact logs into your application, they will be identified properly.

If you also want to handle anonymous Contacts (if they are not logged in yet), just return null instead of an object.

2. Now, whenever the identity of your Contact changes, just call _xeno.identifyContact(). This will use the function you configured above to get the new identity.

Remove the chatbox for anonymous Contacts

If you don't want the chatbox to be shown to anonymous Contacts at all, _xeno.destroy() will unload the chatbox, returning to a state where the chatbox has not been initialized yet. Calling _xeno.identifyContact() will re-initialize it.