Widget de documentation d'application - React

4 min

Nous avons déjà expliqué certains des avantages sur Contextual documentation dans le chapitre précédent. Ce guide sert d’alternative pour les apps React et NextJS afin d’intégrer le widget d’application 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 à 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 consulter les informations dans Paramètres de l'espace :

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

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

Props du composant

Propriété	Type	Obligatoire	Description
spaceId	chaîne	obligatoire	Passez l’identifiant 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	Passez le shareableToken de vos liens privés pour protéger vos docs.
className	chaîne	optionnel	Passez des classes CSS à l’enveloppe div.
widgetType	'docs' \| 'recherche'	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 qui affiche une barre de recherche avec prise en charge AI (si elle est incluse dans votre abonnement).
hideNavbar	booléen	optionnel	Affiche ou masque la barre de navigation supérieure du widget modal. 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 sautez simplement cet attribut.
loadingStrategy	'eager' \| 'lazy'	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 dans le coin inférieur droit 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. S’il n’est pas transmis, une valeur par défaut de Posez une question sera affichée.
ancre	chaîne	optionnel	Vous pouvez fournir votre classe, id ou path vers un élément DOM où vous souhaitez que le widget s’ancre et s’instancie. Il s’ancra sur le premier élément trouvé dans le DOM si plusieurs éléments avec le même path sont présents. Le conteneur fourni doit avoir position: relative puisque le widget sera affiché en fonction du premier parent relative trouvé. p. ex. : anchor: "#my-container" / ancre : ".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. Lisez plus sur Contrôles d’accès publicContrôles d’accès publics.

Méthodes Ref

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

Propriété	Type	Description
ouvrir	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