Intercom Chat widget HTML/CSS/JS for Google Tag Manager (GTM) (see comments below for install instructions)

gtm_intercom_1_widget_styles_logic.html

<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>

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

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.