A lightweight, embeddable status widget and badge built with Preact. Shows status banners and badges that can be positioned anywhere on your website.
<script>
window.NoticelyWidgetConfig = {
origin: 'https://status.noticely.io', // Required
banner: { enabled: true }, // Enable status banner
badge: { enabled: true, selector: '.noticely-badge-container' } // Enable status badge
};
</script><script src="https://widget.noticely.io"></script><a href="https://status.noticely.io" class="noticely-badge-container">Status</a>The widget automatically appears when the page loads!
origin(string): Your status page URL
| Option | Default | Description |
|---|---|---|
enabled |
true |
Global enable/disable for all components |
theme |
'auto' |
'auto', 'light', or 'dark' theme |
demo |
false |
Only used for demo previews |
| Option | Default | Description |
|---|---|---|
enabled |
true |
Show/hide status banner |
position |
'bottom-right' |
'top-left', 'top-right', 'bottom-left', 'bottom-right' |
theme |
inherits global | Theme override for banner |
| Option | Default | Description |
|---|---|---|
enabled |
false |
Show/hide status badges |
selector |
'.noticely-badge-container' |
CSS selector for badge containers |
placement |
'right' |
Tooltip placement: 'top', 'bottom', 'left', 'right' |
theme |
inherits global | Theme override for badge |
window.NoticelyWidgetConfig = {
origin: 'https://status.noticely.io',
theme: 'dark',
banner: {
enabled: true,
position: 'top-right'
},
badge: {
enabled: true,
selector: '.status-badge',
placement: 'top'
}
};- Node.js 22+
- npm
npm install
npm run dev # Development server at http://localhost:5173npm run build # Creates main.iife.js in dist/src/
├── badge.css # Badge component styles
├── badge.tsx # Status badge component
├── banner.css # Banner component styles
├── banner.tsx # Status banner component
├── helpers.ts # Shared utilities
├── main.css # Global widget styles
└── main.tsx # Entry point and global API
- Lightweight: Built with Preact (~37.0 kB zipped)
- Dual Components: Status banner + badge system
- Responsive: Mobile and desktop optimized
- Themeable: Auto, light, and dark themes
- Positioned: Multiple positioning options
- Interactive: Close buttons and tooltips
- Real-time: Auto-refresh every minute
window.NoticelyWidget = {
create: function () {
// Creates/recreates widget using window.NoticelyWidgetConfig
},
destroy: function (options) {
// Removes widget from page
// options: { onlyBanner?: boolean, animationEnded?: boolean }
},
getConfig: function () {
// Returns processed configuration
}
};The widget automatically initializes when:
window.NoticelyWidgetConfigis defined withorigin- DOM is ready
- At least one component is enabled
<!DOCTYPE html>
<html>
<body>
<header>
<a href="https://status.noticely.io" class="noticely-badge-container"
>System Status</a
>
</header>
<script>
window.NoticelyWidgetConfig = {
origin: 'https://status.noticely.io',
banner: { enabled: true, position: 'bottom-right' },
badge: { enabled: true }
};
</script>
<script src="https://widget.noticely.io"></script>
</body>
</html><script>
window.NoticelyWidgetConfig = {
origin: 'https://status.noticely.io',
banner: { enabled: true },
badge: { enabled: false }
};
</script><nav>
<span class="status-indicator">Status</span>
</nav>
<script>
window.NoticelyWidgetConfig = {
origin: 'https://status.noticely.io',
badge: {
enabled: true,
selector: '.status-indicator'
}
};
</script>- Missing
origin: Console error, no initialization - Missing badge containers: Console error for badge selector
- API failures: Fallback to test data in development
- Network issues: Automatic retry every minute
- Fork the repository
- Create feature branch:
git checkout -b feature-name - Make changes and test with
npm run dev - Format code:
npm run format - Submit pull request
MIT License