# 在你的網站上加入小工具

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

Instatus 提供三種在自己網站上顯示狀態的方式：事件發生時彈出的浮動小工具、放在頁尾的徽章，以及用來打造自訂小工具的 `summary.json` 端點。

要加入小工具，請前往 [dashboard.instatus.com](https://dashboard.instatus.com)，選擇你的狀態頁，開啟**小工具**，挑選小工具類型並複製程式碼。

| At a glance | Details |
| :-- | :-- |
| [浮動小工具](https://instatus.com/help/zh-tw/status-page/widgets#如何加入浮動小工具) | 顏色與位置，腳本放在頁面 body 中 |
| [徽章](https://instatus.com/help/zh-tw/status-page/widgets#如何在頁尾加入狀態徽章) | 淺色或深色、三種尺寸、嵌入頁尾 |
| [自訂小工具](https://instatus.com/help/zh-tw/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/zh-tw/status-page/custom-domain): 了解如何為狀態頁使用自有網域。