Widget
Intégrez une démo du widget Nouveautés dans vos docs avec le composant MDX Widget : un bouton qui ouvre votre changelog en modal, sans script.
<Widget> place un déclencheur Nouveautés directement dans une page de docs. Cliquez dessus et votre changelog Jamdesk s'ouvre dans la même modale que celle que voient vos clients lorsque vous intégrez le widget dans votre application. La différence : ici vous écrivez une balise MDX au lieu d'un <script>, et la page résout automatiquement votre site.
Démarrage rapide
<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 avec sa route réelle, sinon la modale ouvre une erreur 404. (Le changelog de Jamdesk se trouve par exemple à /reference/changelog.)
<Widget page="/reference/changelog" label="What's new" /><Widget> résout automatiquement votre origine canonique *.jamdesk.app, il fonctionne donc 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, la seule origine capable d'afficher la vue intégrée.
Props
| Propriété | Type | Valeur par défaut | Usage |
|---|---|---|---|
page | string | /changelog | Chemin des docs que la modale ouvre. |
label | string | What's new | Texte du bouton déclencheur. |
theme | auto | light | dark | auto | Thème de couleur de la modale. |
trigger | sélecteur CSS | (aucun) | Se lie à votre propre élément au lieu d'afficher un bouton. |
width / height | longueur CSS | 560px / 680px | Taille de la modale. |
radius | longueur CSS | 12px | Rayon des coins de la modale. |
unread | booléen | true | Afficher le point non lu. Définir sur false pour le masquer. |
unreadColor | hex / couleur CSS | #e5484d | Couleur du point non lu. |
project | string | dérivé | Remplace la clé "vu" stockée. |
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.
L'état "vu" du point non lu est stocké par navigateur et par origine (la page sur laquelle le widget s'exécute), donc l'état vu d'un visiteur sur vos docs et dans votre application sont suivis séparément. Ils ne se synchronisent pas. Pour un bouton de démo, définissez unread={false} pour ignorer complètement le point.
Exemple en direct
Ce bouton ouvre la modale sur le site de docs déployé, où <Widget> se lie à votre origine canonique *.jamdesk.app. En preview locale jamdesk dev, il n'y a pas d'origine publiée depuis laquelle charger la modale, donc le déclencheur ne peut pas s'ouvrir. À la place, une légende "Live preview" s'affiche à côté du bouton. Déployez la page (ou ouvrez-la sur votre site en direct) pour essayer la vraie fonctionnalité.