Widget de documentation d’application - React

4 min

Nous avons déjà expliqué certains des avantages sur la documentation contextuelle dans le chapitre précédent. Ce guide sert d’alternative pour les applications React et NextJS afin d’intégrer le widget Archbee de manière plus élégante.

Installez notre package npm :

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

# or with yarn
$ yarn add @archbee/app-widget

Lorsque le package est installé, allez dans votre fichier jsx/tsx et instanciez le composant :

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>
  );
}

Vous pouvez également vous référer aux informations depuis les Paramètres de l’espace :

Sélectionnez votre Espace dans l’éditeur.
Cliquez sur l’icône d’engrenage (⚙️) pour accéder aux Paramètres.
Allez dans Intégration de widget.
Cliquez sur l’onglet React puis sur le bouton Copier, et collez le code dans votre fichier tsx/.jsx.

Désormais, le widget gérera tout en arrière-plan. Ne vous inquiétez pas, tout est empaqueté et minifié. Il ne s’agit que d’un téléchargement de 56 Kb et il se charge de manière asynchrone, de sorte que vos utilisateurs ne remarqueront aucune différence.

Props du composant

Propriété	Type	Requis	Description
spaceId	chaîne	requis	Transmettez l’id souhaité pour charger vos docs.
docId	chaîne	optionnel	Le doc où vous souhaitez ouvrir les widget docs. Si docId est transmis, widgetType est ignoré, il s’ouvrira en mode documents quel que soit l’attribut transmis.
shareableToken	chaîne	optionnel	Transmettez le shareableToken depuis vos liens privés pour protéger vos docs.
className	chaîne	optionnel	Transmet des classes CSS à l’enveloppe div.
widgetType	'docs' \| 'search'	optionnel	La valeur par défaut est documents. Cela ouvre le widget avec le comportement souhaité. Le type documents ouvrira le widget avec le comportement par défaut, recherche ouvrira une barre de recherche affichant une barre de recherche avec prise en charge de l’IA (si incluse dans votre abonnement).
hideNavbar	booléen	optionnel	Affiche ou masque la barre de navigation supérieure dans la fenêtre modale du widget. Par défaut, la barre de navigation est visible. Si vous ne souhaitez pas voir la barre de navigation, transmettez-la avec la valeur vrai, sinon ignorez simplement ce paramètre.
loadingStrategy	'impatient' \| 'paresseux'	optionnel	La valeur par défaut est paresseux. Méthode de stratégie de chargement pour le chargement du widget.
bulle	invisible \| demander	optionnel	La valeur par défaut est invisible. Si défini à demander, une bulle s’affichera en bas à droite de votre écran. Chaque fois que quelqu’un clique dessus, le widget de recherche s’ouvrira.
bubblePlaceholder	chaîne	optionnel	Le placeholder qui sera affiché dans la section de la bulle. Si non fourni, une valeur par défaut de Poser une question sera affichée.
ancre	chaîne	optionnel	Vous pouvez fournir votre classe, id ou chemin vers un élément DOM où vous souhaitez ancrer et instancier le widget. Il s’ancrera au premier élément trouvé dans le DOM si plusieurs éléments avec le même chemin sont présents. Le conteneur fourni doit avoir position: relative car le widget sera affiché en fonction du premier relatif parent trouvé. p. ex. : anchor: "#my-container" / anchor: ".container-class"
onWidgetOpen	vide	optionnel	Callback appelé après l’ouverture du widget.
onWidgetClose	vide	optionnel	Callback appelé après la fermeture du widget.

Les jetons partageables sont disponibles dans le plan Scaling. En savoir plus sur Contrôles d'accès publicContrôles d’accès publics.

Méthodes Ref

Si ref n’est pas passé à ArchbeeAppWidget, les enfants ouvriront automatiquement la fenêtre modale après avoir été cliqués.

Propriété	Type	Description
ouvert	méthode	Ouvre le widget par programmation.
fermer	méthode	Ferme le widget par programmation.
instance	méthode	Retourne l’instance du widget.

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.

Widget de documentation d’application - React

Intégrer le widget d’application

Props du composant

Méthodes Ref