How can I embed Summary Status on WordPress or Drupal Site?

This FAQ was last modified on: Tuesday, March 5, 2019 08:19am
Category: 

1. Copy/paste this code onto your site


Style sheet

This code is an example for the new status.io widget, please feel free to customize it.


<style>
    /* Status.io Widget */
    .status-widget-container {
        width: 100%;
        margin: 1rem 0;
    }

    .status-widget.to-right {
        float: right;
    }

    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

    .status-widget a {
        text-decoration: none;
        color: #000;
    }

    .status-widget h2 {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 1rem;
    }

    .status-widget p {
        margin-top: 0;
        margin-bottom: 0;
        font-size: .8rem;
    }

    .status-info {
        text-align: right;
        float: left;
    }

    .status-indicator {
        float: left;
    }

    .current-status-indicator {
        width: 20px;
        height: 20px;
        margin: .5rem 0 0 .7rem;
        display: inline-block;
        border-radius: 15px;
    }

    .current-status-indicator.small {
        width: 8px;
        height: 8px;
        margin: 0 0 0 5px;
        display: inline-block;
        border-radius: 4px
    }

    .current-status-indicator.green {
        background: #27ae60
    }

    .current-status-indicator.yellow {
        background: #ffa837
    }

    .current-status-indicator.red {
        background: #c44031
    }

    .current-status-indicator.blue {
        background: #00aaf0
    }
</style>

HTML code

This is a customized, basic HTML code snippet for the new status.io widget.


<div class="status-widget-container clearfix">
    <div class="status-widget to-right">
        <a href="https://status.gatech.edu/" target="_blank">
            <div class="status-info">
                <h2 class="current-status-header"></h2>
                <p id="current-status-description" class="small"></p>
            </div>
            <div class="status-indicator">
                <span class="current-status-indicator"></span>
            </div>
        </a>
    </div>
</div>

jQuery code

This code example is fetching the overall status of the services from the new status.io API, it also appends it to the right HTML element in the HTML code snippet.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $('.current-status-indicator').ready(function($){
        var statusAPI = "https://2589849383268831.hostedstatus.com/1.0/status/5be9af0e5638b904c2030699";

        $.getJSON(statusAPI).done(function(data){
            var statusCode = data.result.status_overall.status_code;
            var statusMessage = data.result.status_overall.status;

            if (statusCode === undefined){
                $(".status-widget-container").css("display", "none");
                return;
            }
            // Operational
            if (statusCode === 100){
                $(".current-status-indicator").addClass("green");
                $(".current-status-header").text("Service Status");
                $("#current-status-description").text(statusMessage);
            }
            // Scheduled Maintenance
            if (statusCode === 200){
                $(".current-status-indicator").addClass("blue");
                $(".current-status-header").text("Service Status");
                $("#current-status-description").text(statusMessage);
            }
            // Degraded Performance || Partial Outage
            if (statusCode === 300 || statusCode === 400){
                $(".current-status-indicator").addClass("yellow");
                $(".current-status-header").text("Service Status");
                $("#current-status-description").text(statusMessage);
            }
            // Service Disrtuption || Security Issue
            if (statusCode === 500 || statusCode === 600){
                $(".current-status-indicator").addClass("red");
                $(".current-status-header").text("Service Status");
                $("#current-status-description").text(statusMessage);
            }
        })
    });
</script>

Additional notes

Note: With Drupal, you will need to create Text Format that allows you to add html/javascript code to the site. By going to Configuration > Content authoring > Text formats > Add Text Format.

Example: How to add new text format that allows you to add code on the content of the site. Since adding code into the content of the site may cause many security issues, you need to make sure to give this permission to the right group of people.


2. Make sure that you active theme has NOT already loaded jQuery.

Drupal Site: Typically Drupal Site already have jQuery built into. Therefore, please remove line highlighted in green from your code to avoid jQuery conflict on your site.

WordPress Site: If your active WordPress theme already called jQuery, please remove line highlighted in green from your code to avoid jQuery conflict on your site. Below is an example of how to detect if the jQuery already loaded in your WordPress Theme by using Inspect Element Tool on Chrome.


3. Update the page and you are done! Below are examples of Summary Status Widget on Drupal and WordPress sites.