So, although we will have a live-chat option in Quriobot one day... Untill 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:




Step 0: In this explanation I already assume you to 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 cannot 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 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_frame();
        }
       });
    </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


Step 3: LiveAgent offers some functions for passing data from Quriobot to the LiveAgent chat. It is described on this page. In the following example three Variables are being sent to LiveAgent

function() {
  LiveAgent.addUserDetail('email','{{email}}');
  LiveAgent.addUserDetail('firstname','{{first_name}}');
  LiveAgent.addTicketField('qb_data', '{{<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>data}}');
}


Step 4: To start LiveAgent you only need two calls to make it work: 1 to start LiveAgent and 1 to hide Quriobot.

function() {
    setTimeout(function(){
    chatButton.onClick();
          quriobot.hide_frame()
          document.getElementById("botbutton").classList.remove('show');
  }, 2000)
}



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!


Extra: If you want the Quriobot sticky avatar to be hidden as well when you start the LiveAgent solution, simply add the following line to the code and the Sticky avatar will be hidden until you make it reappear when closing the live-chat.

function() {
  chatButton.onClick();
  quriobot.hide_frame();
    setTimeout(function(){
    document.getElementById("botbutton").classList.remove('show');
  }, 1000)
}



Enjoy!!




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

Quriobot
Friendly & Fun
Interact & Convert