# 웹사이트에 위젯 추가하기

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

Instatus는 자체 웹사이트에 상태를 표시하는 세 가지 방법을 제공합니다. 인시던트 중에 나타나는 플로팅 위젯, 푸터용 배지, 그리고 커스텀 위젯을 만들기 위한 `summary.json` 엔드포인트입니다.

추가하려면 [dashboard.instatus.com](https://dashboard.instatus.com)에서 상태 페이지를 선택하고 **위젯**을 연 다음 위젯 유형을 고르고 코드를 복사하세요.

| At a glance | Details |
| :-- | :-- |
| [플로팅 위젯](https://instatus.com/help/ko/status-page/widgets#플로팅-위젯은-어떻게-추가하나요) | 색상과 위치, 페이지 본문에 스크립트 |
| [배지](https://instatus.com/help/ko/status-page/widgets#푸터에-상태-배지를-추가하려면-어떻게-하나요) | 라이트/다크, 3가지 크기, 푸터 삽입 |
| [커스텀 위젯](https://instatus.com/help/ko/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. 크기를 선택하세요 (small, medium, large) <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/ko/status-page/custom-domain): 상태 페이지에 자체 도메인을 사용하는 방법을 알아보세요.