---
title: Widget
description: Embed a live What's New widget demo in your docs with the Widget MDX component: a trigger button that opens your changelog in a modal, no script tag needed.
---

`<Widget>` drops a live What's New trigger straight into a docs page. Click it and your Jamdesk changelog opens in the same modal your customers see when you [embed the widget in your app](/development/embed-page) — except here you write one MDX tag instead of a `<script>`, and the page resolves your site automatically.

## Quick Start

```mdx
<Widget />
```

That renders a button that opens `/changelog` (the default path) in a modal. If your changelog lives somewhere else, set `page` to its actual route, or the modal opens a 404. (Jamdesk's own changelog is at `/reference/changelog`, for example.)

```mdx
<Widget page="/reference/changelog" label="What's new" />
```

<Note>
`<Widget>` resolves your canonical `*.jamdesk.app` origin on its own, so it works the same whether your docs are on a `jamdesk.app` subdomain or a custom domain. The modal always loads from the subdomain, which is the only origin that can render the embedded view.
</Note>

## Props

| Prop | Type | Default | Purpose |
|------|------|---------|---------|
| `page` | string | `/changelog` | Docs path the modal opens. |
| `label` | string | `What's new` | Trigger button text. |
| `theme` | `auto` \| `light` \| `dark` | `auto` | Modal color scheme. |
| `trigger` | CSS selector | _(none)_ | Bind to your own element instead of rendering a button. |
| `width` / `height` | CSS length | `560px` / `680px` | Modal size. |
| `radius` | CSS length | `12px` | Modal corner radius. |
| `unread` | boolean | `true` | Show the unread dot. Set `false` to hide it. |
| `unreadColor` | hex / CSS color | `#e5484d` | Unread dot color. |
| `project` | string | derived | Override the stored "seen" key. |

<Note>
When you set `trigger`, make sure the selector matches an element already on the page. If it matches nothing, the widget falls back to its own floating launcher in the corner rather than doing nothing.
</Note>

The unread dot's "seen" state is stored per browser **and per origin** (the page the widget runs on), so a visitor's seen-state on your docs and in your app are tracked separately. They don't sync. For a demo button, set `unread={false}` to skip the dot entirely.

## Live example

<Widget page="/reference/changelog" label="See what's new in Jamdesk" unread={false} />

<Note>
This button opens the modal on the deployed docs site, where `<Widget>` binds to your canonical `*.jamdesk.app` origin. In local `jamdesk dev` preview there's no published origin to load the modal from, so the trigger can't open — it shows a "Live preview" caption beside the button instead. Deploy the page (or open it on your live site) to try the real thing.
</Note>

## What's Next?

<Columns cols={2}>
  <Card title="Embed in your app" icon="code" href="/development/embed-page">
    The `<script>` snippet for putting the widget in your own product
  </Card>
  <Card title="Update Component" icon="timeline" href="/components/update">
    Write the changelog entries the widget reads
  </Card>
  <Card title="Widget Source" icon="github" href="https://github.com/jamdesk/jamdesk-widget">
    Pin a version, self-host, or read the source on GitHub
  </Card>
</Columns>