Embed the status widget

A small status indicator on your main site means visitors see “all systems operational” or “incident in progress” before they have to click through to the status page. The indicator is a one-line embed and refreshes itself in the background.

Before you start

• You’ll be pasting a snippet into your own site’s HTML. You need access to that site’s source — or to a CMS that accepts custom HTML embeds.
• The widget is read-only. It shows current status; clicking it opens your status page.

Steps

1. Open the Embed tab

Go to Settings → Incidents Settings → Embed. You see a configuration panel and a live preview underneath.

2. Pick the embed type

Two options:

• Script — inserts the widget inline as part of the host page’s HTML. Adapts to the host page’s CSS for things like font and background. The most natural-looking embed on a styled site.
• Iframe — renders the widget inside a sandboxed iframe. You control the color palette; the host page can’t affect it. Use this if you need exact colors or if the host page’s CSS is causing visual issues with the script embed.

3. Pick a theme

For both embed types:

• Auto — follows the visitor’s system light/dark preference
• Light — always renders light-on-white
• Dark — always renders light-on-dark

For the script embed, color is inherited from the host page so the theme mainly controls the icon. For the iframe embed, the theme also controls the default palette.

4. (Iframe only) Customize colors

When iframe + light or iframe + dark is selected, six color pickers appear. Each controls one part of the widget:

• Background — The widget’s overall background
• Border — The widget’s outer border
• Foreground — Text color
• Muted — Secondary text
• Accent — Branded highlight color
• Operational dot — The green indicator when all systems are healthy

Each picker shows a hex input and a swatch. Defaults match the theme; change anything and the preview reflects it immediately.

Auto theme can’t be customized (it would need both a light and dark palette), so the color pickers only appear for the explicit theme.

5. Copy the snippet

Two snippets are generated at the bottom of the panel — one for script, one for iframe. The active one is shown based on your Embed type choice. Click Copy next to the snippet.

The script snippet looks like:

<script src="https://your-tenant.atender.dev/api/public/incidents/your-slug/widget.js" data-theme="dark" async></script>

The iframe snippet looks like:

<iframe src="https://your-tenant.atender.dev/incidents/your-slug/embed?theme=dark"
        width="100%" height="72" style="border:0;display:block" title="Status"></iframe>

(URLs use your actual tenant domain and slug.)

6. Paste it into your site

Drop the snippet wherever you want the indicator to appear:

• In a header or footer — small, persistent, always visible.
• Next to “Need help?” links — gives context if the site itself is degraded.
• On a /status redirect page — some teams keep a slim landing that contains just the widget and a link to the full page.

The widget refreshes its data periodically in the background, so it stays accurate without you having to do anything.

Verify it worked

Open the page where you pasted the snippet. The widget should appear, showing your current status — “All Systems Operational” with a green dot, or the most severe active incident’s status.

If you’ve got an active incident, the widget should show the incident’s status and severity. The widget links to your public status page when clicked.

When to use which embed type

• You want the widget to inherit your site’s font and feel — Script
• You need predictable colors regardless of the host page — Iframe
• Your CMS strips <script> tags — Iframe
• The widget is rendering with broken styles on the host site — Iframe (sandboxed)
• Default — you don’t have strong preferences — Script

Troubleshooting

• Symptom: Widget doesn’t render after pasting. Fix: For script embeds: the script is async, so it can take a moment to appear. Check the browser console for errors. For iframe embeds: confirm the iframe URL loads directly in a new tab.
• Symptom: Colors look wrong on the iframe embed. Fix: Check that theme is set in the URL. If you customized colors but they’re not appearing, the URL probably doesn’t carry the query params — re-copy from the Embed tab.
• Symptom: Embed shows “All Systems Operational” but there’s a live incident. Fix: The widget caches briefly. Hard-refresh the host page. If the issue persists, confirm the live incident’s status isn’t already resolved.

See also

• The Incidents module
• Connect a custom domain for the status page
• Let customers subscribe