Once dropped into your website or application it’ll broadcast your Sorry™ status updates direct to your users.

Installing The Plugin

Include the JavaScript

Just before the closing </ body> tag. You can specify which pages you want updates to be sourced from by including your Page ID in the data-for attribute.

<script async src="//code.sorryapp.com/status-bar/4.latest/status-bar.min.js" data-for="xxxxxxx"></script>

Not sure what your Page ID is?

If the address of your status page is http://xxxxxx.sorryapp.com then xxxxxxx is what you need to use as the data attribute. This unique ID can also be found in the browsers address bar within the app. https://app.sorryapp.com/pages/xxxxx

Alternate location of your bar

By default the plugin will add the bar to the top of your page. To choose a specific location instead of using the data-for attribute as above, include the following HTML snippet in your page where you wish the bar to be located.

<div class="sorry-status-bar" data-status-bar-for="xxxxxxx"></div>

Filtering the Notices

Sometimes you’ll not want to display all open notices using the plugin, you’ll want to limit it to perhaps only display ‘planned’ notices, or only those notices affecting a particular component of your service.

We have two data-attributes="" which you can include on the <script /> tag to set these filters.

Filter by Notice Type

<script ... data-filter-type="planned/unplanned" /> will ensure only notices of a given type are displayed using the plugin. Display multiple types by passing them in this attribute as a comma separated list.

Filter by Affected Component

<script ... data-filter-components="999" /> will ensure notices will only be displayed if they directly affect this particular component. If this components related parents, or one it’s children are affected by a notice, the notice will also be displayed. Pass multiple components as a comma separated list.

To find the ID of a component, browse to the ‘components’ section in the Sorry™ UI, choose to edit the given component and you’ll find it’s ID in the URL.

Displaying as a Subscriber

If you have personal details about your user, it’s possible to configure the plugin to register them as a subscriber. The user will then be listed in your account and you’ll be able to target status notices to them, instead of just posting generic site-wide notices.

To do this you need to define their details like so, before you include the status-bar.js.

	window.SorryAPIOptions = {
		subscriber: {
			email: "robrawlins@gmail.com",
			first_name: "Robert",
			last_name: "Rawlins",
			nickname: "Rob",
			company: "Sorry™",
			location_attributes: {
				city: "Chichester",
				state: "West Sussex",
				coutry: "United Kingdom"
			tag_list: "Founder,Developer,Technologist"

Whenever the status-bar loads it’ll now register the user as a subscriber, and filter any notices it get’s in return to only list those which are applicable to this subscriber.

Keep Up To Date

If you want to always have the latest version of the plugin, we offer a source which will always give you the latest minor or patch version without you having to lift a finger. We don’t offer an auto-updating source for major releases as these often break backwards compatibity.

Instead of the sources above, use these paths for the latest versions:


Whilst minor/patch releases should not break backwards compatibility, it’s still worth noting that there is always a risk involved in auto-updates like this - so use at your own peril.

Styling The Plugin

If you want to custom style your widget, you only need create your own CSS. To help you understand how to style it the markup for the widget is based loosely on the Twitter Bootstrap Alert, and looks like this:

<div class="sorry-status-notice sorry-status-notice-{{notice.type}} sorry-status-notice-{{notice.state}}" id="sorry-status-notice-{{notice.id}}" role="alert">
	<button type="button" class="sorry-status-notice-close" data-dismiss="status-notice" aria-hidden="true">
		<i class="sorry-status-notice-icon sorry-status-notice-icon-times-circle"></i>

	<div class="sorry-status-notice-content">
		<div class="sorry-status-notice-details">
			<h4 class="sorry-status-notice-header">
				<i class="sorry-status-notice-icon sorry-status-notice-icon-bullhorn"></i> {{lookup text.states notice.state}}
			<p class="sorry-status-notice-text">
				<time datetime="{{notice.begins_at}}" class="sorry-status-notice-schedule">{{moment notice.begins_at format="MMM Do, h:mma"}}</time> {{update.content}}
		<a class="sorry-status-notice-link" href="{{notice.link}}" target="_blank" title="{{text.links.more.title}}">{{text.links.more.text}} &#8594;</a>

Contributing To The Plugin

If you want to customize the plugin, or help us make it better the whole thing is available on Github. Please feel free to fork yourself a version, or file issues for our team to look at in more detail.