StatusPage Widget self-updates

Display real-time status page widgets from StatusPage.me on your WordPress site.

Description

StatusPage Widget allows you to embed beautiful, real-time status widgets from StatusPage.me directly into your WordPress site.

Features:

• Gutenberg Block - Easy drag-and-drop block with full visual customization
• Classic Widget - Legacy widget for theme widget areas
• Shortcodes - Flexible embedding anywhere with [statuspage_widget] and [statuspage_badge]
• Two Render Modes - Choose between JavaScript (client-side) or PHP (server-side) rendering
• Customizable Appearance - Light/dark themes, compact mode, show/hide incidents
• Performance Sparklines - Display response time and uptime history
• Auto-refresh - Real-time updates without page reload (JS mode)
• Automatic Updates - Receive updates directly from GitHub

Shortcode Examples:

[statuspage_widget slug="your-status-page"]

[statuspage_widget slug="your-status-page" theme="dark" compact="1" show_incidents="0"]

[statuspage_badge slug="your-status-page"]

Block Features:

The Gutenberg block includes a visual settings panel with:

• Status page slug selection
• Theme toggle (Auto/Light/Dark)
• Compact mode toggle
• Show/hide incidents
• Response time sparkline (0-240 minutes)
• Uptime sparkline (0-30 days)
• Auto-refresh interval
• Disable external link option
• Render mode (JavaScript/PHP)

Installation

1. Upload the plugin files to the /wp-content/plugins/status-page-widget directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress.
3. Use the StatusPage Widget block in the block editor, or add the classic widget to your sidebar, or use the shortcodes in your content.

Frequently Asked Questions

What is StatusPage.me?

StatusPage.me is a hosted status page service that helps you communicate real-time system status to your users. Create beautiful status pages without any coding.

Do I need a StatusPage.me account?

Yes, you need a StatusPage.me account with at least one public status page. The widget will display the status from your StatusPage.me page.

What's the difference between JS and PHP render modes?

JavaScript mode renders the widget client-side using StatusPage.me's embed script. It supports auto-refresh and ensures the latest styling, but requires JavaScript.

PHP mode renders the widget server-side. It's better for SEO and works without JavaScript, but doesn't support auto-refresh and caches data for 30 seconds.

How do I find my status page slug?

Your slug is the unique identifier in your status page URL. For example, if your status page URL is https://my-status-page.statuspage.me, your slug would be my-status-page.

Can I customize the widget appearance?

Yes! You can customize:

• Theme (auto, light, dark)
• Compact mode
• Show/hide incidents
• Response time and uptime sparklines
• Auto-refresh interval (JS mode only)

Screenshots

1. StatusPage Widget block in the editor
2. Widget settings panel
3. Light and dark theme examples
4. Compact mode display
5. Widget with incidents

Changelog

1.0.2

• Fixed: Auto-refresh (data-refresh) now correctly passed through shortcodes, classic widget, and Gutenberg block to the JS embed
• Fixed: Classic widget now includes an Auto Refresh field (JS mode only)
• Fixed: SVG sparkline area fill path had a duplicate Move command causing the fill to not close correctly on the left edge
• Fixed: clear_cache() now also removes orphaned transient timeout entries from wp_options
• Fixed: Wrong i18n text domain in block editor JS ('statuspage-widget' → 'status-page-widget') — translations now apply correctly
• Fixed: Removed duplicate embed script load; wp_register_script for statuspage-embed was enqueuing a script with no data attributes alongside the required inline