---
title: Widget
description: "Incorpore uma demonstração ao vivo do widget What's New na documentação com o componente MDX Widget, que abre seu changelog em um modal sem tag de 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>` adiciona um acionador do What's New ao vivo diretamente a uma página de documentação. Clique nele para abrir seu changelog no mesmo modal que seus clientes veem quando você [incorpora o widget no seu app](/pt/development/embed-page). A diferença: aqui, você escreve uma tag MDX em vez de uma tag `<script>`, e a página resolve seu site automaticamente.

## Início rápido

```mdx
<Widget />
```

Isso renderiza um botão que abre `/changelog` (o caminho padrão) em um modal. Se o changelog estiver em outro local, defina `page` com a rota correspondente, caso contrário o modal abrirá um erro 404. (Por exemplo, o changelog do próprio Jamdesk está em `/reference/changelog`.)

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

<Note>
`<Widget>` resolve sozinho a origem canônica `*.jamdesk.app`, portanto funciona da mesma forma tanto quando sua documentação está em um subdomínio `jamdesk.app` quanto em um domínio personalizado. O modal sempre é carregado a partir do subdomínio, que é a única origem capaz de renderizar a visualização incorporada.
</Note>

## Propriedades

| Prop | Type | Default | Purpose |
|------|------|---------|---------|
| `page` | string | `/changelog` | Caminho da documentação que o modal abre. |
| `label` | string | `What's new` | Texto do botão acionador. |
| `theme` | `auto` \| `light` \| `dark` | `auto` | Esquema de cores do modal. |
| `trigger` | CSS selector | _(none)_ | Vincula o widget ao seu próprio elemento em vez de renderizar um botão. |
| `width` / `height` | CSS length | `560px` / `680px` | Tamanho do modal. |
| `radius` | CSS length | `12px` | Raio dos cantos do modal. |
| `unread` | boolean | `true` | Mostra o ponto de não lido. Defina como `false` para ocultá-lo. |
| `unreadColor` | hex / CSS color | `#e5484d` | Cor do ponto de não lido. |
| `project` | string | derived | Substitui a chave armazenada de "visto". |

<Note>
Ao definir `trigger`, verifique se o seletor corresponde a um elemento que já esteja na página. Se não corresponder a nada, o widget usará seu próprio acionador flutuante no canto em vez de não fazer nada.
</Note>

O estado de "visto" do ponto de não lido é armazenado por navegador **e por origem** (a página em que o widget é executado), portanto o estado de visualização de um visitante na documentação e no seu app é controlado separadamente. Eles não são sincronizados. Para um botão de demonstração, defina `unread={false}` para remover o ponto completamente.

## Exemplo ao vivo

<Widget page="/reference/changelog" label="Veja as novidades no Jamdesk" unread={false} />

<Note>
Este botão abre o modal no site de documentação publicado, onde `<Widget>` se vincula à sua origem canônica `*.jamdesk.app`. Na visualização local de `jamdesk dev`, não há uma origem publicada de onde carregar o modal, portanto o acionador não pode abri-lo. Em vez disso, ele mostra a legenda "Live preview" ao lado do botão. Publique a página (ou abra-a no seu site ao vivo) para testar o recurso real.
</Note>

## O que vem a seguir?

<Columns cols={2}>
  <Card title="Incorporar no seu app" icon="code" href="/pt/development/embed-page">
    O snippet `<script>` para colocar o widget no seu próprio produto
  </Card>
  <Card title="Componente de atualização" icon="timeline" href="/pt/components/update">
    Escreva as entradas do changelog lidas pelo widget
  </Card>
  <Card title="Código-fonte do Widget" icon="github" href="https://github.com/jamdesk/jamdesk-widget">
    Fixe uma versão, faça self-hosting ou leia o código-fonte no GitHub
  </Card>
</Columns>