Using both Quriobot and Tawk-To!

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 Tawk.To 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 Tawk.To widget as a fallback for the live chat:

The live demo is located here.

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

Step 1: Include the Tawk.To installation code on your website:

Step 2: Enable developer mode:

Step 3: Add this code to the advanced initialization of the bot:

{
onInit: function() {
    if (!quriobot.store.get('qbClosed')){
      Tawk_API.hideWidget();
    } else {

        quriobot.hide()

    };
    Tawk_API.onChatEnded = function(){
        setTimeout(function() {
            Tawk_API.hideWidget();
            quriobot.store.set('qbClosed', false);
            quriobot.show()
        }, 1000)
    };
}
}

Step 4: We will make use of the Script Chat Text, Tawk.To Javascript API and Variables to pre-fill and open the widget:

function() {
    quriobot.hide_frame();
    quriobot.store.set('qbClosed', true);
    setTimeout(function(){
        document.getElementById("botbutton").classList.remove('show');
        Tawk_API.showWidget();
        Tawk_API.toggle();
    }, 3000)
    Tawk_API.setAttributes({
        name: "{{name}}",
        email: "{{email}}"
    });
}

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 Tawk.To widget chat and hide Quriobot. Closing the Tawk.To chat will make Quriobot reappear!

Enjoy!

](https://developer.helpscout.com/beacon-2/web/javascript-api/)

Edit this page