--- title: App-Dokumentations-Widget slug: docs/de/app-dokumentations-widget description: Erfahren Sie, wie Sie ein kontextuelles Dokumentations-Widget in Ihr Produkt integrieren, sodass Nutzer auf die Dokumentation zugreifen können, ohne die Anwendung zu verlassen. Dieses Dokument bietet eine Schritt‑für‑Schritt‑Anleitung zum Auswählen eines docTags: createdAt: 2022-01-03T10:17:23.000Z --- 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: ::embed[]{url="https://www.youtube.com/watch?v=aVFVe7wUdWA"} # Wie Sie das Widget implementieren Um das Widget zu integrieren, folgen Sie diesen Schritten: ::::WorkflowBlock :::WorkflowBlockItem Wählen Sie Ihren **Weltraum **im Editor aus. ::: :::WorkflowBlockItem Klicken Sie auf das Zahnradsymbol (⚙️), um zu den **Einstellungen.** ::: :::WorkflowBlockItem Gehen Sie zu **Widget-Integration.** ::: :::WorkflowBlockItem Klicken Sie auf die Kopierschaltfläche und fügen Sie den Code in Ihre `index.html`-Datei oder in Ihren Anwendungscode ein. ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/1ODCzS1Qe9uLsuiEUilLN_widget-light.png "App-Widget-Code kopieren") 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` | :::hint{type="info"} Wenn Sie möchten, dass in Ihrer App immer eine einfache Such-Bubble vorhanden ist, verwenden Sie die`bubble: "fragen"`-Eigenschaft. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbNNh2/e6ZB7rUpuw2yLZ7pmrQ-2_ask-widget-light.png) ::: ## Widget-Ereignis anzeigen `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`Dokumente`-Modus geöffnet.
**Hinweis:** Sie müssen das Wort PUBLISHED vor die docId setzen, also`PUBLISHED-docId` oder`PREVIEW-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 unserer**Widget-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: ```javascript 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 einfach``docId: `${docId}` ``an unser Initialisierungsobjekt wie im obigen Beispiel. Sie benötigen die Funktion`closeWidget` nicht, da das Widget automatisch geschlossen wird, wenn Sie`Esc` 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: ```javascript const closeAbWidgetAfterSeconds = (miliseconds) => { setTimeout(() => { // setTimeout is for demo purposes and it is not required... window._archbee.push({eventType: "hide-widget"}); }, miliseconds); } closeAbWidgetAfterSeconds(5000); ```