App-Dokumentations-Widget – React

4 min

Wir haben bereits einige der Vorteile kontextbezogener Dokumentation 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.

Installieren Sie unser npm-Paket:

# mit npm
$ npm install --save @archbee/app-widget

# oder mit yarn
$ yarn add @archbee/app-widget

Wenn das Paket installiert ist, gehen Sie zu Ihrer jsx/tsx-Datei und instanziieren Sie die Komponente:

import React from 'react';
import { ArchbeeAppWidget, AbWidgetRef } from '@archbee/app-widget'

function App() {
const widgetRef = useRef<AbWidgetRef>(null);

  return (
    <div>
        <ArchbeeAppWidget
            ref={widgetRef}
            spaceId={ /** veröffentlichte Space-ID **/ }
            onWidgetOpen={() => { /** ... **/ }} // Callback-Funktion, die aufgerufen wird, nachdem das Widget geöffnet wurde
            onWidgetClose={() => { /** ... **/ }} // Callback-Funktion, die aufgerufen wird, nachdem das Widget geöffnet wurde
      >
        <button type='button' onClick={() => {
        <!-- Öffnet das Widget -->
            widgetRef.current?.open();
        }}>
          Open
        </button>
        
        <button type='button' onClick={() => {
        <!-- Schließt das Widget -->
            widgetRef.current?.close();
        }}>
          Close
        </button>
        
        <button type='button' onClick={() => {
        <!-- Ruft die Instanz des Widgets ab, falls sie für verschiedene Ereignismanipulationen benötigt wird. -->
            widgetRef.current?.instance();
        }}>
          Get widget instance
        </button>
      </ArchbeeAppWidget>
    </div>
  );
}

Sie können die Informationen auch aus Bereichseinstellungen referenzieren:

Wählen Sie Ihren Raum im Editor aus.
Klicken Sie auf das Zahnradsymbol (⚙️), um zu Settings zu gelangen.
Gehen Sie zu Widget-Integration.
Klicken Sie auf die Registerkarte React und dann auf die Schaltfläche zum Kopieren und fügen Sie den Code in Ihre .tsx/.jsx-Datei ein

Jetzt übernimmt das Widget alles hinter den Kulissen. Keine Sorge, alles ist gebündelt und minifiziert. Es ist lediglich ein Download von 56 KB und wird asynchron geladen, sodass Ihre Benutzer keinen Unterschied bemerken werden.

Komponenten-Props

Eigenschaft	Typ	Erforderlich	Beschreibung
spaceId	Zeichenfolge	erforderlich	Übergeben Sie die gewünschte ID, um Ihre Dokumentation zu laden.
docId	Zeichenfolge	optional	Das Dokument, in dem Sie die Widget-Dokumentation öffnen möchten. Wenn docId übergeben wird, wird widgetType ignoriert. Es wird unabhängig von der übergebenen Prop im Modus Dokumente geöffnet.
teilbaresToken	Zeichenfolge	optional	Übergeben Sie den shareableToken aus Ihren privaten Links, um Ihre Dokumentation zu schützen.
className	Zeichenfolge	optional	Übergeben Sie CSS-Klassen an den div-Wrapper.
widgetType	'docs' \| 'search'	optional	Der Standardwert ist Dokumente. Dadurch wird das Widget mit dem gewünschten Verhalten geöffnet. Der Typ 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	Boolesch	optional	Damit wird die obere Navigationsleiste im Widget-Modal angezeigt oder ausgeblendet. Standardmäßig ist die Navigationsleiste sichtbar. Wenn Sie die Navigationsleiste nicht sehen möchten, übergeben Sie den Wert wahr, andernfalls lassen Sie es einfach weg.
Ladestrategie	'eager' \| 'lazy'	optional	Der Standardwert ist faul. Methode der Ladestrategie für das Laden des Widgets.
Blase	unsichtbar \| fragen	optional	Der Standardwert ist unsichtbar. Wenn der Wert auf fragen gesetzt ist, wird eine Blase unten rechts auf Ihrem Bildschirm angezeigt. Wenn jemand darauf klickt, wird das Such-Widget geöffnet.
bubblePlaceholder	Zeichenfolge	optional	Der Platzhalter, der im Blasenbereich angezeigt wird. Wenn kein Wert übergeben wird, wird der Standardwert Eine Frage stellen angezeigt.
Anker	Zeichenfolge	optional	Sie können Ihre Klasse, id oder Ihren Pfad zu einem DOM-Element angeben, an dem das Widget verankert und instanziiert werden soll. Wenn mehrere Elemente mit demselben Pfad im DOM vorhanden sind, wird es am ersten gefundenen Element verankert. Der bereitgestellte Container sollte Position: relativ haben, da das Widget basierend auf dem ersten gefundenen relativ Elternteil angezeigt wird. z. B.: Anker: "#my-container" / anchor: ".container-class"
onWidgetOpen	Leer	optional	Callback, die nach dem Öffnen des Widgets aufgerufen wird.
onWidgetClose	Leer	optional	Callback, die nach dem Schließen des Widgets aufgerufen wird.

Freigabefähige Tokens sind im Scaling-Plan verfügbar. Lesen Sie mehr über Öffentliche ZugriffskontrollenPublic Access Controls.

Ref-Methoden

Wenn ref nicht an ArchbeeAppWidget übergeben wird, öffnen untergeordnete Elemente automatisch das modale Pop-up, nachdem darauf geklickt wurde.

Eigenschaft	Typ	Beschreibung
offen	Methode	Öffnet das Widget programmatisch.
schließen	Methode	Schließt das Widget programmatisch.
Instanz	Methode	Gibt die Instanz des Widgets zurück.

Have a question?

Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.

To ask a question or participate in discussions, you'll need to authenticate first.

App-Dokumentations-Widget – React

App-Widget integrieren

Komponenten-Props

Ref-Methoden