StatusPage.io customers have always been able to embed data from their status page within their app, but now it's easier than ever. We recently released a completely revamped API interface to easily embed the information from your status page into your management portal, or 4xx and 5xx error pages.
If you haven't already enabled it, you can find more information in your dashboard by enabling it in the Add-on Store.
Benefits Of Embedding Your Status In Your Webapp
Increased Trust
Your systems are probably Fully Operational 99%+ of the time. Use this to your advantage! Giving this a small nod in the footer or help section of your website is a way to subtly but constantly reassuring your customers that everything is going great; people love constant reassurance.
TempoDB includes their system status on every page in their footer.
Image may be NSFW.
Clik here to view.
Deflect Unnecessary Inbound Support Tickets
Everyone has problems from time to time. When something does go wrong, it's better to tell your customers upfront about the problem rather than them writing in and asking what's wrong.
UserVoice displays their current status and links back to their status page directly in their webapp.
Image may be NSFW.
Clik here to view.
Live Demo
Below is a CodePen with a working demo that includes the status of our Acme API Co. demo page in the footer and in the dropdown in the header. The tabs at the top allow you to switch between the actual HTML/CSS/Javascript which have comments showing you how we're constructing the status information. Please feel free to copy as much of this as you want to use it on your own site.
See the Pen StatusPage.io Status Embed Example by Steve Klein (@stevenklein) on CodePen.
Letting Your Customers Hook Into Your Status Page
We also made it really easy for your customers to get information out of your status page as well. If you append "/api" to your status page, you'll find the API docs that explain how to get information about your current status, incidents, components, and even scheduled maintenances. Here's an example of the page.
