StatusPage embed widget
You can use the JavaScript and CSS files from this project to embed any current maintenance or incidents from a StatusPage instance. You can restrict this down to specific components if you know their ID.
The JavaScript file hooks into any HTML element with the class of statuspage-embed-container
so it can be loaded asynchronously or placed at the end of the </body>
.
Examples
Full University of Warwick StatusPage embed:
<div class="statuspage-embed-container" data-api-base="https://status.warwick.ac.uk/api"></div>
Restricting to just a few components:
<div class="statuspage-embed-container" data-api-base="https://status.warwick.ac.uk/api"
data-components="["g8s8knp0fqrs","lvy1tzdrjqfd","nf4ymvwshxj1"]"></div>
Data attributes
data-api-base
- the fully qualified base URI, e.g.https://status.warwick.ac.uk/api
data-components
- a JSON array of component IDs - see /api/v2/components.json for a list of component IDsdata-poll-interval
- how often (in milliseconds) the current summary status should be polled. Defaults to60000
(i.e. 1 minute)data-position
- where the widget should be positioned when displayed,bl
,br
,tl
, ortr
. Defaults tobl
(bottom left). Note that on mobile,bl
andbr
are treated as bottom andtl
andtr
as top.data-font-awesome-variant
- which variant of FontAwesome icons should be used,fas
(solid),far
(regular),fal
(light), orfad
(duotone). Defaults tofas
(solid) - note that any other option requires a Pro subscription to FontAwesome.
Content Security Policy
The widget will require a connect-src
directive for the API base specified.
Source code and license
The widget is licensed under the ISC license. Source code is available on GitHub.