App-Dokumentations-Widget
Kontextbezogene Dokumentation ist in Ihr Produkt eingebettet, genau dort, wo die Benutzer sie am meisten benötigen. Das kontextbezogene Docs-Widget hilft Benutzern, die Dokumentation zu lesen, ohne das Benutzerhandbuch-Portal in einem anderen Fenster durchsuchen zu müssen.
Sie können spezifische Artikel oder das gesamte Benutzerhandbuch-Portal laden – ein Muss für Unternehmen, die die Produktakzeptanz und -bindung erhöhen möchten.
Alles, was Sie tun müssen, ist den unter Space-Einstellungen -> Widget-Integration generierten HTML-Code einzubetten.
Wie das Widget funktioniert
Sehen Sie sich das folgende Video an, das das Widget in Aktion zeigt:
Wie Sie das Widget implementieren
Um das Widget zu integrieren, folgen Sie diesen Schritten:
Wählen Sie Ihren Weltraum im Editor aus.
Klicken Sie auf das Zahnradsymbol (⚙️), um zu den Einstellungen.
Gehen Sie zu Widget-Integration.
Klicken Sie auf die Kopierschaltfläche und fügen Sie den Code in Ihre index.html-Datei oder in Ihren Anwendungscode ein.
Jetzt übernimmt das Widget alles im Hintergrund. Keine Sorge, alles ist gebündelt und minimiert. Es ist ein nur 56 KB großer Download und wird asynchron geladen, sodass Ihre Benutzer keinen Unterschied bemerken werden.
Init-Event
Im init-Event können Sie für den Wert von spaceId entweder die spaceId oder VERÖFFENTLICHT-{spaceId} verwenden. Auf diese Weise können Sie Spaces ohne Veröffentlichung direkt in Ihrer App verwenden.
Verwenden Sie VORSCHAU-{spaceId} wenn Sie einen Space nur für die Vorschau und nicht auf Ihrer Domain veröffentlichen möchten.
Eigenschaft | Typ | Beschreibung | Erforderlich |
|---|---|---|---|
spaceId | Zeichenkette | Übergeben Sie die gewünschte ID, um Ihre Dokumente zu laden. | erforderlich |
jwt | Zeichenkette | Übergeben Sie das jwt-Token, um jwt-geschützte Dokumente zu sehen. | optional |
shareableToken | Zeichenkette | Übergeben Sie das shareableToken aus Ihren privaten Links, um Ihre Dokumente zu schützen. | optional |
widgetType | 'docs' | 'Suche' | Standardwert ist Dokumente. Dies öffnet das Widget mit dem gewünschten Verhalten. Dokumente-Typ ö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 |
hideNavbar | Boolean | 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 sie mit dem Wert wahr, andernfalls überspringen Sie sie einfach. | |
loadingStrategy | faul | eifrig | Der Standardwert ist faul. Während faul das Initialisieren einer Ressource verzögert, initialisiert eifrig das Widget sofort, sobald der Code ausgeführt wird. | optional |
Blase | unsichtbar | fragen | Der Standardwert ist unsichtbar. Wenn auf fragen gesetzt, wird unten rechts auf Ihrem Bildschirm eine Bubble angezeigt. Wann immer jemand darauf klickt, öffnet sich das Such-Widget. | optional |
bubblePlaceholder | Zeichenkette | Der Platzhalter, der im Bubble-Bereich angezeigt wird. Wenn nicht übergeben, wird ein Standardwert von Eine Frage stellen angezeigt. | optional |
Anker | Zeichenkette | Sie können Ihre Klasse, id oder Pfad zu einem DOM-Element angeben, an dem das Widget verankert und instanziiert werden soll. Es wird an das erste im DOM gefundene Element verankert, wenn mehrere Elemente mit demselben Pfad vorhanden sind. Der bereitgestellte Container sollte position: relativ haben, da das Widget basierend auf dem ersten relativen Elternteil angezeigt wird, das gefunden wird. z. B.: anchor: "#my-container" / anchor: ".container-class" | optional |
Wenn Sie möchten, dass in Ihrer App immer eine einfache Such-Bubble vorhanden ist, verwenden Sie diebubble: "fragen"-Eigenschaft.
Widget-Ereignis anzeigen
show-widget-Ereignis löst die Aktion zum Anzeigen des Widgets aus. Es verfügt außerdem über eineoptionale 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. WenndocId übergeben wird, wirdwidgetType ignoriert. Es wird unabhängig von der übergebenen Eigenschaft imDokumente-Modus geöffnet. Hinweis: Sie müssen das Wort PUBLISHED vor die docId setzen, alsoPUBLISHED-docId oderPREVIEW-spaceId; andernfalls öffnet das Widget das Dokument im Bearbeitungsmodus, das eventuell unveröffentlichte Änderungen enthält. | optional |
blockId | Legen Sie eine bestimmte blockId fest, um zu dem gewünschten Abschnitt im Dokument zu scrollen. | optional |
Unterstützte Ereignisse
Hier finden Sie eine kurze Beschreibung unsererWidget-Ereignis API:
Ereignisname | Beschreibung | Erforderlich |
|---|---|---|
init | Dieses Ereignis hilft dem Archbee-Widget, die erforderlichen Dateien in Ihre App zu laden. | erforderlich |
show-widget | Dieses Ereignis zeigt das Widget bei Bedarf an. | erforderlich |
Widget ausblenden | Dieses Ereignis blendet das Widget aus, falls die integrierten Mechanismen nicht ausreichen. | optional |
Codebeispiele
Fügen Sie eine Funktion an einer beliebigen Stelle hinzu, an der Sie das Widget auf Ihrer Seite anzeigen möchten, wie folgt:
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 mit den gewünschten Space-Dokumenten geladen und die Nutzer können alles direkt in Ihrer App sehen.
Wenn Sie nur ein bestimmtes Dokument laden möchten, übergeben Sie einfachdocId: `${docId}` an unser Initialisierungsobjekt wie im obigen Beispiel.
Sie benötigen die FunktioncloseWidget nicht, da das Widget automatisch geschlossen wird, wenn SieEsc drücken oder außerhalb davon klicken.
Wenn Sie das Widget jedoch programmatisch schließen möchten und sich nicht auf die integrierten Schließmechanismen verlassen möchten, können Sie den Widget ausblenden Ereignistyp 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);