Widget
Binde mit der MDX-Komponente Widget eine Live-Demo des „What's New“-Widgets in deine Dokumentation ein – ohne Script-Tag.
<Widget> fügt einen Live-„What's New“-Auslöser direkt in eine Dokumentationsseite ein. Klicke darauf, und dein Jamdesk-Änderungsprotokoll wird in demselben Modal geöffnet, das deine Kunden sehen, wenn du das Widget in deine App einbindest. Der Unterschied: Hier schreibst du ein MDX-Tag statt eines <script>-Tags, und die Seite ermittelt deine Website automatisch.
Schnellstart
<Widget />Dadurch wird eine Schaltfläche gerendert, die /changelog (den Standardpfad) in einem Modal öffnet. Wenn sich dein Änderungsprotokoll an einem anderen Ort befindet, setze page auf die tatsächliche Route. Andernfalls öffnet sich ein 404-Fehler. Das eigene Änderungsprotokoll von Jamdesk befindet sich beispielsweise unter /reference/changelog.
<Widget page="/reference/changelog" label="What's new" /><Widget> ermittelt selbstständig deinen kanonischen *.jamdesk.app-Ursprung. Daher funktioniert es unabhängig davon, ob sich deine Dokumentation auf einer jamdesk.app-Subdomain oder einer benutzerdefinierten Domain befindet. Das Modal wird immer von der Subdomain geladen, da nur dieser Ursprung die eingebettete Ansicht rendern kann.
Props
| Prop | Type | Default | Purpose |
|---|---|---|---|
page | string | /changelog | Dokumentationspfad, den das Modal öffnet. |
label | string | What's new | Text der Auslöseschaltfläche. |
theme | auto | light | dark | auto | Farbschema des Modals. |
trigger | CSS selector | (none) | Bindet das Widget an dein eigenes Element, statt eine Schaltfläche zu rendern. |
width / height | CSS length | 560px / 680px | Größe des Modals. |
radius | CSS length | 12px | Eckenradius des Modals. |
unread | boolean | true | Zeigt den Punkt für ungelesene Einträge an. Auf false setzen, um ihn auszublenden. |
unreadColor | hex / CSS color | #e5484d | Farbe des Punkts für ungelesene Einträge. |
project | string | derived | Überschreibt den gespeicherten Schlüssel „gesehen“. |
Wenn du trigger setzt, muss der Selektor mit einem Element übereinstimmen, das bereits auf der Seite vorhanden ist. Wenn er kein Element findet, verwendet das Widget stattdessen seinen eigenen schwebenden Auslöser in der Ecke, anstatt nichts zu tun.
Der Status „gesehen“ des Punkts für ungelesene Einträge wird pro Browser und pro Ursprung (der Seite, auf der das Widget ausgeführt wird) gespeichert. Daher werden die Statusangaben eines Besuchers in deiner Dokumentation und in deiner App getrennt erfasst. Sie werden nicht synchronisiert. Für eine Demo-Schaltfläche kannst du unread={false} setzen, um den Punkt vollständig zu deaktivieren.
Live-Beispiel
Diese Schaltfläche öffnet das Modal auf der bereitgestellten Dokumentationswebsite, auf der <Widget> an deinen kanonischen *.jamdesk.app-Ursprung gebunden wird. In der lokalen Vorschau mit jamdesk dev gibt es keinen veröffentlichten Ursprung, von dem das Modal geladen werden kann, daher kann der Auslöser es nicht öffnen. Stattdessen wird neben der Schaltfläche die Beschriftung „Live preview“ angezeigt. Stelle die Seite bereit (oder öffne sie auf deiner Live-Website), um die eigentliche Funktion auszuprobieren.