Installing Chat via GTM

Quick links in this article:

1 Enable GTM for your chat account | 2 Create a new tag | 3 Publish and test your chat

In this article, we’ll run through the use of Google Tag Manager to install Gnatta Chat on your website. You’ll need access to your GTM account and both code snippets from your chat account in order to follow these steps.

Please note Google Tag Manager installation is only recommended for Simple Chat accounts. For Advanced Chat accounts, it’s recommended to install the code directly on your site to avoid display issues. Please refer to this article for more information: Using Advanced Chat

Enable GTM for your chat account

First, you’ll need to collect the two code snippets from your chat account. Do this by navigating to Configuration > Channels > Chat > Your account name. You’ll need both snippets.

Collect the relevant code snippets for your chat account

To recap, the purpose of each snippet is as follows:

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), or 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.

To each of these snippets, in order to enable Google Tag Manager you’ll be adding the following parameter to the URL in your code: ?gtm=true.

This parameter needs be added immediately after the URL== in the code snippets. For example, we’ve added the parameter to our chat widget code with button code snippet here:

<!-- Gnatta Chat Button Page Code START -->
<script type="text/javascript" src="{{YOUR CHAT ACCOUNT URL HERE}}==?gtm=true"></script>
<!-- Gnatta Chat Code Button Page END -->

For the chat widget code without button, you can paste it in with an & sign next to the existing renderButton=false parameter.

<!-- Gnatta Chat Button Page Code START -->
<script type="text/javascript" src="{{YOUR CHAT ACCOUNT URL HERE}}==?gtm=true&renderButton=false"></script>
<!-- Gnatta Chat Code Button Page END -->

With your amended code snippets in hand, it’s time to head to Google Tag Manager!

Create a new tag

Once you’ve logged in to your Google Tag Manager account, head to Tags > Add New and create a new Custom HTML tag.

Custom HTML tag for the chat with button code - including the new GTM paramater!

Paste your amended code snippet in, and set it to trigger on the relevant (or all) pages on your website.

Remember, you need the first snippet on any page you want the button to be displayed, and the second (without button) snippet on any pages you want a chat to be able to continue i.e. every other page where you haven’t already added the first code.

Publish and test your chat

Once you’ve added the tag, be sure to click save and then publish your Tag Manager changes to your site. Once caching has completed, the chat button will appear on any pages you’ve set the code to fire on.

Chat not appearing as expected? Check here to troubleshoot: Chat Availability Issues