Páginas de Estado

Construye páginas de estado públicas hermosas y personalizables para comunicar la disponibilidad del servicio.

Vista General

Las páginas de estado son la interfaz pública donde los usuarios pueden:

• Verificar el estado actual del servicio
• Ver datos históricos de uptime
• Ver incidentes activos y pasados
• Suscribirse a notificaciones

Crear una Página de Estado

1. Navega a Dashboard > Páginas de Estado
2. Haz clic en "Nueva Página de Estado"
3. Configura ajustes básicos:

4. Selecciona una plantilla
5. Haz clic en "Crear"

Visibilidad de Página

Plantillas de Página

Elige una plantilla inicial:

Moderna

Diseño limpio y minimalista con layout basado en tarjetas. Buena para productos SaaS.

Clásica

Layout tradicional de página de estado. Buena para empresas.

Terminal

Tema oscuro orientado a desarrolladores con fuentes monoespaciadas.

En Blanco

Comienza desde cero con un canvas vacío.

El Editor de Página

Después de crear una página, usa el editor drag-and-drop:

Layout del Editor

• Panel Izquierdo: Biblioteca de widgets
• Centro: Canvas de la página
• Panel Derecho: Configuración del widget

Añadir Widgets

1. Haz clic en "Añadir Widget" o arrastra desde el panel izquierdo
2. Suelta en el canvas
3. Configura ajustes en el panel derecho
4. Arrastra para reposicionar
5. Redimensiona usando las esquinas

Guardar Cambios

• Haz clic en "Guardar" para persistir cambios
• Usa "Vista Previa" para ver la vista pública
• Los cambios no están activos hasta guardar

Tipos de Widgets

Resumen de Estado

Muestra el estado general del sistema con un indicador de color.

Configuración:

• Mostrar conteo de componentes
• Mostrar descripción
• Título personalizado

Lista de Componentes

Muestra todos los componentes con estado actual.

Configuración:

• Mostrar descripciones
• Mostrar grupos
• Grupos colapsables

Tabla de Infraestructura

Vista jerárquica con historial de estado y sparklines.

Configuración:

• Rango de tiempo (1h, 24h, 7d, 30d)
• Mostrar porcentaje de uptime
• Mostrar tiempos de respuesta
• Tema terminal

Gráfico de Uptime

Visualización histórica de uptime como barras horizontales.

Configuración:

• Rango de tiempo
• Componentes a incluir
• Mostrar porcentaje

Feed de Incidentes

Lista de incidentes activos y recientes.

Configuración:

• Mostrar incidentes resueltos
• Número a mostrar
• Mostrar actualizaciones

Historial de Incidentes

Calendario o línea de tiempo de incidentes pasados.

Configuración:

• Rango de tiempo
• Mostrar mantenimientos
• Agrupar por día/semana

Gráfico de Métricas

Mostrar métricas de integraciones.

Configuración:

• Métrica a mostrar
• Tipo de gráfico (línea, área, barra)
• Rango de tiempo

HTML Personalizado

Incrustar contenido personalizado.

Configuración:

• Contenido HTML
• Clases CSS

Branding

Personaliza la apariencia de tu página de estado:

Logos

1. Haz clic en la pestaña "Configuración" en el editor
2. Sube logos:
   • Logo Modo Claro: Para fondos claros
   • Logo Modo Oscuro: Para fondos oscuros
3. Recomendado: SVG o PNG, 200px de ancho

Colores

• Color Primario: Botones, enlaces, acentos
• Color de Fondo: Fondo de la página
• Color de Texto: Texto del cuerpo

CSS Personalizado

Usuarios avanzados pueden añadir CSS personalizado:

/* Estilos personalizados */
.status-overview {
  border-radius: 16px;
}
 
.component-list-item:hover {
  transform: scale(1.02);
}

Dominio Personalizado

Para usar un dominio personalizado:

1. Ve a Configuración > Páginas de Estado > [Tu Página] > Dominio
2. Ingresa tu dominio personalizado (ej., status.example.com)
3. Añade registros DNS:

   CNAME status.example.com → url-de-tu-página-de-estado
4. Espera la propagación DNS
5. Habilita SSL

Widgets Incrustables

Incrusta widgets de estado en tu sitio web:

Badge

Indicador de estado pequeño:

<iframe
  src="https://tu-dominio.com/embed/status/tu-slug/badge"
  width="200"
  height="30"
  frameborder="0"
></iframe>

Widget

Widget de estado compacto:

<iframe
  src="https://tu-dominio.com/embed/status/tu-slug/widget"
  width="350"
  height="200"
  frameborder="0"
></iframe>

Widget Flotante

Widget flotante en la esquina:

<script src="https://tu-dominio.com/embed/status/tu-slug/floating.js"></script>

Funcionalidad de Suscripción

Permite a los usuarios suscribirse a actualizaciones:

Canales de Suscripción

• Email: Notificaciones por email
• SMS: Mensajes de texto
• Webhook: URL personalizada
• RSS/Atom/JSON: Suscripciones a feeds

Configurar Suscripciones

1. En configuración de página, habilita "Permitir Suscripciones"
2. Selecciona canales permitidos
3. Configura ajustes específicos del canal

Gestionar Suscriptores

Ve Suscriptores para detalles.

Feeds RSS/Atom

Cada página de estado tiene feeds automáticos:

Los feeds incluyen:

• Incidentes activos
• Actualizaciones recientes
• Mantenimientos programados

SEO y Metadatos

Configura para motores de búsqueda:

1. En configuración de página, ve a "SEO"
2. Configura:
   • Título: Título de página (aparece en pestaña del navegador)
   • Descripción: Meta descripción
   • Keywords: Meta keywords
   • Imagen OG: Imagen para compartir en redes sociales

Inyección de HTML Personalizado

Añade código personalizado a tu página de estado:

Inyección en Head

Añade a <head>:

• Scripts de analytics
• Fuentes personalizadas
• Meta tags

Inicio del Body

Añade después de <body>:

• Widgets de terceros
• Widgets de chat

Final del Body

Añade antes de </body>:

• Analytics
• Scripts de tracking

Múltiples Páginas de Estado

Crea diferentes páginas para diferentes audiencias:

Cada página puede tener:

• Diferentes componentes
• Diferente branding
• Diferente visibilidad

Acceso API

Obtener Página de Estado

curl http://localhost:3000/api/v1/status-pages/{id} \
  -H "Authorization: Bearer sk_live_xxx"

Actualizar Página de Estado

curl -X PATCH http://localhost:3000/api/v1/status-pages/{id} \
  -H "Authorization: Bearer sk_live_xxx" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Nombre Actualizado",
    "description": "Descripción actualizada"
  }'

API Pública (Sin Auth)

# Obtener estado público
curl http://localhost:3000/api/v1/public/status/{slug}
 
# Obtener incidentes
curl http://localhost:3000/api/v1/public/status/{slug}/incidents

Mejores Prácticas

Contenido

• Mantén los nombres de componentes amigables para el usuario
• Usa lenguaje claro, no técnico
• Actualiza regularmente durante incidentes

Diseño

• Combina con los colores de tu marca
• Usa tu logo
• Mantenlo simple y escaneable

Rendimiento

• No sobrecargues con widgets
• Usa rangos de tiempo apropiados
• Optimiza imágenes personalizadas

Documentación Relacionada

• Componentes - Define servicios a mostrar
• Incidentes - Comunica interrupciones
• Suscriptores - Gestiona notificaciones