Integrating Drift chat service within a Gatsby site

Question

I am trying to add in Drift chat service functionality to my Gatsby website. The Drift tutorial states to add this piece of code between the tags;

<!-- Start of Async Drift Code -->
<script>
"use strict";

!function() {
  var t = window.driftt = window.drift = window.driftt || [];
  if (!t.init) {
    if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
    t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ], 
    t.factory = function(e) {
      return function() {
        var n = Array.prototype.slice.call(arguments);
        return n.unshift(e), t.push(n), t;
      };
    }, t.methods.forEach(function(e) {
      t[e] = t.factory(e);
    }), t.load = function(t) {
      var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
      o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
      var i = document.getElementsByTagName("script")[0];
      i.parentNode.insertBefore(o, i);
    };
  }
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('XYZXYZXYZXYZ');
</script>
<!-- End of Async Drift Code -->

However I am not sure where to add this as I cannot find a tag in my project. My project is set out the same was as this - https://github.com/gatsbyjs/gatsby-starter-blog

I am also aware of a gatsby plugin for Drift, but I am not sure how to use this either.

My question is, where do I add this javascript so that it runs in my gatsby based website?

Thanks.

Update - I've run `cp .cache/default-html.js src/html.js` which allows me to add custom HTML to the html.js file. However the custom Drift code is not compiling in this file and a large portion of it is greyed out and there are errors which state JS Expression Expected. — James Brightman, Oct 09 '19 at 14:32

score 2 · Accepted Answer · answered Oct 09 '19 at 15:14

Turns out this comment was what I needed to do - https://stackoverflow.com/a/54835129/5443318

Hope this helps someone else.

 <script
                  dangerouslySetInnerHTML={{
                      __html: `
            "use strict";

            !function() {
              var t = window.driftt = window.drift = window.driftt || [];
              if (!t.init) {
                if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
                              t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ],
                t.factory = function(e) {
                  return function() {
                    var n = Array.prototype.slice.call(arguments);
                              return n.unshift(e), t.push(n), t;
                            };
                }, t.methods.forEach(function(e) {
                                  t[e] = t.factory(e);
                }), t.load = function(t) {
                  var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
                              o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
                              var i = document.getElementsByTagName("script")[0];
                              i.parentNode.insertBefore(o, i);
                            };
                          }
                        }();
                        drift.SNIPPET_VERSION = '0.3.1';
                        drift.load('XYZXYZXYZ');
            `,}}/>

thanks for the answer. It really helped me. The plugin for adding drift to gatsby is not working correct. — Mario, Oct 17 '19 at 10:18
Yes it's a shame that the Gatsby plugin doesn't seem to be working. Glad this was useful though! — James Brightman, Oct 17 '19 at 11:02

Integrating Drift chat service within a Gatsby site

1 Answers1