--- title: Widget de documentation d’application - React slug: docs/fr/widget-de-documentation-dapplication-react createdAt: 2023-11-17T14:25:39.130Z --- Nous avons déjà expliqué certains des [avantages sur la documentation contextuelle](docId\:HXo6mo-0EDNYgR4J2ZYgZ) 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. ## 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 dans 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 vous référer aux informations depuis les **Paramètres de l’espace** : 1. Sélectionnez votre **Espace **dans l’éditeur. 2. Cliquez sur l’icône d’engrenage (⚙️) pour accéder aux **Paramètres.** 3. Allez dans **Intégration de widget**. 4. 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. | :::hint{type="info"} Les jetons partageables sont disponibles dans le [plan Scaling](https://www.archbee.com/pricing). En savoir plus sur [Contrôles d'accès public](docId\:rcEK0l-DvXdZG7NbnO9Pq). ::: ### Méthodes Ref :::hint{type="info"} 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. |