Embedbare Status Widgets: Toon Uptime Aan Klanten

Waarom Uptime Aan Klanten Tonen#

Wanneer je site offline gaat, vragen klanten zich af: "Is het bij mij offline of voor iedereen?"

Zonder statusinformatie:

• Refreshen ze als gekken de pagina
• Proberen ze andere browsers/apparaten
• Bellen ze support (verspilt jouw tijd)
• Veronderstellen ze dat je onbetrouwbaar bent (schaadt vertrouwen)

Een eenvoudige status-widget beantwoordt hun vraag: "Ja, we weten dat het offline is, we lossen het op."

Wat Een Status Widget Toont#

Nova Uptime Status Widget

🟢 All Systems Operational

Last 30 days: 99.87% uptime
Last incident: Feb 18, 14:32-14:47 UTC (15 min)

Recent Status:
✅ mysite.com - Up
✅ api.mysite.com - Up
✅ Email Service - Up

[View full status] [Subscribe to updates]

EmbeddableWidget-Opties#

Optie 1: Embedded iframe op website#

Voeg toe aan je website-footer of dedicated statuspagina:

<iframe
  src="https://status.novauptime.com/embed/your-embed-token"
  style="width: 100%; height: 400px; border: none;">
</iframe>

Werkt automatisch elke 60 seconden bij zonder pagina-refresh.

Optie 2: Apart status-subdomein#

Maak status.yourcompany.com aan met een volledige statuspagina inclusief:

• Huidige status van alle services
• Incidenthistorie
• Verwachte hersteltijd
• Klantmeldingen

Optie 3: Inline status-badge#

Toon een eenvoudige badge in je header:

[🟢 All Systems Up] [View Status]

Linkt naar een volledige statuspagina of dashboard.

Voordelen van Status Widgets#

Verminderde Support-Belasting#

Zonder status-widget:

• Klant: "Je site is offline"
• Support: "Even kijken... ja, we weten ervan, we lossen het op"
• Klant: "Tja, waarom staat dat dan niet op je statuspagina?"

Met status-widget:

• Klant ziet de status direct
• Weet dat je ervan op de hoogte bent en eraan werkt
• Neemt geen contact op met support

Resultaat: Minder support-tickets, snellere reactie voor échte support-behoeftes.

Vertrouwen en Transparantie#

Realtime-status tonen bewijst:

• Dat je je infrastructuur monitort
• Dat je eerlijk bent over problemen
• Dat je waarde hecht aan klantcommunicatie
• Dat je om beschikbaarheid geeft

Studies tonen aan: Transparante status verlaagt churn met 40% tijdens en na uitval.

Concurrentievoordeel#

Concurrenten hebben geen status-widgets. Jij wel.

Als een klant tijdens uitval moet kiezen tussen jou en een concurrent:

• Concurrent: "Is het offline?" (Geen informatie)
• Jij: "Ja, we weten ervan, we werken eraan, ETA 30 min" (Heldere status)

Klanten vertrouwen je meer.

Nova Uptime Status Widget Opzetten#

Stap 1: Embed Widget Inschakelen#

1. Log in op het Nova Uptime-dashboard
2. Ga naar de domeininstellingen
3. Klik "Embed Settings"
4. Schakel "Enable Embed Widget" in
5. Kopieer de embed-token

Stap 2: Widget-Uiterlijk Aanpassen#

Kies:

• Kleurthema: Light / Dark / Custom
• Componenten om te tonen: Uptime %, recente incidenten, service-lijst
• Refresh-snelheid: 30 seconden, 1 minuut, 5 minuten
• Historische periode: Laatste 7 dagen, 30 dagen, 90 dagen

Stap 3: Toevoegen Aan Website#

Optie A: HTML iframe

<!-- Place in footer or dedicated page -->
<div id="gum-status-widget">
  <iframe
    src="https://status.novauptime.com/embed/YOUR_TOKEN?color=dark"
    width="100%"
    height="500px"
    style="border: none;">
  </iframe>
</div>

Optie B: React-component

import { NovaUptimeStatusWidget } from '@novauptime/react-status';

export default function StatusPage() {
  return <NovaUptimeStatusWidget token="YOUR_TOKEN" theme="dark" />;
}

