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 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 </head> 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 line 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()
      }

Step 4: LiveAgent offers some functions for passing data from Quriobot to the LiveAgent chat. It is described on this page. Create a chat text of type Script

To start LiveAgent you need such a script to make it work: to start LiveAgent and to hide Quriobot.

function() {
setTimeout(function(){
    quriobot.hide();
chatButton.onClick();
}, 3000)
LiveAgent.setUserDetails('{{email}}', '{{first_name}}', '{{last_name}}', '{{phone}}');
LiveAgent.addTicketField('qb_data', '{{variable}}');
}


    }
}


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



Enjoy!!




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

Quriobot
Friendly & Fun
Interact & Convert