Встраиваемые статус-виджеты: показывайте uptime клиентам

Зачем показывать uptime клиентам#

Когда сайт лежит, клиенты гадают: «У меня лежит или у всех?»

Без статусной информации они:

• Лихорадочно обновляют страницу
• Пробуют разные браузеры/устройства
• Звонят в поддержку (тратя ваше время)
• Считают вас ненадёжными (повреждая доверие)

Простой статус-виджет отвечает на их вопрос: «Да, мы знаем, что лежит, и чиним».

Что показывает статус-виджет

Статус-виджет Nova Uptime

🟢 Все системы работают

Последние 30 дней: 99.87% uptime
Последний инцидент: 18 фев, 14:32–14:47 UTC (15 мин)

Текущий статус:
✅ mysite.com — работает
✅ api.mysite.com — работает
✅ Email Service — работает

[Открыть полный статус] [Подписаться на обновления]

Опции встраиваемого виджета

Опция 1: встроенный iframe на сайте#

Добавьте в футер сайта или на отдельную страницу статуса:

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

Автоматически обновляется каждые 60 секунд без перезагрузки.

Опция 2: отдельный статус-поддомен#

Создайте status.yourcompany.com, показывающий полную статус-страницу с:

• Текущим статусом всех сервисов
• Историей инцидентов
• Ожидаемым временем восстановления
• Уведомлениями для клиентов

Опция 3: inline-статус-бейдж#

Покажите простой бейдж в шапке:

[🟢 Все системы работают] [Открыть статус]

Ссылается на полную статус-страницу или дашборд.

Преимущества статус-виджетов

Снижение нагрузки на поддержку

Без статус-виджета:

• Клиент: «Ваш сайт лежит»
• Поддержка: «Сейчас проверю… да, мы в курсе, чиним»
• Клиент: «А почему этого нет на статус-странице?»

С виджетом:

• Клиент сразу видит статус
• Знает, что вы в курсе и работаете
• Не пишет в поддержку

Результат: меньше тикетов поддержки, более быстрый ответ на реальные нужды.

Доверие и прозрачность

Показ статуса в реальном времени доказывает:

• Вы мониторите инфраструктуру
• Честны с проблемами
• Цените коммуникацию с клиентами
• Заботитесь о доступности

Исследования показывают: прозрачный статус снижает churn на 40% во время и после простоев.

Конкурентное преимущество

У конкурентов нет статус-виджетов. У вас — есть.

Если клиенту нужно выбрать между вами и конкурентом во время простоя:

• Конкурент: «Они лежат?» (нет информации)
• Вы: «Да, в курсе, чиним, ETA 30 мин» (понятный статус)

Клиенты доверяют вам больше.

Настройка статус-виджета Nova Uptime#

Шаг 1: включите Embed Widget#

1. Войдите в дашборд Nova Uptime
2. Перейдите в настройки домена
3. Кликните «Embed Settings»
4. Включите «Enable Embed Widget»
5. Скопируйте embed-токен

Шаг 2: настройте внешний вид виджета#

Выберите:

• Цветовую тему: Light / Dark / Custom
• Компоненты для отображения: % uptime, недавние инциденты, список сервисов
• Частоту обновления: 30 секунд, 1 минута, 5 минут
• Исторический период: последние 7 дней, 30 дней, 90 дней

Шаг 3: добавьте на сайт#

Вариант A: HTML iframe

<!-- Поместите в футер или отдельную страницу -->
<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>

Вариант B: React-компонент

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

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

Вариант C: отдельная страница Создайте status.yourcompany.com и сошлитесь на неё:

[Перейти на статус-страницу]

Кастомизация контента виджета

Что отображать

Базовое (рекомендовано большинству)

• Общий статус (Работает/Лежит)
• % uptime за 30 дней
• Последний инцидент с длительностью

Расширенное (для SaaS)

• Статус отдельных сервисов (API, дашборд, email)
• Время отклика в реальном времени
• Активные инциденты с обновлениями
• История инцидентов (последние 10)
• Сообщения для клиентов

Какие сервисы показывать

Слишком детально: путает клиентов

- Load Balancer: работает
- API Node 1: работает
- API Node 2: работает
- Cache Layer: работает
- Database Primary: работает
- Database Replica: работает

В самый раз: показывает то, что важно клиентам

- Сайт: работает
- API: работает
- Email-сервис: работает

Сообщения во время простоев

Когда случается инцидент, обновляйте статус-виджет:

Во время (обновления в реальном времени)

🟡 Частичный простой — расследуем
API сейчас недоступен из-за проблем с подключением к БД.
Начало: 14:32 UTC
Ожидаемое исправление: в работе

После (подтверждение разрешения)

✅ Решено
Подключение к БД восстановлено. Все сервисы работают.
Длительность инцидента: 15 минут
Решено: 14:47 UTC

После инцидента

Post-Mortem: [Ссылка на разбор инцидента]
Произошёл failover БД, занявший 15 минут.
[Детали того, что мы поняли и как предотвращаем повторение]

Технические соображения

CORS и Cross-Origin#

Виджет использует JavaScript для обновления. Убедитесь, что ваш сайт это разрешает:

// Запускается на вашем сайте, забирает с Nova Uptime
fetch('https://api.novauptime.com/embed/YOUR_TOKEN/status')
  .then(response => response.json())
  .then(data => updateWidget(data));

CORS-заголовки Nova Uptime позволяют это автоматически.

Производительность

Виджет добавляет < 50 KB к размеру страницы и не блокирует загрузку.

Обновления идут асинхронно каждые 60 секунд, не нарушая UX.

Влияние на SEO#

Статусная информация обновляется динамически (JavaScript), поэтому напрямую на SEO не влияет. Но наличие статус-страницы улучшает:

• Время на сайте (пользователи проверяют статус)
• Возвраты (закладка на статус-страницу)
• Сигналы доверия (правильный incident management)

Альтернатива: внешняя статус-страница

Если предпочитаете НЕ встраивать на сайт:

https://yourcompany.statuspage.io

Это отдельный домен, который клиенты могут добавить в закладки и проверять. Сохраняет основной сайт незагромождённым, при этом обеспечивая полную прозрачность статуса.

Преимущество Nova Uptime: отдельный инструмент не нужен. Статус-виджет встроен.

Измерение эффективности виджета

Отслеживайте:

• Сколько посетителей проверяют статус-виджет
• Среднее время на статус-странице
• Возвращаются ли пользователи во время инцидентов
• Объём тикетов поддержки во время простоев (должен снижаться)

Используйте это, чтобы улучшать контент и подачу статус-страницы.

Лучшие практики

1. Обновляйте во время инцидентов: ручные апдейты лучше тишины
2. Показывайте реалистичные ETA: «Расследуем» лучше, чем «Починим за 10 мин», если не знаете
3. Post-mortem после инцидентов: клиенты ценят, когда узнают, что произошло
4. Держите актуальным: устаревший виджет вредит больше, чем его отсутствие
5. Делайте видимым: не прячьте виджет внизу футера

Итог

1. Включите embed-виджет в Nova Uptime
2. Настройте внешний вид и контент
3. Добавьте iframe на сайт или создайте отдельную статус-страницу
4. Обновляйте статус во время и после инцидентов
5. Сошлитесь из support-документации и help center
6. Измеряйте эффективность и итерируйте

Стройте доверие клиентов уже сегодня: включите embed-виджет в дашборде Nova Uptime в настройках домена. Доступно на всех тарифах. 🚀