ウェブサイトにウィジェットを追加する

訪問者にステータスを伝えたい場合は、ウェブサイトにステータスのウィジェットを追加できます。

Instatus のウィジェットをウェブサイトに追加するには、dashboard.instatus.com にアクセスし、対象のステータスページを選びます。

ウィジェットへ移動し、ウィジェットの種類を選んでコードをコピーすれば完了です。

ウェブサイトにフローティングウィジェットを追加する

1. instatus.com/login から Instatus にログインし、対象のステータスページを選びます。

2. ウィジェット → Floating へ移動します。

3. 次の項目を選んで、ウィジェットを好みに合わせてカスタマイズします。

• 背景色
• 前景色
• ページ上でのウィジェットの位置

4. ウィジェットのスクリプトをコピーし、HTML ページの body に貼り付けます。

ウェブサイトのフッターにバッジを追加する

1. instatus.com/login から Instatus にログインし、対象のステータスページを選びます。

2. ウィジェット → Badge へ移動します。

3. ライトモードかダークモードかを選びます。

4. サイズ (小、中、大) を選びます 🤏

5. コードを HTML ページに埋め込みます。

ウェブサイトに独自のウィジェットを追加する

ステータスページのライブデータを使って、独自のウィジェットを開発できます。

現在のステータス、進行中のインシデントとメンテナンスは、次のエンドポイントから取得できます。

https://[YOUR-STATUS-PAGE]/summary.json

レスポンスの例:

{
  "page": {
    "name": "Instatus",
    "url": "https://instat.us",
    "status": "HASISSUES"
  },
  "activeIncidents": [
	{
      "name": "We're facing an issue with our API",
      "started": "Sat Jun 11 2022 18:55:50 (Coordinated Universal Time)",
      "status": "INVESTIGATING",
      "impact": "MAJOROUTAGE",
      "url": "https://testing-widget.instatus.com/incident/cl4a"
    }
  ],
  "activeMaintenances": [
    {
      "name": "Database maintenance",
      "start": "Sat Jun 11 2022 18:55:54 (Coordinated Universal Time)",
      "status": "NOTSTARTEDYET",
      "duration": "60",
      "url": "https://testing-widget.instatus.com/maintenance/cl4"
    }
  ]
}

ページのステータスとして返る値:

• UP
• HASISSUES
• UNDERMAINTENANCE

インシデントのステータスとして返る値:

• INVESTIGATING
• IDENTIFIED
• MONITORING
• RESOLVED

メンテナンスのステータスとして返る値:

• NOTSTARTEDYET
• INPROGRESS
• COMPLETED