Skip to content

Integration with GTM

How to use SDK with Google Tag Manager

Step 1

Create a new tag with a 'Custom HTML' type.

Custom HTML

Step 2

Copy and paste the snippet below in section HTML. Replace %id% with a real app id. This snippet injects SDK scripts into a webpage. You can configure instance in section Dialogshift.instance(...options).

<script>
  ;(function() {
    function loadStyle(href) {
      var style = document.createElement('link')
      style.href = href
      style.type = 'text/css'
      style.rel = 'stylesheet'
      document.getElementsByTagName('head')[0].appendChild(style)
    }

    function loadScript(src, callback) {
      var script = document.createElement('script')
      script.async = true
      script.src = src

      var isLoaded = false
      script.onload = script.onreadystatechange = function() {
        if (!isLoaded && (!this.readyState || this.readyState == 'complete')) {
          callback()
        }
      }

      document.getElementsByTagName('head')[0].appendChild(script)
    }

    function loadSDK(callback) {
      var sdkJsCdn =
        'https://cdn.jsdelivr.net/npm/dialogshift-webchat-sdk/bundles/dialogshift-webchat-sdk.umd.js'
      var sdkCssCdn =
        'https://cdn.jsdelivr.net/npm/dialogshift-webchat-sdk/bundles/dialogshift-webchat-sdk.min.css'

      loadScript(sdkJsCdn, callback)
      loadStyle(sdkCssCdn)
      loadStyle('https://fonts.googleapis.com/css?family=Open+Sans')
    }

    loadSDK(function() {
      Dialogshift.instance({
        id: '%id%',
      })
    })
  })()
</script>

Step 3

Choose Triggering All pages and save the tag.

Final view