Setting Up Proactive Chat
- Gnatta
- Ryan Crook
- Abbey Brown
Quick links in this article:
The steps below refer to implementation for a Simple chat account. If you’re using Advanced chat, please refer to this article: Using Advanced Chat | Proactive chat triggers If you’re not sure which kind of chat account you’re using, please get in touch.
This article will work through the steps to add a delay to the presentation of chat on your website, so you can proactively offer support to customers who are lingering on specific webpages - such as your checkout page! Before you complete the steps in this article, we’d suggest you complete a standard installation of chat first - or read through this article in detail: Adding Chat To Your Site
How it works
Proactive chat in Gnatta works by adding a delay timer to the presentation of the chat button. By adding a query parameter such as ?delay=10 to the URL in the Gnatta code snippet on your webpage, the chat button will only load after 10 seconds (in this example) have been spent on the page. If the website visitor navigates away before this time, they won’t see the chat button at all.
Query parameters aren’t as technical as they sound - they’re they’re used for a wide range of purposes on the internet to pass, collect or track additional information when you visit a URL. Here’s an article that explains URL parameters in more detail: https://www.semrush.com/blog/url-parameters/
Adding the delay
This query parameter ?delay=10 needs to be added to the URL in the Chat widget code with button that is available in your chat account settings: Configuration > Settings > Channels > Chat > Your account name. When the parameter has been added to your code snippet, it needs to be added to every page you want to present chat proactively on.
To get started, head to your account and grab the Chat widget code with button.
Here’s our example code:
<!-- Gnatta Chat Button Page Code START -->
<script type="text/javascript" src="https://chat.system.gnatta.com/api/client-code/YzgxNmNmZmEtNjI1Yy00ZGM5LTk5OGQtYjIxYjVkY2U0NWU5fDkyOWQ4ZjQ4LTQ0MTMtNDMxMy1iMmE0LTVjMzU3ZDQ5ZWQ4Mw=="></script>
<!-- Gnatta Chat Code Button Page END -->We want to add a delay of 10 seconds, so we’re going to add ?delay=10 to the end of the src URL in the snippet, just after the ==. Like this:
<!-- Gnatta Chat Button Page Code START -->
<script type="text/javascript" src="https://chat.system.gnatta.com/api/client-code/YzgxNmNmZmEtNjI1Yy00ZGM5LTk5OGQtYjIxYjVkY2U0NWU5fDkyOWQ4ZjQ4LTQ0MTMtNDMxMy1iMmE0LTVjMzU3ZDQ5ZWQ4Mw==?delay=10"></script>
<!-- Gnatta Chat Code Button Page END -->And that’s it! Simply add this code snippet just before the closing </body> tag in your website's HTML on all pages where you’d like to proactively offer the chat button (being sure to replace the existing snippet, if chat is already installed on your site).
Note that you’ll also need the Chat widget code without button on every other page of your site, to allow visitors to continue the conversation even after they leave the page they started the chat on. Please refer to Adding Chat To Your Site for more information.
Troubleshooting
If you’re having trouble with chat availability on your site, check out this article:
After adding chat to your site
If this is an amendment to an existing chat account where you’ve already configured the routing workflows, your work here is done! However, if this is a brand new chat account, you’ll still need to resolve routing 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:
Â