App-Dokumentations-Widget - React

4 min

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

Installieren Sie unser npm-Paket:

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

# or with 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={ /** published space id **/ }
            onWidgetOpen={() => { /** ... **/ }} // callback function called after widget has open
            onWidgetClose={() => { /** ... **/ }} // callback function called after widget has open
      >
        <button type='button' onClick={() => {
        <!-- Opens widget -->
            widgetRef.current?.open();
        }}>
          Open
        </button>
        
        <button type='button' onClick={() => {
        <!-- Closes widget -->
            widgetRef.current?.close();
        }}>
          Close
        </button>
        
        <button type='button' onClick={() => {
        <!-- Gets the instance of the widget if needed for various event manipulations. -->
            widgetRef.current?.instance();
        }}>
          Get widget instance
        </button>
      </ArchbeeAppWidget>
    </div>
  );
}

Sie können die Informationen auch aus den Space Einstellungen entnehmen:

Wählen Sie Ihren Weltraum im Editor aus.
Klicken Sie auf das Zahnrad-Symbol (⚙️), um zu den Einstellungen zu gelangen.
Gehen Sie zu Widget-Integration.
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.

Freigabefähige Tokens sind im Scaling-Plan verfügbar. Lesen Sie mehr über Kontrollen für öffentlichen ZugriffÖffentliche Zugriffskontrollen.

Ref-Methoden

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.

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