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

jQuery required

Please note that all our JavaScript plugins require jQuery.

This plugin is officially supported with jQuery 1.10.1, however, may work on older versions.

Installing The Plugin

Simply Include the Javascript

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

<script src="https://code.sorryapp.com/status-bar/4.0.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 Plugin

By default the plugin will display open notices at 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 plugin to be located.

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

Custom Plugin Options

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.

<script>
	window.SorryAPIOptions = {
		subscriber: {
	        email: 'joe@bloggs.com',
	        first_name: 'Joe',
	        last_name: 'Bloggs',
	        nickname: 'Jimmy B.',
	        company: 'Bloggs Inc.',
	        location_attributes: {
	            city: 'London',
	            state: 'Middlesex',
	            country: 'United Kingdom'
	        },
	        tag_list: 'Manager, Cloud Servers, Cloud Mail'
		}
	}
</script>

Whenever the status-bar loads it’ll now register the user as a subscriber, and filter any notices it gets 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 compatibility.

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

//code.sorryapp.com/status-bar/4.latest/status-bar.min.js

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 to 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" id="sorry-status-notice-" 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></button>

	<div class="sorry-status-notice-content">\
		<h4 class="sorry-status-notice-header"><i class="sorry-status-notice-icon sorry-status-notice-icon-bullhorn"></i> Ongoing</h4>
		<p class="sorry-status-notice-text"></p>
		<a class="sorry-status-notice-link" href="" target="_blank" title="Visit our Status Page for more information.">More &#8594;</a>
	</div>
</div>