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

This FAQ was last modified on: Tuesday, February 23, 2016 11:56am
Category: 

1.  Copy/paste this code onto your site 

 
<!-- Begin Summary Status Widget --> 
<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> 
var sp = new StatusPage.page({ page : '8g7xbc4zyc5l' }); 
sp.summary({ 
success : function(data) { 
jQuery('.status-description').text(data.status.description); 
jQuery('.statusPage-widget').addClass(data.status.indicator); 
}); 
</script> 
<div class="statusPage-widget"> 
<a href="http://status.gatech.edu/" target="_blank"> 
<div class="status-description"></div> 
<div class="status-page-name">status.gatech.edu</div> 
<div class="clear"></div> 
</a> 
</div> 
<!--End Summary Status Widget --> 
 
 
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.