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

This FAQ was last modified on: Monday, June 20, 2016 11:26am
Category: 
1.  Copy/paste this code onto your site: 
(This code is an example code for Status Widget for Web Hosting Service)
 
 
 
<style type="text/css">
  .clear{clear:both}.statusPage-widget{display:block;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:20px 10px;color:#fff;margin-bottom:20px}.statusPage-widget.none,.statusPage-widget.operational{background-color:#14ad31;border:solid 1px #11932a}.statusPage-widget.minor,.statusPage-widget.degraded_performance{background-color:#ffc82f;border:solid 1px #e9b72b}.statusPage-widget.major,.statusPage-widget.partial_outage{background-color:#fc8738;border:solid 1px #d77330}.statusPage-widget.critical,.statusPage-widget.major_outage{background-color:#bf0404;border:solid 1px #a40303}.statusPage-widget a{display:block;color:#fff;text-decoration:none}.status-description{float:left;width:65%}.status-page-name{float:left;width:35%;text-align:right;font-size:.8rem}
  /* Add your own Widget style overrides in your site stylesheet or in this style block.
     We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type='text/javascript' src='//cdn.statuspage.io/se-v2.js'></script>
<script type='text/javascript'>
  var sp = new StatusPage.page({ page : '8g7xbc4zyc5l' });
  sp.components({
    success: function(data) {   
 
            var index, len;
            for (index = 0, len = data.components.length; index < len; ++index) {
 
              if (data.components[index].name == "Web Hosting") {
                $('.status-description').text(data.components[index].status);
                $('.statusPage-widget').addClass(data.components[index].status);
                $('.status-page-name').text(data.components[index].name);
              }
            }
 
    }
  })  
</script>
<div class="statusPage-widget">
    <a href="http://status.gatech.edu/" target="_blank">
      <div class="status-description"></div>
      <div class="status-page-name"></div>
      <div class="clear"></div>
    </a>
</div>
 
 
 
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.  
 
3.  Make sure that your active theme has NOT already loaded jQuery. If it does, please do the following:.  
 
Drupal Site: Typically Drupal Sites already have jQuery built in. Therefore, do both of the following:
 
    a) Please remove the line below from your embed code to avoid jQuery conflict on your site.
         <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    b) Wrap the javascript within a jQuery function.

i.e Change:
 
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type='text/javascript' src='//cdn.statuspage.io/se-v2.js'></script>
<script type='text/javascript'>
  var sp = new StatusPage.page({ page : '8g7xbc4zyc5l' });
  sp.components({
    success: function(data) {
            var index, len;
            for (index = 0, len = data.components.length; index < len; ++index) {
              if (data.components[index].name == "Web Hosting") {
                $('.status-description').text(data.components[index].status);
                $('.statusPage-widget').addClass(data.components[index].status);
                $('.status-page-name').text(data.components[index].name);
              }
            }
    }
  })
</script>

To:

<script type='text/javascript' src='//cdn.statuspage.io/se-v2.js'></script>
<script type='text/javascript'>
  jQuery(function($) {
    var sp = new StatusPage.page({ page : '8g7xbc4zyc5l' });
    sp.components({
      success: function(data) {
            var index, len;
              for (index = 0, len = data.components.length; index < len; ++index) {
                if (data.components[index].name == "Web Hosting") {
                  $('.status-description').text(data.components[index].status);
                  $('.statusPage-widget').addClass(data.components[index].status);
                  $('.status-page-name').text(data.components[index].name);
                }
              }
      }
    })
  });
</script>"

Without this edit, the drupal flexslider will not load properly and the page throws conflicts.

 
WordPress Site: If your active WordPress theme already called jQuery, please remove line below 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. 
 
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
4.  Go to status.gatech.edu , look for your service name. We recommend to copy your service name from that page and replace "Web Hosting" with your actual service name.

if (data.components[index].name == "Web Hosting") 

 
You are done!