Page de statut headless.
Votre UI, nos données.
Notre page de statut ne vous plaît pas ? Construisez la vôtre. Chaque octet affiché par la version hébergée est accessible via une API REST publique et un stream SSE temps réel. Spec OpenAPI complète.
Pourquoi headless
Tous les autres fournisseurs de page de statut vous enferment dans leur template. Nous, on vous laisse partir avec les données et continuer à nous utiliser.
Votre marque, vos pixels
Match exact avec votre site principal. Fontes, animations, layouts personnalisés. Pas de footer fournisseur, pas de headers brandés.
Affichez n'importe où
Server component Next.js, island Astro, HTML statique, bot Slack, CLI, bannière in-app. Même endpoint.
Gardez-la sur votre domaine
Aucun CNAME requis. Récupérez depuis votre serveur, rendez dans votre app. Les clients ne voient jamais d'URL tierce.
Intégrez, ne migrez pas
Ajoutez un widget de statut dans votre doc, panel admin ou portail client sans rediriger les utilisateurs hors site.
Un fetch. Tout ce qu'il vous faut.
GET le endpoint de statut avec votre slug. Parsez le JSON. Affichez.
curl https://api.pulseapi.tech/status/acme{
"page": {
"id": "acme",
"title": "Acme API Status",
"language": "en",
"customDomain": "status.acme.com"
},
"overallStatus": "operational",
"endpoints": [
{
"id": "ep_1",
"name": "API",
"status": "operational",
"uptime24h": 99.98,
"avgResponseTime": 127,
"sparkline": [120, 118, 131, 127, 125],
"uptime90d": [100, 100, 99.9, 100, ...]
}
],
"components": [...],
"incidents": [...]
}Intégrez-le dans votre stack
React
export default async function Status() {
const res = await fetch('https://api.pulseapi.tech/status/acme', {
next: { revalidate: 30 },
})
const data = await res.json()
return (
<section>
<h1>{data.page.title}</h1>
<StatusBanner status={data.overallStatus} />
{data.endpoints.map((ep) => (
<EndpointRow key={ep.id} endpoint={ep} />
))}
</section>
)
}Vue / Nuxt
<script setup lang="ts">
const { data } = await useFetch('https://api.pulseapi.tech/status/acme', {
key: 'status',
server: true,
})
</script>
<template>
<h1>{{ data.page.title }}</h1>
<p>Status: {{ data.overallStatus }}</p>
<ul>
<li v-for="ep in data.endpoints" :key="ep.id">
{{ ep.name }} — {{ ep.status }} ({{ ep.uptime24h }}%)
</li>
</ul>
</template>Vanilla JS
async function renderStatus() {
const res = await fetch('https://api.pulseapi.tech/status/acme')
const data = await res.json()
document.getElementById('status').innerHTML = `
<h2>${data.page.title}</h2>
<p>${data.overallStatus}</p>
`
}
renderStatus()
setInterval(renderStatus, 30_000)Temps réel via SSE — sans polling
Abonnez-vous aux mises à jour d'incidents, transitions de statut et résultats de checks en direct.
const es = new EventSource('https://api.pulseapi.tech/sse/status/acme')
es.addEventListener('status:changed', (e) => {
const payload = JSON.parse(e.data)
updateBanner(payload.status)
})
es.addEventListener('incident:created', (e) => {
showNotification(JSON.parse(e.data))
})
es.addEventListener('check:completed', (e) => {
const check = JSON.parse(e.data)
appendToSparkline(check.endpointId, check.responseTime)
})Guides par framework
Choisissez votre stack — nous avons un guide avec du code à copier-coller.
FAQ
Qu'est-ce qu'une page de statut headless ?
Une page de statut headless sépare les données (uptime, composants, incidents) de l'UI. Au lieu d'être enfermé dans le template d'un fournisseur, vous récupérez les données par API et les affichez comme vous voulez — votre propre composant React, une page server-rendered, même un dashboard terminal.
Pourquoi ne pas juste utiliser votre page hébergée ?
Vous pouvez — elle marche out of the box. Mais si votre marque a besoin d'un layout custom, d'une intégration serrée avec votre site principal, ou d'un rendu sur votre domaine sans CNAME, headless vous donne une liberté totale. Mêmes données, n'importe quelle UI.
L'API a-t-elle un rate limit ?
Le endpoint public de statut est conçu pour du trafic lecture intense (il alimente nos pages hébergées et badges embarqués). Le polling raisonnable marche bien. Pour très haut trafic, cachez les réponses 10-30s ou abonnez-vous au stream SSE.
Puis-je l'utiliser avec un générateur de sites statiques ?
Oui. Récupérez notre API au build avec Next.js getStaticProps, frontmatter Astro, ou équivalent. Pour des mises à jour live, utilisez ISR/revalidate avec TTL court, ou passez la page en server-rendered.
Que renvoie l'API ?
Métadonnées de la page (titre, branding), statut global, endpoints avec statut et uptime, composants, incidents actifs, tableaux d'uptime 90j pour les barres, et données de sparkline de temps de réponse. Spec complète sur api.pulseapi.tech/docs.
Ai-je besoin d'authentification ?
Pour le endpoint public de statut — non. C'est la même URL que vos clients verraient sur la version hébergée. Pour les APIs du dashboard (créer endpoints, écrire incidents), une clé API est nécessaire.
Puis-je m'abonner aux mises à jour temps réel au lieu de faire du polling ?
Oui. Connectez-vous au endpoint SSE sur /sse/status/:slug et recevez changements de statut, nouveaux incidents et résultats de checks en direct.
Comment gérer l'authentification pour des pages de statut privées ?
Générez une clé API d'organisation dans le dashboard et envoyez-la comme header Authorization en récupérant l'endpoint de statut depuis votre serveur. N'exposez jamais la clé au navigateur.
Livrez une page de statut à vos conditions
Version gratuite, sans carte. Hébergée, headless, ou les deux.