Integration of Live Chat Support Widget into Jelastic Dashboard

In order to make it easier for end-users to reach platform support specialists and receive the required technical consultation almost instantly, cluster administrators can integrate live chat widget into the Jelastic dashboard. Such online assistance allows increasing retention rates of new-coming customers and getting fewer support submissions by resolving small issues directly via chat.

Below, we’ll consider how to embed such a tool with the example of Lucky Orange Chat integration - a simple but yet powerful conversational service. If needed, it can be fully customized according to a preferred display style, supports predefined answers storing for the most frequent questions, and provides co-browsing to indicate the required actions on visitor’s screen during the consultation.

However, you can use any other similar live chat service of your choice - the steps would be the same:

Get Lucky Orange Chat Code

The first thing you need to do is to fetch the appropriate widget code to integrate it into the Jelastic dashboard. In most cases, you’ll need to create an account at the chosen service for that.

Tip: Lucky Orange provides a 7-day trial period so that you can get started with it completely for free. Further, if you enjoy using this tool, you’ll need to upgrade your account plan.

  1. Once registered at Lucky Orange, you’ll be asked to Enter a name for your site (e.g. Jelastic Dashboard). It will be used to designate your web project within Lucky Orange dashboard (this helps to differentiate gathered monitoring data if hosting multiple websites).

  2. After that, you’ll be shown a widget tracking code, intended to be added to your Jelastic dashboard main page.

Consequently, this code can be fetched at any time by navigating to Settings > Tracking Code within Lucky Orange dashboard.

  1. Also, you need to make your account Available for chat with the appropriate button in the top right corner of the Lucky Orange dashboard.
Tip: To customize the appearance of your live chat widget, and define its exact position within the Jelastic dashboard, use the Settings menu (gear icon in the image above).

Integrate Widget into Platform

Now let’s consider how to integrate the obtained live chat widget code into your Jelastic user dashboard. For that, you’ll need to access the resources' application of your platform (app.{platform_domain}) via FTP.

Tip: If you’ve lost your password for the FTP connection, please contact your technical account manager for assistance.

  1. Once connected, navigate to the public_html folder and update footer.html file (or create it in case of absence) by adding the obtained Lucky Orange code (or any other widget written in JavaScript) to the indicated point:
<script type='text/javascript'>
JApp.switchPhase = Ext.createInterceptor(JApp.switchPhase, EventBus.fireEvent, EventBus);
EventBus.on("ready", function () {
    //paste widget code here
 });
</script>

As a result of such implementation, live chat will start launching once the Jelastic dashboard is fully loaded (in such a way, ensuring no slowdown will be caused).

  1. When you are finished, save the changes and open the following link to initiate their appliance:

https://app.{platform_domain}/rebuild

Tip: 

Besides the base widget functionality, Lucky Orange services include automatic monitoring of user activity on your website - the appropriate data can be viewed upon selecting the required site within Lucky Orange dashboard main page.

In such a way, your live chat will appear at your platform dashboard, allowing users to ask for help in case they face any issue.

Set Widget Target Audience

It’s possible to make your live chat available for a particular group of users only. To define the target audience, you need to wrap up your widget code into the appropriate conditional statement. For example, you can make it visible only for:

  • billing users
*if (JUser.isBilling()) {*

   //paste widget code here

}

  • trial users
if (!JUser.isBilling()) {*
   //paste widget code here
}
Tip: In order to automatically provide operator with an email address of a user who is currently active on the chat, add the following code:
<script type='text/javascript'>
JApp.switchPhase = Ext.createInterceptor(JApp.switchPhase, EventBus.fireEvent, EventBus);
   EventBus.on("ready", function () {
      JUser.GetEmail();
   });
</script>

In such a way, by specifying the corresponding widget’s code, you can provide different chats for your billing and trial users' live support (or allocate separate teams for these tasks).

What’s next?