Home
Knowledge Base
Advanced Config Guides
How to set up WebChat

How to set up WebChat

This guide will show you how to set Webchat up on your website, opening up a new channel for you to engage with your customers.

If you’d like to see what you’re aiming for, you can see a live version here.

Adding The Code To The Site

Specific Code Required

In order to add the Javascript required to your website, you need the specific code that applies to your instance of webchat.

The code should be copied exactly as described below. Any changes to it may affect the functionality which we cannot be responsible for resolving.

🗝️ The code in question can be requested from your Service Delivery Manager. We have a dummy copy of code available, if you wish to view this please contact your Service Delivery Manager.

There are 3 blocks of code needed:

The JavaScript that you need to add to the website:
- This is required for every page that you want webchat to appear on.
- Your Service Delivery Manager can provide you with API keys for Gnatta.Register and Gnatta.Start.
- This code will be available on your Media Account in Gnatta under the client code section.

<script type="text/javascript" src="https://chat.system.gnatta.com/script/app.js"></script>
<script type="text/javascript">
    
// Use your latest API key
    gnatta.start("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.register("Your Account ID here", "gwc-chatAvailable", "gwc-chatBusy", "gwc-chatOffline");
</script>

The HTML for the button:
- This is required on every page that you want webchat to appear on.
- This can be amended as you see fit, providing you do not change the Class and ID in the HTML.
- The button itself can be styled using your own CSS or amending the HTML.
- This code will be available on your Media Account in Gnatta under the client code section.

<button id="gwc-chatAvailable" type="button" class="btn btn-success hidden">Chat available</button>
<button id="gwc-chatBusy" type="button" class="btn btn-warning hidden">Chat busy</button>
<button id="gwc-chatOffline" type="button" class="btn btn-danger hidden">Chat offline</button>

The CSS for the button position and webchat position:
- This is required on every page that you want webchat to appear on.

.gnatta-inline-webchat-host-fullscreen {
    overflow-y: hidden;
    position: fixed;
}


.gnatta-webchat-hidden {
    display: none;
}

.gnatta-inline-webchat {
    max-width: 400px;
    max-height: 600px;
    width: 100%;
    height: 100%;
    position: fixed;
		bottom: 15px;
		right: 45px;
    overflow: hidden;
    visibility: visible;
    z-index: 99999;
    border: 0;
}


.gnatta-inline-webchat iframe {
    width: 100%;
    height: 100%;
	border: 1px solid #e1e1e1;
    box-shadow:0 24px 0;
}

.gnatta-inline-webchat-collapse {
    max-width: 400px;
	max-height: 46px;
    position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 9999;
}

@media screen and (max-width: 430px) {
    .gnatta-inline-webchat-collapse {
        width:100%;
        max-width: 100%;
        max-height: 46px;
        position: fixed;
        bottom: 0px;
        right: 0px;
        z-index: 9999;
    }
}

.gnatta-inline-webchat.fullscreen {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: 0;
    padding: 0;
    margin: 0;
    float: none;
	z-index: 9999;
	border: none;
}

It is key that all 3 pieces of code are loaded and are present on the initial loading of the page you are implementing WebChat on. There can be inconsistent behaviour if your page is not doing this on the code is being contained/ controlled in GTM.

Passing data from your site to Gnatta

You can pass data values from your site through Gnatta. This is separate to pre-chat data that a customer completes. Examples of this may be checkout information, the page the chat is being started from or customer information (if the customer has an account and is logged into your site).

In order to do this, you would need to place the line below, in the webchat code shared above.

You would add this new line underneath the Gnatta.Start and Gnatta.Register lines.

gnatta.set("[GNATTA DATA FIELD ID YOU WISH TO SET]", { value: '[THE VALUE YOU WISH TO PASS IN]' });

Common FAQ’s

I’m seeing a CORS Policy Error in the console, what do I need to do?

This error means the website you have added webchat to has not been whitelisted by Gnatta. Make sure for both production (live) and test (or even local) areas that you have given your Service Delivery Manager all the detail they need.

Webchat is just showing as “offline”.

This means that there is no team set on the WebChat instance. Your Service Delivery Manager can help you with this.

When I click the button, nothing happens!

Double-check the availability ping on the “Network” tab (after hitting F12).

You should see “availability” pings with a status of 200.

If you’re not, it means you’ve added the code incorrectly to your site.

Please check the code again to make sure the API keys are correctly added within the JS.

If you’re still having issues, your Service Delivery Manager will be able to advise you on the next steps.

I’m not seeing WebChat appear on my site!

This could be due to the code not being present when the page is initially loaded, we’d suggest placing the code mentioned earlier in the article on your page so that when a user visits your site it is loaded and present as the page is visited.

HTML/CSS For Templates

To enable you to personalise your webchat experience for your customers, you can take advantage of our example template. It is fully tested cross-device, so if you do make structural changes to the template that results in the chat not functioning correctly, you can revert back to the initial templates.

🗝️ Please ask your Service Delivery Manager for the Webchat Template file.

Template Visuals

Below are screenshots for what each template represents:

Once Webchat Is Set Up

Once webchat has been set up on the domain you will need to follow the steps provided below:

Add Users To Teams

Add users to the correct teams that are associated with the Webchat queues. You can do this by selecting the user in the Configuration segment and then selecting Teams at the top of the segment. Ensure that you select Save once users have been added.

Set Schedule

You will need to go into the Team segment and then select the teams that will use webchat. From here you will be able to set your schedules. This will determine opening times for the webchats and stop traffic outside of those hours when your advisors are not available.

States

Once you open the Configuration menu in the top right of the screen, select Users & Teams and then click States. You will then need to ensure that users that are taking webchats are set to the correct state to do so, this is usually Online or Available.