# Thêm widget vào website của bạn

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

Instatus cung cấp ba cách để hiển thị trạng thái trên website của riêng bạn: một widget nổi bật lên khi có sự cố, một huy hiệu cho chân trang, và endpoint `summary.json` để tự xây dựng widget tùy chỉnh.

Để thêm, hãy vào [dashboard.instatus.com](https://dashboard.instatus.com), chọn trang trạng thái của bạn, mở **Widget**, chọn loại widget và sao chép đoạn mã.

| At a glance | Details |
| :-- | :-- |
| [Widget nổi](https://instatus.com/help/vi/status-page/widgets#làm-sao-để-thêm-một-widget-nổi) | Màu sắc và vị trí, script đặt trong body của trang |
| [Huy hiệu](https://instatus.com/help/vi/status-page/widgets#làm-sao-để-thêm-huy-hiệu-trạng-thái-vào-chân-trang) | Sáng hoặc tối, ba kích thước, nhúng ở chân trang |
| [Widget tùy chỉnh](https://instatus.com/help/vi/status-page/widgets#làm-sao-để-xây-dựng-một-widget-tùy-chỉnh) | summary.json với trạng thái, sự cố, đợt bảo trì |

---

## Làm sao để thêm một widget nổi?

1. Đăng nhập vào Instatus tại [instatus.com/login](https://dashboard.instatus.com/login) rồi chọn trang trạng thái của bạn.

2. Vào **Widget → Floating**.

3. Tùy chỉnh widget theo ý bạn bằng cách chọn:

- Màu nền
- Màu chữ
- Vị trí của widget trên trang

4. Sao chép script widget và dán vào phần body của trang HTML.

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

Widget sẽ bật lên khi có sự cố mới 🙀

---

## Làm sao để thêm huy hiệu trạng thái vào chân trang?

1. Đăng nhập vào Instatus tại [instatus.com/login](https://dashboard.instatus.com/login) rồi chọn trang trạng thái của bạn.

2. Vào **Widget → Badge**.

3. Chọn chế độ sáng hoặc tối

4. Chọn kích thước (nhỏ, vừa hoặc lớn) <span className="text-lg">🤏</span>

5. Nhúng đoạn mã vào trang HTML của bạn

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

Bạn sẽ thấy một huy hiệu ở chân trang 🥳

---

## Làm sao để xây dựng một widget tùy chỉnh?

Lấy `summary.json` từ trang trạng thái của bạn để nhận trạng thái hiện tại, các sự cố và đợt bảo trì đang diễn ra dưới dạng dữ liệu trực tiếp cho widget của riêng bạn:

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

**Phản hồi mẫu:**

```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"
    }
  ]
}
```

Các trạng thái trang có thể có:

- `UP`
- `HASISSUES`
- `UNDERMAINTENANCE`

Các trạng thái sự cố có thể có:

- `INVESTIGATING`
- `IDENTIFIED`
- `MONITORING`
- `RESOLVED`

Các trạng thái bảo trì có thể có:

- `NOTSTARTEDYET`
- `INPROGRESS`
- `COMPLETED`

Giờ bạn có thể có widget tùy chỉnh của riêng mình! 🥳

- [Dùng tên miền riêng cho trang Instatus của bạn](https://instatus.com/help/vi/status-page/custom-domain): Tìm hiểu cách dùng tên miền riêng cho trang trạng thái của bạn.