How to Embed a Third-Party Status Widget on Your Help Center or App Dashboard

A status widget that surfaces real-time third-party service health on your help center is one of the most effective ticket-deflection tools available. When customers encounter an issue and navigate to your support page, seeing "Stripe: Degraded performance — we're aware" stops the ticket before it's filed.

This guide walks through exactly how to embed the StatusMirror widget in different environments.

Prerequisites

You'll need:

• A StatusMirror account (free for 2 providers)
• At least one provider added to your dashboard
• Your Org ID from Settings → General

Plain HTML / Static sites

The simplest installation — works on any HTML page, Webflow site, Squarespace, or help center that allows custom HTML embeds:

<!-- Place this where you want the widget to appear -->
<div id="status-mirror" data-org="YOUR_ORG_ID"></div>

<!-- Add this before </body> -->
<script
  src="https://statusmirror.netlify.app/embed/v1.js"
  defer
></script>

The widget is fully self-contained — it loads its own styles and updates every 60 seconds without any page refresh. It adds zero meaningful payload to your initial page render (the script tag uses defer).

Next.js App Router

In Next.js 13+ with the App Router, create a client component wrapper since the script injection requires the browser environment:

// components/StatusWidget.tsx
'use client';

import Script from 'next/script';

export function StatusWidget({ orgId }: { orgId: string }) {
  return (
    <>
      <div id="status-mirror" data-org={orgId} />
      <Script
        src="https://statusmirror.netlify.app/embed/v1.js"
        strategy="lazyOnload"
      />
    </>
  );
}

Then use it in any server or client component:

// app/help/page.tsx
import { StatusWidget } from '@/components/StatusWidget';

export default function HelpPage() {
  return (
    <main>
      <h1>Help Center</h1>
      <StatusWidget orgId={process.env.NEXT_PUBLIC_STATUS_ORG_ID!} />
      {/* rest of your help center */}
    </main>
  );
}

Webflow

In Webflow, use an Embed element (from the Add panel → Components → Embed):

1. Drag an Embed element to the section where you want the widget
2. Paste the two-line HTML snippet (div + script) into the embed editor
3. Replace YOUR_ORG_ID with your actual Org ID
4. Publish your Webflow site

Intercom Help Center

Intercom's help center doesn't support arbitrary script injection in articles, but you can add the widget to your Intercom Messenger via custom code in Settings → Messenger → Custom CSS/JS.

Positioning best practices

Where you place the widget affects its ticket-deflection impact:

• Best: Above the fold on your main help center/support index page — visible before customers scroll to search or submit a ticket
• Good: In your app dashboard as a small sidebar component or header banner
• Good: On checkout/payment pages — catches Stripe incidents at the exact moment a customer's payment fails
• Less effective: Buried in an article or below the fold — customers won't see it during self-service

Customization via data attributes

The widget supports several configuration options via data attributes:

<div
  id="status-mirror"
  data-org="YOUR_ORG_ID"
  data-theme="light"
  data-compact="true"
  data-title="Dependency Status"
></div>

• data-theme: light | dark | auto (follows system preference)
• data-compact: true shows a minimal single-line summary instead of the full provider list
• data-title: Custom title text (default: "Service Status")

Performance notes

The StatusMirror embed script:

• Is served from a global CDN with a 1-hour cache TTL
• Loads asynchronously — never blocks page rendering
• Uses SSE (Server-Sent Events) or polling depending on browser support
• Total widget bundle is under 12KB gzipped

Get your Org ID → Start free with 2 providers.