---
title: Widget
description: Intégrez une démo du widget « Nouveautés » dans vos docs avec le composant MDX Widget : un bouton déclencheur qui ouvre votre changelog dans une modale, sans balise script.
---

`<Widget>` insère un déclencheur « Nouveautés » directement dans une page de documentation. Cliquez dessus et votre changelog Jamdesk s'ouvre dans la même modale que voient vos clients lorsque vous [intégrez le widget dans votre application](/fr/development/embed-page) — sauf qu'ici vous écrivez une seule balise MDX au lieu d'un `<script>`, et la page résout automatiquement votre site.

## Démarrage rapide

```mdx
<Widget />
```

Cela affiche un bouton qui ouvre `/changelog` (le chemin par défaut) dans une modale. Si votre changelog se trouve ailleurs, définissez `page` sur sa route réelle, sinon la modale ouvre une page 404. (Le changelog de Jamdesk est, par exemple, à `/reference/changelog`.)

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

<Note>
`<Widget>` résout automatiquement votre origine canonique `*.jamdesk.app`, ce qui lui permet de fonctionner de la même façon que vos docs soient sur un sous-domaine `jamdesk.app` ou un domaine personnalisé. La modale se charge toujours depuis le sous-domaine, qui est la seule origine capable d'afficher la vue intégrée.
</Note>

## Props

| Prop | Type | Défaut | Rôle |
|------|------|--------|------|
| `page` | string | `/changelog` | Chemin de la page ouverte dans la modale. |
| `label` | string | `What's new` | Texte du bouton déclencheur. |
| `theme` | `auto` \| `light` \| `dark` | `auto` | Schéma de couleurs de la modale. |
| `trigger` | sélecteur CSS | _(aucun)_ | Lier à votre propre élément plutôt qu'afficher un bouton. |
| `width` / `height` | longueur CSS | `560px` / `680px` | Dimensions de la modale. |
| `radius` | longueur CSS | `12px` | Rayon des coins de la modale. |
| `unread` | boolean | `true` | Affiche le point de non-lu. Définissez `false` pour le masquer. |
| `unreadColor` | couleur hex / CSS | `#e5484d` | Couleur du point de non-lu. |
| `project` | string | dérivé | Remplace la clé « vu » enregistrée. |

<Note>
Lorsque vous définissez `trigger`, assurez-vous que le sélecteur correspond à un élément déjà présent sur la page. S'il ne correspond à rien, le widget bascule sur son propre lanceur flottant dans le coin plutôt que de ne rien faire.
</Note>

L'état « vu » du point de non-lu est stocké par navigateur **et par origine** (la page sur laquelle le widget s'exécute), de sorte que l'état « vu » d'un visiteur dans vos docs et dans votre application est suivi séparément. Ils ne se synchronisent pas. Pour un bouton de démonstration, définissez `unread={false}` pour masquer entièrement le point.

## Exemple en direct

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

## Et ensuite ?

<Columns cols={2}>
  <Card title="Intégrer dans votre application" icon="code" href="/fr/development/embed-page">
    Le snippet `<script>` pour intégrer le widget dans votre propre produit
  </Card>
  <Card title="Composant Update" icon="timeline" href="/fr/components/update">
    Écrire les entrées du changelog que lit le widget
  </Card>
  <Card title="Code source du widget" icon="github" href="https://github.com/jamdesk/jamdesk-widget">
    Épinglez une version, hébergez vous-même ou consultez le code source sur GitHub
  </Card>
</Columns>