Google Tag Manager JSON Import for Intercom Chat Widget (see comments below for instructions)

gtm_intercom.json

{
    "exportFormatVersion": 2,
    "exportTime": "2017-12-23 01:07:53",
    "containerVersion": {
        "path": "accounts/1234567890/containers/8139018/versions/0",
        "accountId": "1234567890",
        "containerId": "12345678",
        "containerVersionId": "0",
        "container": {
            "path": "accounts/1234567890/containers/8139018",
            "accountId": "1234567890",
            "containerId": "12345678",
            "name": "example.com",
            "publicId": "GTM-W245W9T",
            "usageContext": [
                "WEB"
            ],
            "fingerprint": "1513990671635",
            "tagManagerUrl": "https://tagmanager.google.com/#/container/accounts/1234567890/containers/8139018/workspaces?apiLink=container"
        },
        "tag": [
            {
                "accountId": "1234567890",
                "containerId": "12345678",
                "tagId": "8",
                "name": "intercom_0_snippet",
                "type": "html",
                "parameter": [
                    {
                        "type": "TEMPLATE",
                        "key": "html",
                        "value": "<script>\n    window.intercomSettings = { app_id: {{intercom_chat_widget_id}} };\n</script>\n\n<script>\n    (function () { var w = window; var ic = w.Intercom; if (typeof ic === \"function\") { ic('reattach_activator'); ic('update', intercomSettings); } else { var d = document; var i = function () { i.c(arguments) }; i.q = []; i.c = function (args) { i.q.push(args) }; w.Intercom = i; function l() { var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.intercom.io/widget/{{intercom_chat_widget_id}}'; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); } if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })()\n</script>"
                    },
                    {
                        "type": "BOOLEAN",
                        "key": "supportDocumentWrite",
                        "value": "false"
                    }
                ],
                "fingerprint": "1513990671635",
                "firingTriggerId": [
                    "11"
                ],
                "teardownTag": [
                    {
                        "tagName": "intercom_1_widget_styles_logic",
                        "stopTeardownOnFailure": true
                    }
                ],
                "tagFiringOption": "ONCE_PER_EVENT"
            },
            {
                "accountId": "1234567890",
                "containerId": "12345678",
                "tagId": "7",
                "name": "intercom_1_widget_styles_logic",
                "type": "html",
                "parameter": [
                    {
                        "type": "TEMPLATE",
                        "key": "html",
                        "value": "<a class=\"intercom-launcher\" href=\"{{intercom_chat_widget_id}}@incoming.intercom.io\">\n  <div class=\"intercom-icon-close\"></div>\n  <div class=\"intercom-icon-open\"></div>\n  <span class=\"intercom-unread-count\"></span>\n</a>\n\n<style>\n    .intercom-launcher {\n        backface-visibility: hidden;\n        background: {{color_black}};\n        border-radius: 50%;\n        bottom: 20px;\n        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);\n        cursor: pointer;\n        font-family: Helvetica, Arial, sans-serif;\n        height: 0;\n        opacity: 0;\n        outline: 0;\n        position: fixed;\n        right: 20px;\n        transform: scale(0.5);\n        transform-origin: center;\n        transition: opacity 0.25s ease, transform 0.25s ease;\n        width: 0;\n        z-index: 2147483000;\n    }\n\n    .intercom-launcher:focus {\n        outline: 0;\n    }\n\n    .intercom-launcher.intercom-booted {\n        height: 50px;\n        opacity: 1;\n        transform: scale(1);\n        width: 50px;\n    }\n\n    .intercom-launcher * {\n        cursor: pointer;\n    }\n\n    .intercom-unread-count {\n        backface-visibility: hidden;\n        background: {{color_black}};\n        border-radius: 10px;\n        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);\n        box-sizing: border-box;\n        color: #fff;\n        font-size: 12px;\n        height: 20px;\n        line-height: 20px;\n        min-width: 20px;\n        opacity: 0;\n        padding: 0 4px;\n        position: absolute;\n        right: -2px;\n        text-align: center;\n        top: -2px;\n        transform: scale(0.5);\n        transform-origin: center;\n        transition: opacity 0.15s ease, transform 0.15s ease;\n    }\n\n    .intercom-unread-count.active {\n        opacity: 1;\n        transform: scale(1);\n    }\n\n    .intercom-icon-open,\n    .intercom-icon-close {\n        background-position: 50%;\n        background-repeat: no-repeat;\n        border-radius: 50%;\n        bottom: 0;\n        position: absolute;\n        top: 0;\n        transition: transform 0.16s linear, opacity 0.08s linear;\n        width: 100%;\n    }\n\n    .intercom-icon-open {\n        /* below is a data uri of the open icon */\n        /* change it if you'd like a different icon */\n        background-image: url('data:image/png;base64,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');\n        background-position: 50% 70%;\n        background-size: 67% 64%;\n        opacity: 1;\n        transform: rotate(0deg) scale(1);\n    }\n\n    .intercom-open .intercom-icon-open {\n        opacity: 0;\n        transform: rotate(30deg) scale(0);\n    }\n\n    .intercom-icon-close {\n        /* below is a data uri of the close icon */\n        /* change it if you'd like a different icon */\n        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAIVBMVEUAAAD///////////////////////////////////8AAADPn83rAAAACXRSTlMACq47u/I8r7wWzHxoAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAJJJREFUGNNdzzEKhDAQBdAvwtYWW9hbbSdCDrBnWBDS2Sx7A8HSKwgic1tNxj/jmirDC5P/UTSw01V4ri2nMr7xkg/HIAu+Qi6j9HhEcpB1gHFGGCuSTyQTlQ2Vg3ic4x49TVpzwcQXvI+3x/+r0p9eLAfyYhrIWNOSmfZkVlH2Kpm9Z+bJeh68oSYmnlGMnv1X7RZ2SET5id+LAAAAAElFTkSuQmCC');\n        background-size: 25%;\n        opacity: 0;\n        transform: rotate(-30deg);\n    }\n\n    .intercom-open .intercom-icon-close {\n        opacity: 1;\n        transform: rotate(0deg);\n    }\n</style>\n\n<script>\n    var launcher = document.querySelector('.intercom-launcher');\n    var unreadCount = launcher.querySelector('.intercom-unread-count');\n\n    // Initialize Intercom\n    window.Intercom('boot', {\n        app_id: {{intercom_chat_widget_id}},\n        custom_launcher_selector: '.intercom-launcher'\n    });\n\n    // Register callbacks\n    window.Intercom('onShow', function () { launcher.classList.add('intercom-open') });\n\n    window.Intercom('onHide', function () { launcher.classList.remove('intercom-open') });\n\n    window.Intercom('onUnreadCountChange', function (count) {\n        unreadCount.textContent = count;\n        if (count) {\n            unreadCount.classList.add('active');\n        } else {\n            unreadCount.classList.remove('active');\n        }\n    });\n\n    // Wait for Intercom to boot (max 30 seconds)\n    var timeout = setTimeout(function () { clearInterval(interval) }, 30000);\n    var interval = setInterval(function () {\n        if (window.Intercom.booted) {\n            // Add class to show the launcher\n            launcher.classList.add('intercom-booted');\n            clearInterval(interval);\n            clearTimeout(timeout);\n        }\n    }, 100);\n</style>"
                    },
                    {
                        "type": "BOOLEAN",
                        "key": "supportDocumentWrite",
                        "value": "false"
                    }
                ],
                "fingerprint": "1513991259707",
                "tagFiringOption": "ONCE_PER_EVENT"
            }
        ],
        "trigger": [
            {
                "accountId": "1234567890",
                "containerId": "12345678",
                "triggerId": "11",
                "name": "example.com",
                "type": "PAGEVIEW",
                "fingerprint": "1513990779440"
            }
        ],
        "variable": [
            {
                "accountId": "1234567890",
                "containerId": "12345678",
                "variableId": "1",
                "name": "color_black",
                "type": "c",
                "parameter": [
                    {
                        "type": "TEMPLATE",
                        "key": "value",
                        "value": "#000"
                    }
                ],
                "fingerprint": "1513990847622"
            },
            {
                "accountId": "1234567890",
                "containerId": "12345678",
                "variableId": "6",
                "name": "intercom_chat_widget_id",
                "type": "c",
                "parameter": [
                    {
                        "type": "TEMPLATE",
                        "key": "value",
                        "value": "abc1234"
                    }
                ],
                "fingerprint": "1513990858130"
            }
        ],
        "fingerprint": "0",
        "tagManagerUrl": "https://tagmanager.google.com/#/versions/accounts/1234567890/containers/8139018/versions/0?apiLink=version"
    }
}

