Виджет и интеграция

В этой статье мы рассмотрим способы встраивания вашей Статус Страницы на ваш веб-сайт или в приложение.

---

Виджет для встраивания

Самый простой способ показать статус ваших сервисов на любой HTML-странице — использовать наш готовый виджет. Виджет автоматически отображает текущий статус всех компонентов и обновляется в реальном времени.

Как использовать виджет

Добавьте следующий код в HTML вашей страницы:

<div 
  data-pingera-widget 
  data-page-id="ID статус страницы"
  data-url=""
  data-lang="ru"
  data-theme="light"
  data-font-color="#000000"
  data-font-size="16px"
  data-status-color-operational="#00ff00"
  data-status-color-incident="#ff0000"
  data-compact="false"
></div>
<script src="https://cdn.app.pingera.ru/widget/widget.js"></script>

Параметры виджета

Виджет поддерживает следующие параметры для настройки его внешнего вида и поведения:

Параметр	Описание
data-page-id	Обязательный. ID вашей Статус Страницы. Вы можете получить его в интерфейсе платформы или через API.
data-url	URL, который откроется при клике на виджет. Если не указан, откроется URL вашей Статус Страницы.
data-lang	Язык виджета. Доступные значения: ru (русский) или en (английский).
data-theme	Тема оформления. Доступные значения: light (светлая) или dark (темная).
data-font-color	Цвет текста в формате HEX (например, #000000).
data-font-size	Размер шрифта (например, 16px).
data-status-color-operational	Цвет индикатора в формате HEX, когда все сервисы работают нормально (например, #00ff00).
data-status-color-incident	Цвет индикатора в формате HEX, когда есть инциденты (например, #ff0000).
data-compact	Компактный режим отображения. Доступные значения: true или false.

Пример использования

<div 
  data-pingera-widget 
  data-page-id="your-page-id-here"
  data-lang="ru"
  data-theme="dark"
  data-font-color="#ffffff"
  data-font-size="14px"
  data-status-color-operational="#10b981"
  data-status-color-incident="#ef4444"
  data-compact="true"
></div>
<script src="https://cdn.app.pingera.ru/widget/widget.js"></script>

---

Собственная реализация через API

Если в вашей компании есть инженеры и вам требуется более гибкое решение, вы можете создать собственную Статус Страницу, используя наше API. Это позволит вам полностью контролировать внешний вид и функциональность страницы, отображая только необходимые компоненты и данные.

Преимущества использования API

• Полный контроль: Создайте уникальный дизайн, который идеально соответствует вашему бренду.
• Гибкость: Отображайте только те компоненты и данные, которые необходимы вашим пользователям.
• Интеграция: Встройте статус сервисов напрямую в ваше приложение или панель управления.

Начало работы с API

Для создания собственной реализации Статус Страницы используйте следующие методы API:

• Получение информации о странице: /v1/pages/{page_id}
• Получение компонентов: /v1/pages/{page_id}/components
• Получение инцидентов: /v1/pages/{page_id}/incidents

Подробная документация по всем доступным методам API доступна в разделе Общая информация по API.

Пример запроса

curl -H "Authorization: YOUR_API_KEY" \
  https://api.pingera.ru/v1/pages/YOUR_PAGE_ID/components

Это вернет список всех компонентов с их текущими статусами, которые вы сможете отобразить на своей странице в любом формате.