Adding Chat To Your Site

Quick links in this article:

This guide will work through launching Gnatta Chat on your website - you won’t need any technical knowledge to do it, although you will need access to your website management system (WordPress, Umbraco, WIX etc.) to be able to attach our code to your site. If you’d like to test your Chat account flows before going live, check out: Testing Gnatta Chat first.

About Gnatta Chat

Gnatta Chat presents as a popout window on the customer’s screen, and will persist across pages of your site. Key features include:

• Pre-Chat Surveys

• Post-Chat Surveys

• Fallback (Out-of-hours) Forms

• Chatbots (quick replies)

• Emojis & attachments

• Proactive chat timers

• and more!

To view an example of Gnatta Chat in a live environment, check out the chat button in the bottom right corner on the Gnatta.com website. We’re using Simple Chat for this.

Open

Chat on the Gnatta.com website

Creating an account

First, you’ll need to create a new Gnatta Chat account in your Gnatta domain. Navigate to Configuration > Settings > Chat > Add Account.

Open

Create a new account in your domain Settings

In the popup window, you can select your primary brand colour and complementary text colour - this is what will display in the header of your chat window.

If you’re not sure, you can leave these colours as the defaults and edit them later.

Gnatta will then generate the code for your chat account - your chosen account name will appear in the list on the left.

Connect a team to your account

Before proceeding, it’s important you select a team for your new chat account, because this is how Gnatta determines:

• Who is allowed to respond - for security purposes, only users who are in a team mapped to the account can respond to those interactions, regardless of whether they’re assigned on their radar.

• What availability there is - based on the opening hours schedule of the team(s) associated to the account. If an interaction is received after hours, you can create workflows to handle it differently

Additional customisation

Before you turn on your chat, there are additional customisation options to explore:

• Configure pre- and post-chat surveys: Configuring Chat Surveys

• Setup a fallback form to collect customer details when you’re offline

• Design a chatbot journey (to hand off to an agent, or collect data when you’re not there)

After adding your chat account

Right now, your chat account has been created but chats are not yet being routed to agents (or a chatbot!). You’ll need to think about queues, and whether you want to sort interactions based on data found in the pre-chat surveys or send them all into one pot of work. Check out this article for next steps:

Installing Chat

Once you’ve created your account, and set up your routing flows (see Chat Routing Overview for more information), you’ll need to do two things to get chat on your site:

• Add your website’s domain as an Allowed Domain in your Gnatta account

• Add the relevant code snippets to your website

To add an Allowed Domain, navigate to Configuration > Settings > Channels > Domains and add your website domain i.e. gnatta.com or mycompany.co.uk or example.org.

Next, you’ll need to add the relevant code snippet(s) to your website. There are two blocks of code to consider:

• Chat widget code with button

  • This code is just for the pages where you want to display chat as an option - that might be every page (like it is on the Gnatta.com site), but it might just be on your customer service and checkout pages.

• Chat widget code without button

  • We’d recommend pasting this code onto every other page of your site that does not contain the first script - to ensure the customer can continue the conversation even if they continue to navigate your website.

We don’t recommend using Google Tag Manager to install Gnatta Chat, because the code needs to be present when the page loads. GTM loads after the page, which can cause inconsistent behaviours in chat presentation.

Testing your Chat account

Configuration ready, but not sure you want to go live with it on your website straightaway? Check the article below for guidance on testing your Chat account in a private test environment instead.