> ## Documentation Index
> Fetch the complete documentation index at: https://docs.betterstatus.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Status Widget

Display a badge on your website to show live updates about the status of your platform. Go to **Status Pages** → **Status Widget** in the dashboard or follow this tutorial.

### Installing the widget

Add the library to your website:

```javascript lines theme={null}
<script src="https://cdn.betterstatus.dev/widget.js"></script>
```

Then add the widget to your code:

<CodeGroup>
  ```jsx React lines theme={null}
  import '@betterstatus/widget';
  <StatusWidget url="acme.betterstatus.dev" />
  ```

  ```javascript HTML lines theme={null}
  <div 
  id="status-widget" 
  data-url="acme.betterstatus.dev"
  ></div>
  ```
</CodeGroup>

Replace **acme.betterstatus.dev** with your status page URL. Even if you use a custom domain, you must use your **betterstatus.dev** URL. You'll find this under **Status Pages** → **Domains**.

### Customizing with CSS

Add a `class` to your widget:

<CodeGroup>
  ```jsx React lines theme={null}
  import '@betterstatus/widget';
  <StatusWidget url="acme.betterstatus.dev" className="status-widget" />
  ```

  ```javascript HTML lines theme={null}
  <div 
  id="status-widget" 
  data-url="acme.betterstatus.dev"
  class="status-widget"
  ></div>
  ```
</CodeGroup>

Then create a CSS block and use any of the properties below:

| Property                         | What it controls                      |
| -------------------------------- | ------------------------------------- |
| `--widget-padding`               | Inner spacing around the badge        |
| `--widget-border-radius`         | Corner rounding (`9999px` = pill)     |
| `--widget-gap`                   | Space between the dot and the label   |
| `--widget-dot-size`              | Diameter of the status dot            |
| `--widget-dot-color-operational` | Dot color when everything is up       |
| `--widget-dot-color-degraded`    | Dot color during degraded performance |
| `--widget-dot-color-outage`      | Dot color during an outage            |
| `--widget-dot-pulse`             | Animated pulse ring around the dot    |
| `--widget-background`            | Badge background color                |
| `--widget-border`                | Badge border                          |
| `--widget-shadow`                | Drop shadow                           |
| `--widget-font-size`             | Label text size                       |
| `--widget-font-weight`           | Label text weight                     |
| `--widget-text-color`            | Label text color                      |