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

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

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

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

Understanding the initialization

When the Slaask script is loaded, it reads your _slaaskSettings 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 Slaask aware of it right away.

_slaask.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:

_slaask.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 Slaask 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 Slaask to re-identify your Contact.

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

window._slaaskSettings = {
  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 _slaask.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, _slaask.destroy() will unload the chatbox, returning to a state where the chatbox has not been initialized yet. Calling _slaask.identifyContact() will re-initialize it.