javascriptreactjschatbotgatsbydrift

Integrating Drift chat service within a Gatsby site


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.


Solution

  • 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');
                `,}}/>