Widgets de status incorporáveis: mostre o uptime aos clientes

Por que mostrar o uptime aos clientes#

Quando seu site cai, os clientes se perguntam: "Está fora do ar só pra mim, ou pra todo mundo?"

Sem informação de status, eles:

• Atualizam a página freneticamente
• Tentam navegadores/dispositivos diferentes
• Ligam pro suporte (gastando seu tempo)
• Assumem que você é instável (prejudicando a confiança)

Um widget de status simples responde à pergunta deles: "Sim, sabemos que está fora do ar, estamos consertando."

O que um widget de status mostra#

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]

Opções do widget incorporável#

Opção 1: iframe incorporado no site#

Adicione ao rodapé do seu site ou a uma página de status dedicada:

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

Atualiza automaticamente a cada 60 segundos sem recarregar a página.

Opção 2: Subdomínio de status separado#

Crie status.suaempresa.com que mostra a página de status completa com:

• Status atual de todos os serviços
• Histórico de incidentes
• Tempo esperado de recuperação
• Notificações para clientes

Opção 3: Badge de status inline#

Mostre um badge simples no cabeçalho:

[🟢 All Systems Up] [View Status]

Direciona para a página de status completa ou dashboard.

Benefícios dos widgets de status#

Redução da carga de suporte#

Sem widget de status:

• Cliente: "Seu site está fora do ar"
• Suporte: "Deixa eu verificar... sim, estamos cientes, estamos consertando"
• Cliente: "Bom, por que isso não está na sua página de status?"

Com widget de status:

• Cliente vê o status imediatamente
• Sabe que você está ciente e trabalhando nisso
• Não entra em contato com o suporte

Resultado: Menos tickets de suporte, resposta mais rápida para necessidades reais de suporte.

Confiança e transparência#

Mostrar o status em tempo real prova que:

• Você monitora sua infraestrutura
• Você é honesto sobre os problemas
• Você valoriza a comunicação com o cliente
• Você se importa com a disponibilidade

Estudos mostram: status transparente reduz o churn em 40% durante e depois de quedas.

Vantagem competitiva#

Os concorrentes não têm widgets de status. Você tem.

Se o cliente tiver que escolher entre você e um concorrente durante uma queda:

• Concorrente: "Está fora do ar?" (Sem informação)
• Você: "Sim, estamos cientes, consertando agora, ETA 30 min" (Status claro)

Os clientes confiam mais em você.

Configurando o Nova Uptime Status Widget#

Passo 1: Habilitar o Embed Widget#

1. Faça login no dashboard do Nova Uptime
2. Vá até as configurações do domínio
3. Clique em "Embed Settings"
4. Ative "Enable Embed Widget"
5. Copie o embed token

Passo 2: Personalizar a aparência do widget#

Escolha:

• Tema de cor: Light / Dark / Custom
• Componentes a exibir: % de uptime, incidentes recentes, lista de serviços
• Taxa de atualização: 30 segundos, 1 minuto, 5 minutos
• Período histórico: Últimos 7 dias, 30 dias, 90 dias

Passo 3: Adicionar ao site#

Opção 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>

Opção B: Componente React

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

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

Opção C: Página separada Crie status.suaempresa.com e linke para ela:

[Check Status Page]

Personalizando o conteúdo do widget#

O que exibir#

Básico (recomendado para a maioria)

• Status geral (Up/Down)
• % de uptime de 30 dias
• Último incidente com duração

Avançado (para SaaS)

• Status de cada serviço (API, Dashboard, Email)
• Tempos de resposta em tempo real
• Incidentes ativos com atualizações
• Histórico de incidentes (últimos 10)
• Mensagens de atualização voltadas ao cliente

Escolhendo quais serviços mostrar#

Detalhado demais: Confunde os clientes

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

Na medida certa: Mostra o que importa pros clientes

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

Mensagens durante quedas#

Quando ocorre um incidente, atualize o widget de status:

Durante (atualizações em tempo real)

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

Depois (confirmação de resolução)

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

Pós-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]

Considerações técnicas#

CORS e Cross-Origin#

O widget usa JavaScript pra atualizar. Garanta que seu site permita isso:

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

Os headers CORS do Nova Uptime permitem isso automaticamente.

Performance#

O widget adiciona < 50KB ao tamanho da página e não bloqueia o carregamento.

As atualizações acontecem de forma assíncrona a cada 60 segundos, sem atrapalhar a experiência do usuário.

Impacto no SEO#

A informação de status é atualizada dinamicamente (JavaScript), então não afeta o SEO diretamente. Mas ter uma página de status melhora:

• Tempo no site (usuários verificando o status)
• Visitas recorrentes (página de status favoritada)
• Sinais de confiança (gestão adequada de incidentes)

Alternativa: página de status externa#

Se você prefere NÃO incorporar no seu site:

https://yourcompany.statuspage.io

É um domínio separado que os clientes podem favoritar e consultar. Mantém seu site principal limpo enquanto oferece transparência total de status.

Vantagem do Nova Uptime: Não precisa de ferramenta separada. O widget de status já é integrado.

Medindo a eficácia do widget#

Acompanhe:

• Quantos visitantes consultam seu widget de status
• Tempo médio gasto na página de status
• Se os usuários voltam à página de status durante incidentes
• Volume de tickets de suporte durante quedas (deve diminuir)

Use isso pra melhorar o conteúdo e a apresentação da sua página de status.

Boas práticas#

1. Atualize durante incidentes: Atualizações manuais de status são melhores que silêncio
2. Mostre ETAs realistas: "Investigando" é melhor que "Resolvido em 10 min" se você não sabe
3. Post-mortem após incidentes: Os clientes apreciam saber o que aconteceu
4. Mantenha atualizado: Um widget desatualizado prejudica mais do que a ausência dele
5. Deixe visível: Não esconda o widget de status no fim do rodapé

Resumo#

1. Habilite o embed widget no Nova Uptime
2. Personalize a aparência e o conteúdo
3. Adicione o iframe ao seu site ou crie uma página de status dedicada
4. Atualize o status durante e após incidentes
5. Faça o link a partir da documentação de suporte e da central de ajuda
6. Meça a eficácia e itere

Comece a construir a confiança do cliente hoje: habilite o embed widget no seu dashboard do Nova Uptime nas configurações do domínio. Incluído em todos os planos. 🚀