# Signal Small Frames

> Build Broadcast dashboard widgets and subscriber panels with sg-widget and sg-panel. Size limits, what fits and common mistakes.

Source: https://sendbroadcast.net/docs/signal-small-frames

> Coming in Broadcast 3.0. Until then, this page applies only to the Upcoming (edge) build.

A plugin can add a small box to the dashboard, or to each subscriber's page. `sg-widget` and `sg-panel` are made for these boxes. They work the same way: the names only say where the box goes.

![A small frame with the title Polls and a stat that shows 318 answers this week](https://sendbroadcast.net/assets/docs/plugins/signal/widget-9327c7b9.png)

## sg-widget and sg-panel

```html
<sg-widget title="Polls">
  <sg-stat label="Answers this week" value="318"></sg-stat>
</sg-widget>
```

| Attribute | Meaning |
|---|---|
| `title` | A small heading |

The box fills the frame, with a white background and small padding.

The manifest picks the place:

| Slot | Use |
|---|---|
| `dashboardWidget` | `sg-widget` |
| `subscriberPanel` | `sg-panel` |

Broadcast draws a title bar above each frame from the manifest's `title`, so you often do not need the `title` attribute.

## The limits of a small frame

A small frame is 16rem high (256 pixels). Anything taller scrolls inside the frame.

- Show one number, or one short form.
- Do not use `sg-page`. It adds large padding and a big title.
- Do not use `sg-menu` or `sg-tooltip` near an edge: they can be cut off at the frame.
- A `sg-dialog` and `sg.confirm` stay inside the frame, so keep them short.

## Which subscriber?

A panel gets the subscriber from its address. Use `sg.subscriberId()`:

```javascript
const id = sg.subscriberId();   // "12", as a string
```

A dashboard widget has no subscriber, and the call gives `null`.

**Common mistake.** Trusting this ID in `pageData`. It comes from the browser. A person who may view the page can change it, so it can only reach subscribers of this channel, but check it if your plugin has extra rules.

## Fill a frame from data

A component draws once, so replace the content of the inner box when the data arrives. The inner box has the class `.sg-widget`, for both tags. See [the widget recipe](https://sendbroadcast.net/docs/signal-recipes#a-dashboard-widget) and [the panel recipe](https://sendbroadcast.net/docs/signal-recipes#a-subscriber-panel).