---
title: Widget
description: "Incorpora una demo live di What's New con il componente MDX Widget: un pulsante apre il changelog in una finestra modale, senza tag script."
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

`<Widget>` inserisce direttamente una funzionalità live di What's New in una pagina della documentazione. Fai clic e il changelog di Jamdesk si apre nella stessa finestra modale che i tuoi clienti vedono quando [incorpori il widget nella tua app](/it/development/embed-page). La differenza è che qui scrivi un solo tag MDX invece di un tag `<script>`, e la pagina individua automaticamente il tuo sito.

## Avvio rapido

```mdx
<Widget />
```

Viene visualizzato un pulsante che apre `/changelog` (il percorso predefinito) in una finestra modale. Se il tuo changelog si trova altrove, imposta `page` sul percorso effettivo; in caso contrario, la finestra modale aprirà una pagina 404. (Ad esempio, il changelog di Jamdesk è disponibile all'indirizzo `/reference/changelog`.)

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

<Note>
`<Widget>` individua autonomamente l'origine canonica `*.jamdesk.app`, quindi funziona allo stesso modo sia che la documentazione si trovi su un sottodominio `jamdesk.app`, sia su un dominio personalizzato. La finestra modale viene sempre caricata dal sottodominio, l'unica origine in grado di visualizzare la vista incorporata.
</Note>

## Proprietà

| Prop | Type | Default | Purpose |
|------|------|---------|---------|
| `page` | string | `/changelog` | Percorso della documentazione che la finestra modale apre. |
| `label` | string | `What's new` | Testo del pulsante di attivazione. |
| `theme` | `auto` \| `light` \| `dark` | `auto` | Schema colori della finestra modale. |
| `trigger` | CSS selector | _(none)_ | Associa il widget a un elemento personalizzato invece di visualizzare un pulsante. |
| `width` / `height` | CSS length | `560px` / `680px` | Dimensioni della finestra modale. |
| `radius` | CSS length | `12px` | Raggio degli angoli della finestra modale. |
| `unread` | boolean | `true` | Mostra il punto dei contenuti non letti. Imposta `false` per nasconderlo. |
| `unreadColor` | hex / CSS color | `#e5484d` | Colore del punto dei contenuti non letti. |
| `project` | string | derived | Sostituisce la chiave "seen" memorizzata. |

<Note>
Quando imposti `trigger`, assicurati che il selettore corrisponda a un elemento già presente nella pagina. Se non corrisponde a nulla, il widget visualizza il proprio launcher mobile nell'angolo invece di non fare nulla.
</Note>

Lo stato "seen" del punto dei contenuti non letti viene memorizzato per browser **e per origine** (la pagina su cui viene eseguito il widget), quindi lo stato di lettura di un visitatore nella documentazione e nella tua app viene tracciato separatamente. I due stati non vengono sincronizzati. Per un pulsante demo, imposta `unread={false}` per rimuovere completamente il punto.

## Esempio live

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

<Note>
Questo pulsante apre la finestra modale sul sito della documentazione pubblicato, dove `<Widget>` si collega alla tua origine canonica `*.jamdesk.app`. Nell'anteprima locale `jamdesk dev` non esiste un'origine pubblicata da cui caricare la finestra modale, quindi il pulsante di attivazione non può aprirla. Viene invece visualizzata la didascalia "Live preview" accanto al pulsante. Pubblica la pagina (oppure aprila sul tuo sito live) per provare la funzionalità reale.
</Note>

## Prossimi passi?

<Columns cols={2}>
  <Card title="Incorpora nella tua app" icon="code" href="/it/development/embed-page">
    Lo snippet `<script>` per inserire il widget nel tuo prodotto
  </Card>
  <Card title="Componente Update" icon="timeline" href="/it/components/update">
    Scrivi le voci del changelog lette dal widget
  </Card>
  <Card title="Codice sorgente di Widget" icon="github" href="https://github.com/jamdesk/jamdesk-widget">
    Fissa una versione, esegui il self-hosting o leggi il codice sorgente su GitHub
  </Card>
</Columns>