I recently installed Intercom’s chat widget with Google Tag Manager. Below I explain why I did this and give a step-by-step on how you can easily use this code to customize your chat widget to match your brand and logo.
Free Download: I exported my GTM settings for this post. If you want the shortcut to this post, simply click here to download the Intercom Chat Widget Tags/Triggers/Variables for Google Tag Manager. Now all you have to do is import it to GTM and update a handful of the settings!
FAQs First.
There are some preliminary questions I should get out of the way…
Why install Intercom’s chat widget for your marketing site (i.e. logged-out users)?
The use case for us was that we needed chat for potential customers. In other words, our marketing team and sales team wanted a way to chat with customers; we did not want the widget to replace our other customer support channels. Thus, we only wanted it to pop up when our website visitors were browsing our landing pages, homepage, etc.
Why did you install Intercom via Google Tag Manager (GTM) and not via Segment or even directly on your website?
We used GTM for a few reasons. Firstly, as an front-end engineer, I am hesitant every time I’m asked to install a third party tool on our website. I’m always told, “just paste this JavaScript as high up in the <head> as possible, no big deal.” haha, famous last words. I hate doing this because it can hurt your website’s performance and can even break your website (I’ve seen both play out in real life). By installing third-party JavaScript via GTM, you don’t necessarily avoid these pitfalls but it does make it easier to manage and isolate problems when things start to go haywire.
Secondly, it is simply easier to paste in a snippet of JS within GTM and click “publish” vs. having to figure out how the snippet should be configured within your tech stacks and build systems. No matter how simple your codebase is, there’s always a little bit of configuration that’s required.
Thirdly, using GTM gives me more control. In this particular instance, we needed the widget installed on three different codebases. It was literally 10x easier to simply paste the widget into GTM than fighting with each codebase’s nuances. Equally important, when our marketing and sales team comes back to us to remove or edit the widget, I only have to do this once.
Lastly, we didn’t use Segment because 1) GTM is free and Segment charges per user (even for anonymous users!), 2) we needed more granular targeting that Segment does not yet support (specifically the widget was to show on only a handful of URLs). So between the cost factors and granular targeting, GTM was the clear winner.
Why did you customize the widget and not simply use Intercom’s default widget?
We wanted it to match our branding and the customization process is fairly straightforward. I provide steps below.
But I thought Intercom does not recommend using Google Tag Manager and says it will perform inconsistent?
Correct. Intercom has stated not to use GTM to install their widget. That said, this solution is for anonymous users only (i.e. logged out). I also never really found out why they recommend to not use GTM. Lastly, this solution is working great for us.
What are important links I may need to make this work?
- Matthijs Kuiper’s post that inspired me to write this one!
- Intercom Docs: Install Intercom on your website (for logged-out visitors)
- Intercom Docs: Customize the Intercom Messenger (technical)
- Intercom Docs: Show/Hide the Intercom Default Messenger
Step 1: collect all your JavaScript, HTML, and CSS
The first thing I did was collect all my JavaScript snippets. There are a few:
- Intercom snippet
- custom widget HTML (to create the widget)
- custom widget CSS (to style the widget)
- custom widget JavaScript (to control the widget’s show/hide logic)
Intercom Snippet: This can be found in the settings page of your Intercom account. Also, while you’re in your settings, you may want to spend a moment to customize the background color of the widget as well as the welcome/intro text and other custom settings.
Custom HTML: I’ve made this part easy for you by creating a github gist of HTML code you’ll want to use. I’ve shamelessly copied this from Matthijs’s blog post (linked above). That post is definitely worth a read as it gives a lot of context around customizing your widget.
Custom CSS: Using the same gist, you’ll want to copy the CSS. The only difference between the code in my gist and the one in Matthij’s post is that he wrote his in SASS whereas mine has been refactored to plain-old boring CSS. You’ll want to use my gist snippet because 1) GTM isn’t going to compile SASS for you, and 2) I used a data URI for the image icon.
Further, you’ll notice I left comments in the CSS. You’ll need to customize the snippet for your use case. Specifically, you need to add your brand colors as well as a data URI as the widget icon.
Custom JavaScript: Also in the gist. The reason we need additional JavaScript is because we need to show the chat box when a user clicks on the custom widget. You’ll see from the JS code that we rely on having Intercom already on the page and that when a user clicks on the little widget bubble thing, the chat box will appear. More details below.
Step 2: Create a GTM tag and trigger for the custom HTML, CSS, and JS
For this step, you’ll want to create a brand new CUSTOM HTML tag and paste in all three code blocks (the custom HTML, CSS, and JS from above). I added my HTML to the top, then I added my CSS via a <style> tag, then I added the custom JS via a <script> tag. In sum, the tag code looked something like this:
HTML code here<style>
customized-CSS code here
</style><script>
customized-JS code here
</script>
The reason we put our custom code in a new tag (separate from the Intercom JS snippet) is because it will have different firing logic for each tag. Also, the custom JavaScript relies upon having window.Intercom defined so we must ensure the Intercom snippet fires before the our custom code. Lastly, it’s much cleaner to have this separation of concerns: one tag controls the Intercom code, the other tag controls all the custom styling and logic.
Step 3: Create a GTM tag and trigger for the Intercom snippet
For this step, you’ll want to create another CUSTOM HTML tag. Add an opening <script> and closing </script> tag then paste the Intercom JS snippet in between. Here is a copy of the snippet I used. Take note that I used a custom GTM variable to populate my Intercom ID.
Once that’s pasted in you’ll need to set your trigger. I chose “PAGEVIEW” but you may want to choose DOM Ready if you’re super cautious of page load speed. I think PAGEVIEW should suffice for our purposes.
Here comes the tricky part: Advanced Settings
In a nutshell, we want to fire our custom HTML/CSS/JS tag if and only if the Intercom snippet successfully loads.
To do this, you’ll want to add Advanced Settings to ensure that the instructions from the previous step fire appropriately. Here are the settings:
Important Note: Use GTM variables
You’ll need to update the code to use your Intercom ID and your brand colors. I used a GTM variable to populate both of these values since I found myself using the same value multiple times throughout my code. For the Intercom ID, I named my variable{{intercom_chat_widget_id}} and for my brand color I named my variable {{color_black}}. If you use my GTM container export, these two variables are made for you.
Step 4: Disable the default Intercom widget
Don’t forget to disable to default widget! You don’t want two widgets popping up on your site do you?! See link at the top of this article for instructions on how to do this.
Step 5: Test and click publish in GTM
One of my favorite features of Google Tag Manager is the debugger feature. I always debug my tags before I click publish. You will definitely want to do the same. Click “Preview” and make sure the logic is working as expected. Send a few chats and check that they come thru on the Intercom interface. Also, you may want to navigate to a few pages to ensure the widget convo persists. Once you’ve confirmed it’s working and ready to go live, click “Publish”.
Congrats! That was Easy!
I’d love to hear how your experience was and what you thought of my post. Please tweet this article and share with friends. You can also tweet at me if you have any follow-up: https://twitter.com/BenHoffmanEsq