Optie C: Aparte pagina Maak status.yourcompany.com aan en link ernaar:

[Check Status Page]

Widget-Inhoud Aanpassen#

Wat Te Tonen#

Basis (aanbevolen voor de meesten)

• Algehele status (Up/Down)
• 30-daagse uptime %
• Laatste incident met duur

Geavanceerd (Voor SaaS)

• Individuele servicestatus (API, Dashboard, Email)
• Realtime responstijden
• Actieve incidenten met updates
• Incidenthistorie (laatste 10)
• Klantgerichte updateberichten

Kiezen Welke Services Te Tonen#

Te gedetailleerd: Verwart klanten

- Load Balancer: Up
- API Node 1: Up
- API Node 2: Up
- Cache Layer: Up
- Database Primary: Up
- Database Replica: Up

Precies goed: Toont waar klanten om geven

- Website: Up
- API: Up
- Email Service: Up

Communiceren Tijdens Uitval#

Wanneer er een incident is, werk de status-widget bij:

Tijdens (realtime updates)

🟡 Partial Outage - Investigating
API is currently unavailable due to database connectivity issues.
Started: 14:32 UTC
Expected fix: In progress

Na (bevestiging van oplossing)

✅ Resolved
Database connectivity has been restored. All services are operational.
Incident duration: 15 minutes
Resolved: 14:47 UTC

Post-incident

Post-Mortem: [Link to incident review]
We experienced a database failover that took 15 minutes to complete.
[Details of what we learned and how we're preventing this]

Technische Overwegingen#

CORS en Cross-Origin#

De widget gebruikt JavaScript om bij te werken. Zorg dat je website dit toelaat:

// Runs on your website, fetches from Nova Uptime
fetch('https://api.novauptime.com/embed/YOUR_TOKEN/status')
  .then(response => response.json())
  .then(data => updateWidget(data));

Nova Uptime CORS-headers staan dit automatisch toe.

Performance#

Widget voegt < 50KB toe aan paginagrootte en blokkeert het paginalaad-proces niet.

Updates gebeuren asynchroon elke 60 seconden zonder de gebruikerservaring te verstoren.

SEO-Impact#

Statusinformatie wordt dynamisch geüpdatet (JavaScript), dus heeft geen directe invloed op SEO. Maar een statuspagina hebben verbetert:

• Tijd op site (gebruikers die status checken)
• Terugkerende bezoeken (gebookmarkte statuspagina)
• Vertrouwenssignalen (correct incident-management)

Alternatief: Externe Statuspagina#

Als je liever NIET embed op je website:

https://yourcompany.statuspage.io

Dit is een apart domein dat klanten kunnen bookmarken en checken. Houdt je hoofdwebsite overzichtelijk en biedt toch volledige statustransparantie.

Nova Uptime-voordeel: Geen aparte tool nodig. Status-widget is ingebouwd.

Effectiviteit Van De Widget Meten#

Houd bij:

• Hoeveel bezoekers je status-widget bekijken
• Gemiddelde tijd op de statuspagina
• Of gebruikers de statuspagina opnieuw bezoeken tijdens incidenten
• Support-ticketvolume tijdens uitval (zou moeten dalen)

Gebruik dit om de inhoud en presentatie van je statuspagina te verbeteren.

Best Practices#

1. Update tijdens incidenten: Handmatige statusupdates zijn beter dan stilte
2. Toon realistische ETA's: "Investigating" is beter dan "Fixed in 10 min" als je het niet weet
3. Post-mortem na incidenten: Klanten waarderen het om te leren wat er gebeurde
4. Houd het actueel: Een verouderde widget doet meer kwaad dan geen widget
5. Maak hem zichtbaar: Verstop de status-widget niet onderaan de footer

Samenvatting#

1. Schakel de embed-widget in Nova Uptime in
2. Pas uiterlijk en inhoud aan
3. Voeg een iframe toe aan je website of maak een dedicated statuspagina
4. Update de status tijdens en na incidenten
5. Link vanuit support-docs en help-center
6. Meet de effectiviteit en itereer

Begin vandaag met het opbouwen van klantvertrouwen: Schakel de embed-widget in vanuit je Nova Uptime-dashboard onder domeininstellingen. Inbegrepen op alle tiers. 🚀