Integration of Live Chat Support Widget into Jelastic Dashboard

live chat logoTo make it easier for end-users to reach Platform support specialists and receive the required technical consultation almost instantly, cluster administrators are able to integrate live chat widget into Jelastic dashboard. Such online assistance allows to increase retention rate of new-coming customers and get fewer support submissions by resolving small issues directly via chat.

 

live chat widget for dashboard

 

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

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

Get Lucky Orange Chat Code

Obviously, the first thing you need to do is to fetch the appropriate widget code for its consequent integration into Jelastic dashboard - in most cases, you’ll need to create account at the chosen service for that.

Tip: Lucky Orange provides 7-day trial period, so 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 provide a name for your site (e.g. Jelastic Dashboard), which will be used to define your web project within Lucky Orange dashboard (this helps to differentiate gathered monitoring data if hosting multiple websites).

 

Lucky Orange add site

 

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

 

Lucky Orange chat code

 

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

3. Lastly, you need to make your account Available for chat with the appropriate button in the top right corner of the the Lucky Orange dashboard.

Lucky Orange available for chat

Tip: Within Settings menu (gear icon in the image above), you can customize the exact position and appearance of your live chat to match Jelastic dashboard style.

Integrate Widget into Platform

Now let’s consider how to actually 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 (res.{platform_domain}) via FTP.

Tip: If you’ve lost your password for 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 be launched only after Jelastic dashboard is fully loaded, in such a way ensuring no slowdown will be caused. 

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

https://app.{platform_domain}/rebuild

live chat widget for dashboard minimized

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

Lucky Orange monitoring

In such a way, your live chat will appear at your Platform dashboard, allowing users 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 just 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 users live support and online assistance for trial ones or just have separate teams for the tasks.