Home > Routing by tag for reactive chats: Configuration

Categories: | |


(Last Updated On: November 6, 2018)

Routing by Tag is an advanced feature, available only on Premier or higher Accounts, which enables routing of chats to the most appropriate agent based on skill-set, language, specialty etc. Setting up this feature requires configuration in the SnapEngage Admin Dashboard and can also be used in conjunction with functions inserted into your website code.

Step 1. Enable the Feature

This is for reactive chats only. To enable Routing by Tag, please log into your Admin Dashboard, select the widget you want to configure and navigate to Settings -> Agent Settings -> Chat Assignment -> Routing by Tag. In this section, there is a checkbox labeled “Enable routing by tag”.

routing-by-tags-options

Before going into more detail about setting up the tags, we need to look into the two sub-options within this feature that are used to control what happens when there are no available agents who have a tag matching that of the visitor:

  • The “Route chats to available agents” option. With this option enabled, if an agent with a matching tag is not available, your website visitors will be able to chat with another available agent even if this agent does not have a matching tag. In such a case, we will assign an incoming chat based on the “Agent Assignment Settings” which have been configured right above the “Routing by Tag” setting.
  • The “Set chat to offline” option. If an agent with a matching tag is not available, this will make things appear as though chat is not available on your website (for this visitor). This includes changing the floating button to its offline state and only making the offline form available. Please note that using this option requires using the SnapEngageOptions JavaScript object as described further below. Also note that the agent has to have ALL the tags set on the page in order to “match”

Once the appropriate options are selected be sure to click on the “Save” button.

 Step 2. Assign Tags to Agents

To assign tags to your agents, you go to Settings -> Agent Settings -> Chat Agents. Click on the “Edit” button to the right of the agent you would like to configure and a box will pop up where you can configure settings for this agent. At the bottom of the form, you will see the “Agent Tags:” field:

admin-dashboard-agent-details-tags

Within this field you can enter new tags or select from existing ones. To add a new tag, just type in the word you want to use as a tag and hit enter (eg. “anothertag” below). Once the agent has been configured with the appropriate tags click on the “Save” button. At this point the chat assignment will behave just as it did before having enabled the feature in step 1.

tags

**Please note that just like different agents can be configured with different tags, some agents might not be assigned any tags at all.**

Step 3. Using the Tags

Now you can use the tags you have added to route chats to your agents using the JavaScript API. This is the point at which you actually start altering the behavior of how the chats are assigned. Again, this is for reactive chats only. If you want to route by tag using proactive chat, you do not need to enable the routing tag feature and you can read more about how to configure that here. 

 

Assigning Visitor Tags via the JavaScript API

You have two different options when using the JavaScript API. Setting these up might require the assistance of your developers. When your website visitor starts a chat with you, they will have already been assigned tags based on the logic you/your developers build. SnapEngage will then know to which agents to direct the chat to, as the tags will have already been passed to the system.

It is essential to understand where the tags come from on the visitor side in order to accurately set up your tag assignment. Like mentioned above, that will depend on your logic but two seem to be the most common scenarios:

1. Visitor page information – It is safe to assume that most websites have various pages including pricing, features, products, etc. Many of them also have different sites for different languages, eg. Spanish, German, French. Each page could be assigned with one or more corresponding tags which could be used in your routing.
2. User profile information – Many websites require visitors to create/log into an account before navigating around on the site. A lot of times, during the signup process, people will be asked to create a profile that might include things like where they are located, their gender and age, what sports they enjoy etc. That information can then be retrieved when the user signs in and could be used as tags.

Option 1 – SnapEngageOptions: (This is required when using the offline option.)

Create a global SnapEngageOptions object to set the most appropriate tags. As an example, let’s say in step #2 we had assigned an agent tag of “spanish” to Ryan. If we want to direct chats to that agent we would do the following:

<script type="text/javascript">
// must be set prior to the loading of the SnapEngage code
var SnapEngageOptions = {
 tags:"spanish"
}
</script>

You can use this option for visitors of certain account levels (if they are logged into your site) or certain locations (we use a similar premise to blacklist countries or IPs for you). You can pull in different variable values from your page to be tags and, as long as there are agents with those tags, we can toggle chat being off/online. For example, if you collect the user’s country in a variable called “country”, you could set a tag like this:

<script type="text/javascript">
// must be set prior to the loading of the SnapEngage code
var SnapEngageOptions = {
 tags:"country"
}
</script>

Multiple tags can be passed by adding commas between each tag. For instance:

<script type="text/javascript">
// must be set prior to the loading of the SnapEngage code
var SnapEngageOptions = {
 tags: "spanish, gold"
}
</script>

Option 2 – SnapEngage.setTags:

To use this option, you would need to add the SnapEngage.setTags(); function code under the ” /* Place your SnapEngage JS API code below */ ” part of your widget’s code snippet. In the above example, Jan has been assigned with the “german” tag. To be able to direct German chats to Jan, you would need to add the “german” tag in the function: “SnapEngage.setTags(‘german’);”. The complete code would look like the following:

<!-- begin SnapEngage code -->
<script type="text/javascript">
(function() {
 var se = document.createElement('script');
 se.type = 'text/javascript';
 se.async = true;
 se.src = '//storage.googleapis.com/code.snapengage.com/js/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.js';
 var done = false;
 se.onload = se.onreadystatechange = function() {
 if (!done&&(!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
 done = true;
 /* Place your SnapEngage JS API code below */
 SnapEngage.setTags('german');
 }
 };
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(se, s);
})();
</script>
<!-- end SnapEngage code -->

The SnapEngage.setTags(‘german’); function code could be placed on all the pages of your German website but not the English one. Chats initiated on your German website, would then be directed to agents with the “german” tag.

**Please note that multiple tags can be passed to the SnapEngage.setTags(”);  function using commas between each tag.**

For instance, if you wanted to add a “tennis” tag for some pages of your German site and direct the chats to Jasmin who speaks German and knows everything about tennis, the function would become SnapEngage.setTags(‘german, tennis’), as shown below:

<!-- begin SnapEngage code -->
<script type="text/javascript">
(function() {
 var se = document.createElement('script');
 se.type = 'text/javascript';
 se.async = true;
 se.src = '//storage.googleapis.com/code.snapengage.com/js/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.js';
 var done = false;
 se.onload = se.onreadystatechange = function() {
 if (!done&&(!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete')) {
 done = true;
 /* Place your SnapEngage JS API code below */
 SnapEngage.setTags('german, tennis');
 }
 };
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(se, s);
})();
</script>
<!-- end SnapEngage code -->

 

You will need to work with your website developer to determine the correct tags to set using the JavaScript API.

If you would like a few more examples, you can read more scenarios on how tags work for reactive chats here.

Did you find this article helpful?

Not HelpfulNeeds WorkSo-soHelpfulVery Helpful (3 votes, average: 4.33 out of 5)
Loading ... Loading ...

Published February 2, 2017