Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Intercom Chat widget HTML/CSS/JS for Google Tag Manager (GTM) (see comments below for install instructions)
<a class="intercom-launcher" href="{{intercom_chat_widget_id}}@incoming.intercom.io">
<div class="intercom-icon-close"></div>
<div class="intercom-icon-open"></div>
<span class="intercom-unread-count"></span>
</a>
<style>
.intercom-launcher {
backface-visibility: hidden;
background: {{color_black}};
border-radius: 50%;
bottom: 20px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
cursor: pointer;
font-family: Helvetica, Arial, sans-serif;
height: 0;
opacity: 0;
outline: 0;
position: fixed;
right: 20px;
transform: scale(0.5);
transform-origin: center;
transition: opacity 0.25s ease, transform 0.25s ease;
width: 0;
z-index: 2147483000;
}
.intercom-launcher:focus {
outline: 0;
}
.intercom-launcher.intercom-booted {
height: 50px;
opacity: 1;
transform: scale(1);
width: 50px;
}
.intercom-launcher * {
cursor: pointer;
}
.intercom-unread-count {
backface-visibility: hidden;
background: {{color_black}};
border-radius: 10px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
box-sizing: border-box;
color: #fff;
font-size: 12px;
height: 20px;
line-height: 20px;
min-width: 20px;
opacity: 0;
padding: 0 4px;
position: absolute;
right: -2px;
text-align: center;
top: -2px;
transform: scale(0.5);
transform-origin: center;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.intercom-unread-count.active {
opacity: 1;
transform: scale(1);
}
.intercom-icon-open,
.intercom-icon-close {
background-position: 50%;
background-repeat: no-repeat;
border-radius: 50%;
bottom: 0;
position: absolute;
top: 0;
transition: transform 0.16s linear, opacity 0.08s linear;
width: 100%;
}
.intercom-icon-open {
/* below is a data uri of the open icon */
/* change it if you'd like a different icon */
background-image: url('data:image/png;base64,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');
background-position: 50% 70%;
background-size: 67% 64%;
opacity: 1;
transform: rotate(0deg) scale(1);
}
.intercom-open .intercom-icon-open {
opacity: 0;
transform: rotate(30deg) scale(0);
}
.intercom-icon-close {
/* below is a data uri of the close icon */
/* change it if you'd like a different icon */
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAAD///////////////////////////////////8AAADPn83rAAAACXRSTlMACq47u/I8r7wWzHxoAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAJJJREFUGNNdzzEKhDAQBdAvwtYWW9hbbSdCDrBnWBDS2Sx7A8HSKwgic1tNxj/jmirDC5P/UTSw01V4ri2nMr7xkg/HIAu+Qi6j9HhEcpB1gHFGGCuSTyQTlQ2Vg3ic4x49TVpzwcQXvI+3x/+r0p9eLAfyYhrIWNOSmfZkVlH2Kpm9Z+bJeh68oSYmnlGMnv1X7RZ2SET5id+LAAAAAElFTkSuQmCC');
background-size: 25%;
opacity: 0;
transform: rotate(-30deg);
}
.intercom-open .intercom-icon-close {
opacity: 1;
transform: rotate(0deg);
}
</style>
<script>
var launcher = document.querySelector('.intercom-launcher');
var unreadCount = launcher.querySelector('.intercom-unread-count');
// Initialize Intercom
window.Intercom('boot', {
app_id: {{intercom_chat_widget_id}},
custom_launcher_selector: '.intercom-launcher'
});
// Register callbacks
window.Intercom('onShow', function () { launcher.classList.add('intercom-open') });
window.Intercom('onHide', function () { launcher.classList.remove('intercom-open') });
window.Intercom('onUnreadCountChange', function (count) {
unreadCount.textContent = count;
if (count) {
unreadCount.classList.add('active');
} else {
unreadCount.classList.remove('active');
}
});
// Wait for Intercom to boot (max 30 seconds)
var timeout = setTimeout(function () { clearInterval(interval) }, 30000);
var interval = setInterval(function () {
if (window.Intercom.booted) {
// Add class to show the launcher
launcher.classList.add('intercom-booted');
clearInterval(interval);
clearTimeout(timeout);
}
}, 100);
</style>
@benjaminhoffman

This comment has been minimized.

Copy link
Owner Author

@benjaminhoffman benjaminhoffman commented Dec 23, 2017

read full blog post here:

Want to skip the manual steps of adding Intercom chat widget to your website? Simply download the GTM JSON export that you can import with just a few clicks: https://gist.github.com/benjaminhoffman/00fa0cbc6cf734958ad79d286edc6438

If you still would like to install this logic manually, you'll also need this GTM Tag: https://gist.github.com/benjaminhoffman/2c8358dc482fd0d2d41fc0d6ec7cee2f

@benjaminhoffman

This comment has been minimized.

Copy link
Owner Author

@benjaminhoffman benjaminhoffman commented Dec 23, 2017

Install steps:

  1. create a new GTM tag
  2. paste this code into that tag
  3. optionally, you can edit the CSS (specifically the default Intercom "open" logo icon)
  4. add a new GTM variable (constant value) that is your Intercom ID and name that variable intercom_chat_widget_id
  5. add a new GTM variable (constant value) that is your brand color color_black
  6. click save, debug, then publish!

Do NOT set a trigger for this event. If you followed the instructions for the other Intercom GTM snippet then this tag will automatically fire immediately after that tag completes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment