Using both Quriobot and Drift

So, although we have a live chat option in Quriobot, you can use the best of both worlds!

Meaning that you use Quriobot to start your Drift widget if a user wants to talk to a live person and switch back once that conversation is over!

Pretty cool, right? So here is the demo of Quriobot using the Drift widget as a fallback for the live chat:

The live demo is located here.

Step 0: In this explanation I already assume you to have a Quriobot running on your website.

Step 1: Include the Drift installation code on your website:

<!-- 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';
</script>
<!-- End of Async Drift Code -->

Note that this code doesn’t have the drift.load(‘xydzyk4nzg3a’) part, which you should remove from the original snippet, it will be used later on.

Step 2: Add this code AFTER the widget code:

<script>
drift.on('ready',function(api, payload) {
    quriobot.hide();
})
drift.on('sidebarClose',function(e){
    if(e.data.widgetVisible){
        drift.api.widget.hide()
    }
    quriobot.show();
})
</script>

Step 2:  We will make use of the Script Chat Text, Drift Javascript API, and Variables to pre-fill and open the widget:

function() {
    setTimeout(function() {
      drift.on('ready', function(api) {
        api.setUserAttributes({
          email: '{{email}}',
          name: '{{name}}'
        });
        api.sidebar.open()
      })
      drift.load('xydzyk4nzg3a');
    }, 2000)
}

Note: we’re using {{name}} and {{email}} Bot variables to identify the user.

That’s it! If you add this as a response to an answer option, for example, you will start the Drift widget chat and hide Quriobot. Closing the Drift chat will make Quriobot reappear!

Enjoy!

Edit this page