read full blog post with step-by-step instructions here: https://grandcrucapital.com/how-to-install-intercom-chat-widget-via-google-tag-manager-gtm

how to use this file:

1. download this file
2. upload this file to your GTM account (Admin > Import Container)
3. use these settings:
   • choose workspace: choose whatever workspace you want to import this too
   • import option: choose Merge
   • overwrite or rename: choose "Rename conflicting tags, triggers, and variables"
   • confirm you are importing 2 new tags, 1 new trigger, 2 new variables
4. update variables
   • color_black: rename this variable to whatever your brand color is and update the hex color constant
   • intercom_chat_widget_id: update this constant variable value to whatever your Intercom chat widget ID is
5. optionally, you can edit the CSS (specifically the default Intercom "open" logo icon)
6. click Save, ensure it's working via debugger, then publish!

In sum, your setup should look like this:

The provided initialise script has an incorrect closing </style> instead of </script>.

I was also getting some lint issues so this is what I ended up using;

<script>
    window.intercomSettings = { app_id: {{your_intercom__chat_id_var}} };
</script>

<script>
    (function () { var w = window; var ic = w.Intercom; if (typeof ic === "function") { ic('reattach_activator'); ic('update', intercomSettings); } else { var d = document; var i = function () { i.c(arguments) }; i.q = []; i.c = function (args) { i.q.push(args) }; w.Intercom = i; var l = function () { var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.intercom.io/widget/{{your_intercom__chat_id_var}}'; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); }; if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })()
</script>

I tried Patrick's snippet (great btw!) I seem to get a double image of the Intercom icon as if one is overlaid on the other. The second one comes up a second later and slightly on the edge of the original. Does anyone else get this?