--- title: App-Dokumentations-Widget - React slug: docs/de/app-dokumentations-widget-react createdAt: 2023-11-17T14:25:39.130Z --- Wir haben einige der [Vorteile der kontextbezogenen Dokumentation](docId\:kAKtZkspgot5OMQcEOHL3) bereits im vorherigen Kapitel erklärt. Diese Anleitung dient als Alternative für `React`- und `NextJS`-Apps, um das Archbee-App-Widget auf elegantere Weise zu integrieren. ## App-Widget integrieren :::::WorkflowBlock :::WorkflowBlockItem Installieren Sie unser [npm-Paket](https://www.npmjs.com/package/@archbee/app-widget): ```shell # with npm $ npm install --save @archbee/app-widget # or with yarn $ yarn add @archbee/app-widget ``` ::: ::::WorkflowBlockItem Wenn das Paket installiert ist, gehen Sie zu Ihrer `jsx/tsx`-Datei und instanziieren Sie die Komponente: :::CodeblockTabs React ```typescript import React from 'react'; import { ArchbeeAppWidget, AbWidgetRef } from '@archbee/app-widget' function App() { const widgetRef = useRef(null); return (
{ /** ... **/ }} // callback function called after widget has open onWidgetClose={() => { /** ... **/ }} // callback function called after widget has open >
); } ``` ::: :::: :::WorkflowBlockItem Sie können die Informationen auch aus den **Space Einstellungen** entnehmen: 1. Wählen Sie Ihren **Weltraum **im Editor aus. 2. Klicken Sie auf das Zahnrad-Symbol (⚙️), um zu den **Einstellungen** zu gelangen. 3. Gehen Sie zu **Widget-Integration**. 4. Klicken Sie auf den `React`-Tab und dann auf die Kopier-Schaltfläche und fügen Sie den Code in Ihre `tsx/.jsx`-Datei ein. ::: ::::: Nun übernimmt das Widget alles hinter den Kulissen. Keine Sorge, alles ist gebündelt und minimiert. Es ist ein Download von nur 56Kb und wird asynchron geladen, sodass Ihre Benutzer keinen Unterschied bemerken werden. ### Komponenten-Props | **Eigenschaft** | **Typ** | **Erforderlich** | **Beschreibung** | | ------------------- | ----------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `spaceId` | `Zeichenkette` | `erforderlich` | Übergeben Sie die gewünschte ID, um Ihre Dokumente zu laden. | | `docId` | `Zeichenkette` | `optional` | Das Dokument, in dem Sie die Widget-Dokumentation öffnen möchten. Wenn `docId` übergeben wird, wird `WidgetTYP` ignoriert. Es wird unabhängig von der übergebenen Eigenschaft im `Dokumente`-Modus geöffnet. | | `shareableToken` | `Zeichenkette` | `optional` | Übergeben Sie das shareableToken aus Ihren privaten Links, um Ihre Dokumente zu schützen. | | `className` | `Zeichenkette` | `optional` | Übergeben Sie CSS-Klassen an den `div`-Wrapper. | | `WidgetTYP` | `'docs' \| 'Suche'` | `optional` | Der Standardwert ist `Dokumente`. Damit wird das Widget mit dem gewünschten Verhalten geöffnet. `Dokumente` öffnet das Widget mit dem Standardverhalten, `Suche` öffnet eine Such-Widget-Leiste, die eine Suchleiste mit KI-Unterstützung anzeigt (falls in Ihrem Abonnement enthalten). | | `hideNavbar` | `boolean` | `optional` | 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 diese Eigenschaft einfach weg. | | `loadingStrategy` | `'eifrig' \| 'träge'` | `optional` | Der Standardwert ist `faul`. Ladestrategiemethode für das Laden des Widgets. | | `Blase` | `unsichtbar \| fragen` | `optional` | Der Standardwert ist `unsichtbar`. Wenn auf `fragen` gesetzt, wird unten rechts auf Ihrem Bildschirm eine Blase angezeigt. Wann immer jemand darauf klickt, öffnet sich das Such-Widget. | | `bubblePlaceholder` | `Zeichenkette` | `optional` | Der Platzhalter, der im Bubble-Bereich angezeigt wird. Wenn nicht übergeben, wird ein Standardwert von `Eine Frage stellen` angezeigt. | | `Anker` | `Zeichenkette` | `optional` | 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 Element im DOM verankert, wenn mehrere Elemente mit demselben Pfad vorhanden sind. Der angegebene Container sollte `position: relative` besitzen, da das Widget basierend auf dem ersten **relativ** **Elternteil** angezeigt wird.
z. B.: `Anker: "#my-container"` / `Anker: ".container-class"` | | `onWidgetOpen` | `leer` | `optional` | Callback, das aufgerufen wird, nachdem das Widget geöffnet wurde. | | `onWidgetClose` | `leer` | `optional` | Callback, das aufgerufen wird, nachdem das Widget geschlossen wurde. | :::hint{type="info"} Freigabefähige Tokens sind im [Scaling-Plan](https://www.archbee.com/pricing) verfügbar. Lesen Sie mehr über [Kontrollen für öffentlichen Zugriff](docId\:lX0X8z_IkCDe5V6tsHjkz). ::: ### Ref-Methoden :::hint{type="info"} Wenn `ref` nicht an `ArchbeeAppWidget` übergeben wird, öffnen Kinder beim Anklicken automatisch das modale Pop-up. ::: | **Eigenschaft** | **Typ** | **Beschreibung** | | --------------- | --------- | -------------------------------------- | | `offen` | `Methode` | Öffnet das Widget programmgesteuert. | | `Schließen` | `Methode` | Schließt das Widget programmgesteuert. | | `Instanz` | `Methode` | Gibt die Instanz des Widgets zurück. |