Widgets de estado incrustables: muestra el uptime a tus clientes

Por qué mostrar el uptime a tus clientes#

Cuando tu sitio se cae, los clientes se preguntan: "¿Está caído solo para mí o para todos?"

Sin información de estado, ellos:

• Refrescan la página frenéticamente
• Prueban con distintos navegadores/dispositivos
• Llaman a soporte (haciéndote perder tiempo)
• Asumen que no eres fiable (dañando la confianza)

Un simple widget de estado responde a su pregunta: "Sí, sabemos que está caído, lo estamos solucionando."

Qué muestra un widget de estado#

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]

Opciones del widget incrustable#

Opción 1: iframe incrustado en el sitio web#

Añádelo al footer de tu web o a una página de estado dedicada:

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

Se actualiza automáticamente cada 60 segundos sin recargar la página.

Opción 2: Subdominio de estado independiente#

Crea status.yourcompany.com que muestre una página de estado completa con:

• Estado actual de todos los servicios
• Historial de incidentes
• Tiempo estimado de recuperación
• Notificaciones a clientes

Opción 3: Badge de estado en línea#

Muestra un badge sencillo en tu cabecera:

[🟢 All Systems Up] [View Status]

Enlaza a la página de estado completa o al dashboard.

Beneficios de los widgets de estado#

Menor carga de soporte#

Sin widget de estado:

• Cliente: "Tu sitio está caído"
• Soporte: "Déjame comprobar... sí, lo sabemos, lo estamos solucionando"
• Cliente: "Bueno, ¿y por qué no aparece en vuestra página de estado?"

Con widget de estado:

• El cliente ve el estado al instante
• Sabe que estás al tanto y trabajando en ello
• No contacta con soporte

Resultado: menos tickets de soporte, respuesta más rápida para necesidades reales de soporte.

Confianza y transparencia#

Mostrar el estado en tiempo real demuestra que:

• Monitorizas tu infraestructura
• Eres honesto sobre los problemas
• Valoras la comunicación con el cliente
• Te importa la disponibilidad

Los estudios muestran que un estado transparente reduce el churn un 40 % durante y después de una caída.

Ventaja competitiva#

Tus competidores no tienen widgets de estado. Tú sí.

Si un cliente tiene que elegir entre tú y un competidor durante una caída:

• Competidor: "¿Está caído?" (sin información)
• Tú: "Sí, lo sabemos, lo estamos arreglando, ETA 30 min" (estado claro)

Los clientes confían más en ti.

Configurar el widget de estado de Nova Uptime#

Paso 1: Activar el widget de incrustación#

1. Inicia sesión en el dashboard de Nova Uptime
2. Ve a la configuración del dominio
3. Haz clic en "Embed Settings"
4. Activa "Enable Embed Widget"
5. Copia el token de incrustación

Paso 2: Personalizar la apariencia del widget#

Elige:

• Tema de color: claro / oscuro / personalizado
• Componentes a mostrar: % de uptime, incidentes recientes, lista de servicios
• Frecuencia de actualización: 30 segundos, 1 minuto, 5 minutos
• Periodo histórico: últimos 7 días, 30 días, 90 días

Paso 3: Añadirlo a tu sitio web#

Opción A: iframe HTML

<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>

Opción B: Componente React

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

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

Opción C: Página independiente Crea status.yourcompany.com y enlázala:

[Check Status Page]

Personalizar el contenido del widget#

Qué mostrar#

Básico (recomendado para la mayoría)

• Estado general (Up/Down)
• % de uptime de 30 días
• Último incidente con su duración

Avanzado (para SaaS)

• Estado de cada servicio (API, Dashboard, Email)
• Tiempos de respuesta en tiempo real
• Incidentes activos con actualizaciones
• Historial de incidentes (últimos 10)
• Mensajes de actualización para el cliente

Elegir qué servicios mostrar#

Demasiado detalle: confunde a los clientes

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

Justo lo necesario: muestra lo que les importa a los clientes

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

Mensajes durante caídas#

Cuando ocurre un incidente, actualiza el widget de estado:

Durante (actualizaciones en tiempo real)

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

Después (confirmación de resolución)

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

Post-incidente

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]

Consideraciones técnicas#

CORS y cross-origin#

El widget usa JavaScript para actualizarse. Asegúrate de que tu sitio lo permita:

// 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));

Las cabeceras CORS de Nova Uptime ya lo permiten automáticamente.

Rendimiento#

El widget añade < 50KB al tamaño de la página y no bloquea la carga.

Las actualizaciones ocurren de forma asíncrona cada 60 segundos sin afectar la experiencia del usuario.

Impacto en SEO#

La información de estado se actualiza dinámicamente (JavaScript), así que no afecta directamente al SEO. Pero tener una página de estado mejora:

• Tiempo en el sitio (usuarios consultando el estado)
• Visitas recurrentes (página de estado guardada en marcadores)
• Señales de confianza (gestión adecuada de incidentes)

Alternativa: página de estado externa#

Si prefieres NO incrustarla en tu sitio web:

https://yourcompany.statuspage.io

Es un dominio separado que los clientes pueden marcar y consultar. Mantiene tu web principal despejada y a la vez ofrece transparencia total del estado.

Ventaja de Nova Uptime: no necesitas una herramienta aparte. El widget de estado viene integrado.

Medir la efectividad del widget#

Mide:

• Cuántos visitantes consultan tu widget de estado
• Tiempo medio en la página de estado
• Si los usuarios vuelven a la página de estado durante los incidentes
• Volumen de tickets de soporte durante las caídas (debería bajar)

Usa estos datos para mejorar el contenido y la presentación de tu página de estado.

Buenas prácticas#

1. Actualiza durante los incidentes: las actualizaciones manuales valen más que el silencio
2. Muestra ETAs realistas: "Investigando" es mejor que "Resuelto en 10 min" si no lo sabes
3. Post-mortem tras los incidentes: los clientes agradecen saber qué pasó
4. Mantenlo al día: un widget desactualizado hace más daño que no tener widget
5. Hazlo visible: no escondas el widget de estado al final del footer

Resumen#

1. Activa el widget incrustable en Nova Uptime
2. Personaliza la apariencia y el contenido
3. Añade el iframe a tu web o crea una página de estado dedicada
4. Actualiza el estado durante y después de los incidentes
5. Enlázalo desde la documentación de soporte y el centro de ayuda
6. Mide la efectividad e itera

Empieza a generar confianza con tus clientes hoy: activa el widget de incrustación desde tu dashboard de Nova Uptime en la configuración del dominio. Incluido en todos los planes. 🚀