Integration of Live Chat Support Widget into Platform 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 platform 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 Required Chat Code
• Integrate Widget into a Platform
• Set Widget Target Audience

Get Lucky Orange Chat Code

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

1. Once registered at Lucky Orange, you’ll be asked to Enter a name for your site (e.g., PaaS 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 platform dashboard main page.

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

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

Integrate Widget into Platform

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

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:

1
2
3
4
5
6

<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 platform 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

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

1
2
3

if (JUser.isBilling()) {
    //paste widget code here
}

• trial users

1
2
3

if (!JUser.isBilling()) {
   //paste widget code here
}

1
2
3
4
5
6

<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?

• Platform FTP Access
• Logo Settings
• Payment Methods Customization
• Welcome Tutorial Customization