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

Source: https://instatus.com/help/ja/status-page/widgets

Instatus では、自社のウェブサイトにステータスを表示する方法を 3 つ用意しています。インシデント発生時にポップアップするフローティングウィジェット、フッター用のバッジ、そして独自のウィジェットを作るための `summary.json` エンドポイントです。

追加するには、[dashboard.instatus.com](https://dashboard.instatus.com) で対象のステータスページを選び、**ウィジェット**を開いてウィジェットの種類を選び、コードをコピーします。

| At a glance | Details |
| :-- | :-- |
| [フローティングウィジェット](https://instatus.com/help/ja/status-page/widgets#フローティングウィジェットを追加するには) | 色と位置を設定し、スクリプトをページの body に配置 |
| [バッジ](https://instatus.com/help/ja/status-page/widgets#フッターにステータスバッジを追加するには) | ライトかダーク、3 サイズ、フッターに埋め込み |
| [カスタムウィジェット](https://instatus.com/help/ja/status-page/widgets#独自のウィジェットを作るには) | summary.json (ステータス、インシデント、メンテナンス) |

---

## フローティングウィジェットを追加するには？

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

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

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

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

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

![](https://instatus.com/help/widget-floating-1.png)

新しいインシデントが発生すると、ウィジェットがポップアップします 🙀

---

## フッターにステータスバッジを追加するには？

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

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

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

4. サイズ (小、中、大) を選びます <span className="text-lg">🤏</span>

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

![](https://instatus.com/help/widget-badge-1.png)

フッターにバッジが表示されるはずです 🥳

---

## 独自のウィジェットを作るには？

ステータスページから `summary.json` を取得すると、現在のステータス、進行中のインシデントとメンテナンスをライブデータとして独自のウィジェットに使えます。

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

**レスポンスの例:**

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

これで独自のウィジェットを用意できます！ 🥳

- [Instatus のページで独自ドメインを使う](https://instatus.com/help/ja/status-page/custom-domain): ステータスページで独自ドメインを使う方法を学ぶ。