Using Advanced Chat

Quick links in this article:

1 Installation notes | 2 Capturing extra data | 3 Proactive chat triggers | 4 After Advanced Chat is setup

In this article, we’ll explore some useful notes to help you get Advanced Chat installed. Advanced Chat is only available on Enterprise Gnatta plans - as part of your Enterprise support package, we’re on hand throughout implementation so please get in touch for more guidance.

Simple vs Advanced Chat

There are two versions of Gnatta Chat - Simple, and Advanced. Advanced chat behaves exactly the same as Simple chat, but the design of your chat window is completely up to you. To unlock Advanced chat and full custom branding of your chat window, you’ll need an Enterprise Gnatta plan. For more information about Simple Chat, check here: Adding Chat To Your Site

Installation notes

As Advanced chat is only available on premium Gnatta tiers (Enterprise under our current pricing, or some legacy products), implementation will be fully guided by the Service Delivery team. You’ll need to raise a ticket via Service Desk to kick off setup for your Advanced chat account. We’ll talk you through the creation of a custom HTML template for your chat window, and complete any additional manual configuration required.

The HTML template is the visual, front-end design of your chat window, and will be stored on your Gnatta domain settings. When the Gnatta JavaScript code runs on your website (see later in this article), it’ll check your domain for this HTML template to determine how to display the chat window.

We’ve created an example HTML template that you can pass on to your developers. This template is globally tested, across devices - if you make structural changes to the template that result in performance issues, you can revert to these templates. Please ask your Service Delivery Manager for the Example HTML Template file if you’d like to use it as a starting point.

When your Advanced chat HTML template is ready and installed on your domain with support from the Gnatta team, you’re ready to follow the steps below to install Gnatta chat on your site.

Getting started

We’d recommend passing the below to whomever manages your company website. Code should be added directly to your site, instead of using Google Tag Manager, to ensure chat is consistently presented on page load.

You’ll need to copy some specific code snippets (not the HTML template you’ve made!) from your Advanced chat account into your website’s HTML . The code snippets must contain the API keys for your domain. The snippets should be added just before the closing </body> tag in your website's HTML.

The code should be used exactly as presented. Any additional changes may affect the functionality which Gnatta will not be able to support. To view your Advanced Chat account code, go to Configuration > Advanced > Accounts > WebChat > Client Code.

There are three code snippets in total:

JavaScript to run your chat window
HTML for your chat button
CSS for chat window positioning

Find the code for snippets 1 and 2 in your domain’s Configuration menu

The code snippets are also available below - manually insert your API key where relevant. You can request your API key via Service Desk, or collect it from Configuration > Advanced > Accounts > Settings tab > API Keys.

1: JavaScript to run your chat window

This code (with your API key inserted) is available in your Gnatta domain: Configuration > Advanced > Accounts > Webchat > Your account name > Client Code tab

<script type="text/javascript" src="https://chat.system.gnatta.com/script/app.js"></script>
<script type="text/javascript">
    
// Use your latest API key
    gnatta.configure("Your API key here", "https://chat.system.gnatta.com");
    
// Register the 3 web chat buttons on your web page for available, busy and offline
    gnatta.initiate("Your Account ID here", "gwc-chatAvailable", "gwc-chatBusy", "gwc-chatOffline");
</script>

This is required for every page that you want Gnatta chat to be able to run on - even if the chat button isn’t presented i.e. the customer has navigated away from help pages, but you want the chat to persist.

You’ll need to insert your API key at the pertinent sections in the code where ‘Your API Key here’ is stated, for Gnatta.Configure and Gnatta.Initiate. You can request your API key via Service Desk, or collect it via Configuration > Advanced > Accounts > Settings tab > API Keys.

2: HTML for your chat button

<div class="gnattaChat">
    <button type="button" class="hidden" id="gwc-chatAvailable">
        <img src="https://mlink.com/chat/mylogo.svg"><div class="availabilityBadge"></div>
    </button>        
    <button type="button" class="hidden" id="gwc-chatBusy">
        <img src="https://mlink.com/chat/mylogo.svg"><div class="availabilityBadge"></div>
    </button>
    <button type="button" class="hidden" id="gwc-chatOffline">
        <img src="https://mlink.com/chat/mylogo.svg"><div class="availabilityBadge"></div>
    </button>
</div>

This is required on every page that you want chat to be offered on.
The button itself can be styled using your own CSS or amending the HTML.
Do not change the Class and ID in the HTML.
If you wish to hide completely the busy and offline options, use the below configuration for chatBusy and chatOffline.

.gnattaChat #gwc-chatBusy, .gnattaChat #gwc-chatOffline {
    display: none;
}

3: CSS for chat positioning

We’d strongly recommend you additionally add this CSS code snippet - it will ensure the chat button and window are positioned correctly on your website. It is required on every page that webchat appears on.

Capturing extra data

Whilst the above is everything you need for Gnatta chat to work on your website, you can also take things a step further, by capturing data from your website and passing it into Gnatta whenever a chat is initiated. Unlike a pre-chat survey completed by the customer in the chat window, this is information we can optionally detect from the user’s session on your site - this might include:

Checkout information (cart total, items, discounts etc)
Page information (page URL, session duration etc.)
Customer account information (if they’re logged into your site)

To do this, you’ll just need to add an extra line of code to your JavaScript snippet. There are two variations, depending on whether you’d like to collect data for storage in a custom field, or if you’d like to autofill the pre-chat survey for customer’s who are logged in to your site.

Passing data from your site to Gnatta

In order to do this, you would need to place the following line of code into your JavaScript chat code.

You would add this new line underneath Gnatta.Configure, but before Gnatta.Initiate (see the example below).

To find the ID of the Gnatta data field, navigate to Configuration > Advanced > Dynamic Data > Your field name and select the GUID. This is the ID of the field.

Autofill the pre-chat survey for users who are logged in

If your customer has accessed a logged in area of your website, you can pass the Name and Email from your page to Gnatta to set the ‘originator’ of the chat - this means they won’t need to enter this information in the pre-chat survey.

In order to do this, you would need to place the following line of code into your JavaScript chat code.

Similar to the gnatta.set function above, this needs to be placed in between the gnatta.configure and gnatta.initiate functions (see example below).

Proactive chat triggers

If you’d like to proactively offer a chat button after a particular amount of time on a page, you’ll need to add { delay: 60 } into the Gnatta.Initiate section in your JavaScript snippet on the relevant pages. This duration is measured in seconds - simply adjust the number as required, and add it into your JavaScript snippet.

Here’s an example:

After Advanced Chat is setup

Once your Advanced chat account has been set up on the domain you will need to configure your users, create teams to manage your schedule, and set up user states to support shift handovers. Check out this article for next steps:

https://gnatta.atlassian.net/wiki/spaces/HELP/pages/2421948466