While we prefer the Khoros platform to be operational at all times, there are times when our product experiences a service disruption. When this happens, it is critical that we inform our customers.

We do this by presenting a platform status banner in our Atlas Community.

Here is an image example of the Khoros Platform Status Banner:

We had some interest here to explain how we achieved this functionality. Let's get into the details!

Since your systems will vary from ours, we have made the integration explanation more generic so that you can more easily adapt it to your needs.

On its surface, this is a pretty simple feature. It is a custom component that conditionally shows markup based on a JSON response. That is what we will walk you through.

Data Source

Each product that we want to monitor has a data source that provides the operational status.

For the Atlas status banner, Community, Care, Marketing, Flow, and CX Insights are all data sources. 

First, we need to connect to those data sources via an API. Like many SAAS companies, we use both internal and external monitoring services.

You'll need to identify what monitoring services your company uses and find the API that returns the statuses you need.

A sample response from a monitoring service could look like the following:

[
  {
    id: "SERVICE_ID"
	name: "SERVICE_NAME",
	platform: "PLATFORM_NAME"
	status: "operational",    
  },
  {
    id: "SERVICE_ID"
	name: "SERVICE_NAME",
	platform: "PLATFORM_NAME"
	status: "degraded_performance",    
  },
  {
    id: "SERVICE_ID"
	name: "SERVICE_NAME",
	platform: "PLATFORM_NAME"
	status: "major_outage",    
  },
  ...
]

Now we need to interpret the above response and render our banner to your community page.

Custom Component

To display the operation status retrieved from the monitoring service, create a custom component in Community > Studio that displays the platform status banner with markup and Javascript (using the LiaAddScript FreeMarker directive).

Markup

In your new custom component, set up the markup you want to display in your community. Note that we have set display:none upon initial render. This hides the component until JavaScript logic (described later) determines if any products have a degraded service status to report.

<div class="my-fancy-status-component-container" id="StatusComponent" style="display: none;">

  <span class="status_container">   
    <span class="status-name">PLATFORM</span>
    <span class="status-separator">:</span>
    <span class="PLATFORM-indicator"></span>
  </span>

  <!-- ... repeat for other platforms -->

</div>

LiaAddScript

In a <@liaAddScript>, make a request to fetch your data and modify your markup.

<@liaAddScript>
;(function($) {

 $.ajax({  
   type: 'GET',  
   url: 'http://example.com/your-status-endpoint',  
   dataType: 'json',  
   success: function(listOfPlatformStatuses) {
	
     listOfPlatformStatuses.forEach(platformStatus => {	
           $(`.${platformStatus.platform}$-indicator`).toggleClass(`${platformStatus.status}`);
	   $(`.${PLATFORM}-indicator`).after(platformStatus.status.split('_').join(' '));
       $('#StatusComponent').show();
	 });

});

})(LITHIUM.jQuery);
</@liaAddScript>

This liaAddScript directive describes the GET endpoint to retrieve the status of the various products you want to monitor.

The url represents the status page of the product.

The success function tags the listOfPlatformStatuses. The listOfPlatformStatuses contain all the responses of the platform from the GET API call.

The forEach function is a built-in function that helps us to trace the list elements one by one (i.e) the Platform status of your product.

The toggleClass function toggles the CSS classes of the platform as per your custom styling.

In the next line, we split the platform status based on ‘_’ and join with ‘ ‘. 

The $('#StatusComponent').show() displays the status of your product in the platform status banner.

You will need to modify the above code to fit your specific use case.

Final Step

Add the customized component to the header of your community page and the platform status banner component is integrated into your community.

Example

If your platform status is degraded_performance, then based on split and join operation and the codes, we make it degraded performance. Then, the toggleClass operation is used to render the degraded performance based on your CSS styling. Finally, the degraded performance is displayed in the Platform Status banner component.