Drift chat opening in every page

Question

I have drift's async script code in the index.html file of the react app.

<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('----api----');
    drift.on('ready', api => {
      api.widget.hide();
    })
  </script>

The issue is, it is getting popped up in every page of the app whereas I want it only when I click a button(onClick)

The function to trigger onClick :

openDriftChat = () =>{
    const { setDriftState } = this.props;
    if (window.drift.api) {
      //this needs to happen only once but currently happening on every page load
      if (!this.props.driftInit) {
        if (localStorage.token) {
          var tokenBase64 = localStorage.token.split(".")[1];
          var tokenBase64_1 = tokenBase64.replace("-", "+").replace("_", "/");
          var token = JSON.parse(window.atob(tokenBase64_1));
          window.drift.identify(token.email, {
            email: token.email,
            nickname: token.name
          });
          setDriftState(true);
        }
      }
      window.drift.api.openChat();
    }
  }

I basically want it pop up only when I call the function.

Answer 1

Hello I had the same issue:

To hide the welcome message use the following css code

iframe#drift-widget.drift-widget-welcome-expanded-online {
display: none !important;
}

iframe#drift-widget.drift-widget-welcome-expanded-away {
display: none !important;
}

The welcome message will only be shown when your drift button. Some extra info:

To hide the drift button icon use the following js code

drift.on('ready', function (api) {

    api.widget.hide()
    drift.on('message', function (e) {
        if (!e.data.sidebarOpen) {
            api.widget.show()
        }
    })
    drift.on('sidebarClose', function (e) {
        if (e.data.widgetVisible) {
            api.widget.hide()
        }
    })
})

To call for the sidebar from a specific button use the following

Javascript

    (function () {
    var DRIFT_CHAT_SELECTOR = '.drift-open-chat'
    function ready(fn) {
        if (document.readyState != 'loading') {
            fn();
        } else if (document.addEventListener) {
            document.addEventListener('DOMContentLoaded', fn);
        } else {
            document.attachEvent('onreadystatechange', function () {
                if (document.readyState != 'loading')
                    fn();
            });
        }
    }
    function forEachElement(selector, fn) {
        var elements = document.querySelectorAll(selector);
        for (var i = 0; i < elements.length; i++)
            fn(elements[i], i);
    }
    function openSidebar(driftApi, event) {
        event.preventDefault();
        driftApi.sidebar.open();
        return false;
    }
    ready(function () {
        drift.on('ready', function (api) {
            var handleClick = openSidebar.bind(this, api)
            forEachElement(DRIFT_CHAT_SELECTOR, function (el) {
                el.addEventListener('click', handleClick);
            });
        });
    });
})();

HTML

<a class="drift-open-chat">Open Chat</a>

I hope this helps someone out there.

PS: The above javascript code must be included after you have initialized your drift widget.

Answer 2

You need to disable that through the application: turn off the Playbooks. Here is the link to do so: https://app.drift.com/playbooks

Hope it helps.