Display StatusPage status on as a header link

UX
1

Hi Team,

I have a script which pulls our systems status from our statuspage.io site and displays this on our discourse site above the header “All Systems Operational”, if the status changes then this is updated automatically to reflect the most up to date status.

image

I am really struggeling to work out how to display this before my header icons rather than above my header, something like this

image

If any one can please assist, I would be eternally grateful.

Kyle

Header Code

      <script type="text/javascript" src="https://cdn.statuspage.io/se-v2.js"></script>
<script>
var sp = new StatusPage.page({ page: 'h2522dcz6bxy'});
sp.summary({
  success: function(data) {
    // adds the text description to the dropdown
    $('.color-description').text(data.status.description);
    // appends the status indicator as a class name so we can use the right color for the status light thing
    $('.color-dot').addClass(data.status.indicator);
  }
});
</script>

<div id="top-navbar">
   <span id="top-navbar-links">
     <a href="https://statuspage.eposnowhq.com/" target="_blank"><span class="color-dot"></span> <span class="color-description"></span></a>
   </span>
 </div>

CSS Styling

$red:#e74c3c;
$orange:#e67e22;
$yellow:#f1c40f;
$green:#2ecc71;

.color-dot {
  -moz-border-radius: 30px; /* or 50% */
  border-radius: 30px;
  display:inline-block;
  width:10px;
  height:10px;
  margin-right:5px;
  &.critical {
    background-color:$red;
  }
  &.major {
    background-color:$orange;
  }
  &.minor {
    background-color:$yellow;
  }
  &.none {
    background-color:$green;
  }
}

.color-description {
    text-transform:uppercase;
}
2

See Custom Header Links but since you need something specific you can try even Add new link on header beside search icon

4 Likes
3

Hi @dax we have tried customizing these but not no avail,

The link text we are trying to position next to the search icon is dynamic and changes depending on the current status on another website.

The two suggestions you submitted don’t allow us to declare the .color-dot and the .color-description classes as the link text which acts to display the current status on the other webiste

I tried combining the custom header link component with my javascript since between them they do what i need it to do, but I have has no luck.