# Adicione um widget ao seu site

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

A Instatus oferece três formas de mostrar seu status no seu próprio site: um widget flutuante que aparece durante incidentes, um selo para o rodapé e um endpoint `summary.json` para montar um widget personalizado.

Para adicionar um, acesse [dashboard.instatus.com](https://dashboard.instatus.com), escolha sua página de status, abra **Widget**, escolha o tipo de widget e copie o código.

| At a glance | Details |
| :-- | :-- |
| [Widget flutuante](https://instatus.com/help/pt-br/status-page/widgets#como-adiciono-um-widget-flutuante) | Cores e posição, script no body da sua página |
| [Selo](https://instatus.com/help/pt-br/status-page/widgets#como-adiciono-um-selo-de-status-ao-meu-rodapé) | Claro ou escuro, três tamanhos, embed no rodapé |
| [Widget personalizado](https://instatus.com/help/pt-br/status-page/widgets#como-monto-um-widget-personalizado) | summary.json com status, incidentes, manutenções |

---

## Como adiciono um widget flutuante?

1. Entre na Instatus em [instatus.com/login](https://dashboard.instatus.com/login) e escolha sua página de status.

2. Vá em **Widget → Flutuante**.

3. Personalize o widget do seu jeito, escolhendo:

- A cor de fundo
- A cor do texto
- A posição do widget na página

4. Copie o script do widget e cole-o no body da sua página HTML.

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

O widget aparece quando surge um novo incidente 🙀

---

## Como adiciono um selo de status ao meu rodapé?

1. Entre na Instatus em [instatus.com/login](https://dashboard.instatus.com/login) e escolha sua página de status.

2. Vá em **Widget → Selo**.

3. Escolha o modo claro ou escuro

4. Escolha o tamanho (pequeno, médio ou grande) <span className="text-lg">🤏</span>

5. Insira o código na sua página HTML

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

Você deve ver um selo no seu rodapé 🥳

---

## Como monto um widget personalizado?

Busque o `summary.json` da sua página de status para obter o status atual, os incidentes ativos e as manutenções como dados ao vivo para o seu próprio widget:

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

**Exemplo de resposta:**

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

Status possíveis da página:

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

Status possíveis do incidente:

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

Status possíveis da manutenção:

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

Agora você pode ter um widget próprio! 🥳

- [Use um domínio próprio na sua página da Instatus](https://instatus.com/help/pt-br/status-page/custom-domain): Aprenda a usar um domínio próprio na sua página de status.