App-Dokumentations-Widget
Die kontextbezogene Dokumentation ist direkt in Ihr Produkt eingebettet, genau dort, wo der Benutzer sie am meisten benötigt. Das Widget für kontextbezogene Dokumentation hilft Benutzern dabei, die Dokumentation zu lesen, ohne das Benutzerhandbuch-Portal in einem anderen Fenster durchsuchen zu müssen.
Sie können bestimmte Artikel oder das gesamte Benutzerhandbuch-Portal laden, was für Unternehmen unverzichtbar ist, die die Produktakzeptanz und Kundenbindung erhöhen möchten.
Alles, was Sie tun müssen, ist, den unter Bereichseinstellungen -> Widget-Integration generierten HTML-Code einzubetten.
So funktioniert das Widget
Sehen Sie sich das folgende Video an, das das Widget in Aktion zeigt:
So implementieren Sie das Widget
Führen Sie die folgenden Schritte aus, um das Widget zu integrieren:
Wählen Sie Ihren Raum im Editor aus.
Klicken Sie auf das Zahnradsymbol (⚙️), um zu Einstellungen.
Gehen Sie zu Widget-Integration.
Klicken Sie auf die Schaltfläche zum Kopieren und fügen Sie den Code in Ihre Datei index.html oder in Ihren Anwendungscode ein.
Jetzt übernimmt das Widget alles im Hintergrund. Keine Sorge, alles ist gebündelt und minifiziert. Es handelt sich lediglich um einen Download von 56 KB und es wird asynchron geladen, sodass Ihre Benutzer keinen Unterschied bemerken werden.
Init-Ereignis
Im init-Ereignis können Sie für den Wert spaceId entweder spaceId oder VERÖFFENTLICHT-{spaceId} verwenden. Auf diese Weise können Sie Spaces verwenden, ohne sie zu veröffentlichen, direkt in Ihrer App.
Verwenden Sie VORSCHAU-{spaceId}, wenn Sie einen Space nur in Preview veröffentlichen möchten und nicht auf Ihrer Domain.
Eigenschaft | Typ | Beschreibung | Erforderlich |
|---|---|---|---|
spaceId | Zeichenkette | Übergeben Sie die gewünschte ID, um Ihre Dokumentation zu laden. | erforderlich |
jwt | Zeichenkette | Übergeben Sie das jwt-Token, um JWT-geschützte Dokumente anzuzeigen. | optional |
freigebbaresToken | Zeichenkette | Übergeben Sie den shareableToken aus Ihren privaten Links, um Ihre Dokumentation zu schützen. | optional |
widgetType | 'docs' | 'search' | Der Standardwert ist docs. Dadurch wird das Widget mit dem gewünschten Verhalten geöffnet. Der Typ docs öffnet das Widget mit dem Standardverhalten, Suche öffnet eine Such-Widget-Leiste, die eine Suchleiste mit AI-Unterstützung anzeigt (falls in Ihrem Abonnement enthalten). | optional |
Navbar ausblenden | boolesch | Dies zeigt oder verbirgt die obere Navigationsleiste im Widget-Modal. Standardmäßig ist die Navigationsleiste sichtbar. Wenn Sie die Navigationsleiste nicht sehen möchten, übergeben Sie den Wert wahr, andernfalls lassen Sie den Parameter einfach weg. | |
Ladestrategie | faul | eifrig | Der Standardwert ist faul. Während faul loading die Initialisierung einer Ressource verzögert, initialisiert oder lädt eifrig loading das Widget, sobald der Code ausgeführt wird. | optional |
Blase | unsichtbar | fragen | Der Standardwert ist unsichtbar. Wenn der Wert auf fragen gesetzt ist, wird unten rechts auf Ihrem Bildschirm eine Bubble angezeigt. Wenn jemand darauf klickt, wird das Such-Widget geöffnet. | optional |
bubblePlaceholder | Zeichenkette | Der Platzhalter, der im Bubble-Bereich angezeigt wird. Wenn kein Wert übergeben wird, wird standardmäßig Fragen stellen angezeigt. | optional |
Anker | Zeichenkette | Sie können Ihre Klasse, id oder Ihren Pfad zu einem DOM-Element angeben, an dem das Widget verankert und instanziiert werden soll. Es wird am ersten im DOM gefundenen Element verankert, wenn mehrere Elemente mit demselben Pfad vorhanden sind. Der bereitgestellte Container sollte Position: relativ besitzen, da das Widget basierend auf dem ersten gefundenen relativen Elternelement angezeigt wird. z. B.: anchor: "#my-container" / anchor: ".container-class" | optional |
Wenn Sie möchten, dass in Ihrer App immer eine einfache Suchblase vorhanden ist, verwenden Sie die Eigenschaft Bubble: „Fragen“.
Show-widget-Ereignis
show-widget-Ereignis löst die Aktion zum Anzeigen des Widgets aus. Es verfügt außerdem über eine optionale Eigenschaft, die Sie übergeben können, um ein bestimmtes Dokument aus Ihren initialisierten Spaces zu öffnen.
Eigenschaft | Beschreibung | Erforderlich |
|---|---|---|
docId | Legen Sie den docId-Wert fest, um ein bestimmtes Dokument zu öffnen. Wenn docId übergeben wird, wird widgetType ignoriert; es wird unabhängig von der übergebenen Eigenschaft im Modus docs geöffnet. Hinweis: Sie müssen das Wort PUBLISHED vor die docId setzen als VERÖFFENTLICHT-docId oder VORSCHAU-spaceId; andernfalls öffnet das Widget das Dokument aus dem Bearbeitungsmodus, das möglicherweise unveröffentlichte Änderungen enthält. | optional |
blockId | Legen Sie eine bestimmte blockId fest, um zum gewünschten Abschnitt in diesem Dokument zu scrollen. | optional |
Unterstützte Ereignisse
Hier ist eine kurze Beschreibung unserer Widget-Ereignis-API:
Ereignisname | Beschreibung | Erforderlich |
|---|---|---|
init | Dieses Ereignis hilft dem Archbee-Widget dabei, die erforderlichen Dateien in Ihre App zu bootstrappen. | erforderlich |
show-widget | Dieses Ereignis zeigt das Widget bei Bedarf an. | erforderlich |
hide-widget | Dieses Ereignis blendet das Widget aus, wenn die integrierten Mechanismen nicht ausreichen. | optional |
Codebeispiele
Fügen Sie eine Funktion dort hinzu, wo Sie das Widget auf Ihrer Website anzeigen möchten, zum Beispiel so:
const openAbWidget = () => {
window._archbee.push({
eventType: "show-widget",
// optional, only for loading a specific doc
// and scroll to section
// docId: `PUBLISHED-${docId}`,
// blockId: "TBMm9"
});
}Dadurch wird das Widget geladen, mit den gewünschten Space-Dokumenten, und Benutzer können alles direkt aus Ihrer App heraus sehen.
Wenn Sie nur ein bestimmtes Dokument laden möchten, übergeben Sie einfach docId: `${docId}` an unser Initialisierungsobjekt wie im obigen Beispiel.
Sie benötigen die Funktion closeWidget nicht, da sich das Widget automatisch schließt, wenn Sie Esc drücken oder außerhalb davon klicken.
Wenn Sie das Widget jedoch programmgesteuert schließen möchten und sich nicht auf die integrierten Schließmechanismen verlassen wollen, können Sie den Ereignistyp hide-widget auf diese Weise verwenden:
const closeAbWidgetAfterSeconds = (miliseconds) => {
setTimeout(() => {
// setTimeout is for demo purposes and it is not required...
window._archbee.push({eventType: "hide-widget"});
}, miliseconds);
}
closeAbWidgetAfterSeconds(5000);