Adding Chat To Your Site

Quick links in this article:

This guide will work through creating and connecting a chat account to your teams, then launching Gnatta Chat on your website.

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), the last step before adding the code to your site is to add your website as an Allowed Domain for your chat account.

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.

If you’d like to add the code to your site via Google Tag Manager, check out this article for steps to create your tags correctly: Installing Chat via GTM

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.