Using both LiveAgent & Quriobot!

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 LiveAgent solution if a user wants to talk to a live person and switch back once that conversation is over!

Pretty cool, right? So here is how to do that, but if you rather watch a Video about that, you can see it here:

Here’s also a live demo of the integration.

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

Step 1: If you didn’t already have an account, create an account at LiveAgent:https://www.liveagent.com/

Step 2: For this, you need to extend the default widget code that LiveAgent supplies because the chat will only be launched after selecting that option in your Quriobot, so you will need the Advanced Button Integration, with details that can be found here. Next to that, we want Quriobot to start again when your live-chat session has ended, so for that, we need some ’ on close’ magic, with more info here (only the ‘on close’ logic is needed in this case)

The LiveAgent widget code you need to add before the end of the section in your HTML page should look like this:

    <script type="text/javascript">
    var chatButton;
    (function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
    'https://YOURURL.ladesk.com/scripts/track.js',
    function(e){ chatButton = LiveAgent.createButton('YOURID', e);
    chatButton.oldOnCloseFunction_ = chatButton.onCloseFunction_;
    chatButton.onCloseFunction_ = function() 
    {
    chatButton.oldOnCloseFunction_(); 
    quriobot.show();
    }
    });
    </script>

Note1: Notice the added code on lines 2 and 6 - 11. This is to be able to start LiveAgent from Quriobot, send data to LiveAgent, and finally restart Quriobot when LiveAgent has finished.

Note2 : please change your YOURURL and YOURID in the code above to your own supplied by LiveAgent and also notice the quriobot.show_frame();(line 10)which is needed to make Quriobot appear again

If you don’t want the behavior when Quriobot reappears after the live agent’s chat is closed, your code has to be then:

<script type="text/javascript">
var chatButton;
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://YOURURL.ladesk.com/scripts/track.js',
function(e){
    chatButton = LiveAgent.createButton('YOURID', e);
});
</script>

Step 3. Add an initialization script so that when the Live Agent widget is activated, the Quriobot one is hidden:

{
    onInit: function() {
      if (LiveAgent.instance.hasOpenedWidget()) {
        window.quriobot.hide()
      }
    },
    onLoad: function() {
      if (LiveAgent.instance.hasOpenedWidget()) {
        window.quriobot.hide()
      }
    }
}

Step 4: LiveAgent offers some functions for passing data from Quriobot to the LiveAgent chat. It is described on this page.

Enable the custom live chat for the bot and enter this script to start LiveAgent and hide Quriobot.

function() {
    LiveAgent.setUserDetails('{{email}}', '{{first_name}}', '{{last_name}}', '{{phone}}');
    LiveAgent.addTicketField('qb_data', '{{variable}}');

    LiveAgent.addTicketField('qb_transcript_text', '{{chatTranscriptText}}');

    LiveAgent.addTicketField('qb_transcript_url', '{{chatTranscriptURL}}');
    chatButton.onClick();
    setTimeout(function() {
    quriobot.hide();
    }, 0)
}

Step 5. Where you need in the conversation, add a Response with the live chat next target:

Enjoy!

Edit this page