# 在你的网站上添加小组件

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

Instatus 提供三种在自己网站上展示状态的方式：事件期间弹出的浮动小组件、放在页脚的徽章，以及用于构建自定义小组件的 `summary.json` 端点。

要添加小组件，请前往 [dashboard.instatus.com](https://dashboard.instatus.com)，选择你的状态页，打开**小组件**，选择小组件类型并复制代码。

| At a glance | Details |
| :-- | :-- |
| [浮动小组件](https://instatus.com/help/zh/status-page/widgets#如何添加浮动小组件) | 颜色和位置，脚本放在页面 body 中 |
| [徽章](https://instatus.com/help/zh/status-page/widgets#如何在页脚添加状态徽章) | 浅色或深色，三种尺寸，嵌入页脚 |
| [自定义小组件](https://instatus.com/help/zh/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/status-page/custom-domain): 了解如何为状态页使用自有域名。