So, although we will have a live-chat option in Quriobot one day... Until that moment: How about 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 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 indentify 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!!




Need more help or looking for inspiration? Join the Quriobot community!

Quriobot
Friendly & Fun
Interact & Convert