--- title: Widget de documentation d'application - React slug: widget-de-documentation-dapplication-react docTags: createdAt: 2023-11-17T14:25:39.130Z --- Nous avons déjà expliqué certains des [avantages sur Contextual documentation](docId\:Qv8FPB6pUGctSA1lDf2IG) 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. ## Intégrer le widget d’application :::::WorkflowBlock :::WorkflowBlockItem Installez notre [package npm](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 Lorsque le package est installé, allez à votre fichier `jsx/tsx` et instanciez le composant : :::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 Vous pouvez également consulter les informations dans **Paramètres de l'espace** : 1. Sélectionnez votre **Espace **dans l’éditeur. 2. Cliquez sur l’icône d’engrenage (⚙️) pour accéder à **Paramètres.** 3. Allez à **Intégration de widgets**. 4. 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. | :::hint{type="info"} Les jetons partageables sont disponibles dans le [plan Scaling](https://www.archbee.com/pricing). Lisez plus sur [Contrôles d’accès public](docId:8J6DjoIFXpjGKybANdgq_). ::: ### Méthodes Ref :::hint{type="info"} 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. |