How to combine Joonbot with LiveChat – Joonbot

We don't have a live chat feature but you can combine Joonbot with LiveChat!

LiveChat has the functions you need to hide and open their live chat interface.

On our side, we have a function that allows you to close the Joonbot interface during the conversation.

So you can include at the moment you want, a JavaScript block into your Joonbot conversation flow, that will close the Joonbot interface and then open the liveChat one.

Here is a video that shows you what it can look like. 😊

Here are the steps to follow :

1. Install Joonbot on your page

Check our Joonbot installation section for more information.

2. Install LiveChat widget on your page

Create an account on livechat.com
Go on settings and copy the code

Screenshot_2022-03-18_at_19.34.08.png

In the file serving the first portion of your HTML (<head />) section, copy and paste the code they provide you just before the <head /> tag.

If you can't find the <head /> tag, you can also copy the chatbox code before the end of the HTML body, eg: right before the <body /> tag.

You can also add the script using an HTML component of your CMS.

3. Add the hide function into your LiveChat script to hide the chat interface by default

The function to add is this one:

 (function(){LiveChatWidget.on('ready', () => {LiveChatWidget.call("hide");
})})();

You'll need to add this line into your installation script right before the </script> tag like behind:

<!-- Start of LiveChat (www.livechatinc.com) code -->
<script>
window.__lc = window.__lc || {};
window.__lc.license = XXXXXXXXX;
;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice));
 (function(){LiveChatWidget.on('ready', () => {LiveChatWidget.call("hide");
})})();
</script>
<noscript><a href="https://www.livechatinc.com/chat-with/13831395/" rel="nofollow">Chat with us</a>, powered by <a href="https://www.livechatinc.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a></noscript>
<!-- End of LiveChat code -->

4. Add a button block to ask the user if he wants to talk with an agent

5. Add a JS block with the code below

joonbot.hide();
LiveChatWidget.call("maximize");

Screenshot_2022-03-21_at_12.17.58.png

Here are some explanations:

joonbot.hide();

=> Hides Joonbot

LiveChatWidget.call("maximize");

=> Displays the live chat interface

6. Bonus: You can send data from your Joonbot to your LiveChat dashboard

You just need to add functions in your Javascript code.

It's better to add a javascript block with these new functions right before the Javascript block you just created.

LiveChat, by default, has a form that asks the name and email, you can remove it to ask everything you want before through the chatbot before going into a live chat session.

Screenshot_2022-03-18_at_19.58.18.png

You can also remove some pre-defined messages you have by default in your chat interface.

Screenshot_2022-03-18_at_19.21.20.png

Here are some useful functions you case use to transfer the data collected by Joonbot to LiveChat:

LiveChatWidget.call("set_customer_name", "{{name}}");

=> Sends the name collected by Joonbot to LiveChat

You can ask for the name's person in the Joonbot builder and save it under the variable {{name}}. Then, with the Javascript block, Joonbot can send the info to LiveChat.

Screenshot_2021-12-01_at_14.16.41.png

LiveChatWidget.call("set_customer_email", "{{email}}");

=> Sends the email collected by Joonbot to LiveChat

Same principle applies for the {{email}} creation.

Here is the result!

Screenshot_2022-03-18_at_19.33.03.png

You can find other LiveChat functions like these in their widget JS API documentation.

Enjoy! 😉