--- title: Widget de documentation d’application slug: docs/fr/widget-de-documentation-dapplication description: Découvrez comment intégrer un widget de documentation contextuelle à votre produit, permettant aux utilisateurs d’accéder à la documentation sans quitter l’application. Ce document fournit des instructions étape par étape pour choisir un espace, accéder a createdAt: 2022-01-03T10:17:23.000Z --- La documentation contextuelle est intégrée dans votre produit à l’endroit où l’utilisateur en a le plus besoin. Le widget de documentation contextuelle aide les utilisateurs à lire la documentation sans avoir besoin de parcourir le portail du guide utilisateur dans une autre fenêtre. Vous pouvez charger des articles spécifiques ou l’ensemble du portail du guide utilisateur, ce qui est indispensable pour les entreprises qui souhaitent augmenter l’adoption et la rétention du produit. Tout ce que vous devez faire est d’intégrer le code HTML généré sous **Paramètres de l’espace** -> **Intégration de widget**. # Fonctionnement du widget Découvrez la vidéo ci-dessous montrant le widget en action : ::embed[]{url="https://www.youtube.com/watch?v=aVFVe7wUdWA"} # Comment implémenter le widget Pour intégrer le widget, suivez ces étapes : ::::WorkflowBlock :::WorkflowBlockItem Sélectionnez votre **Espace **dans l’éditeur. ::: :::WorkflowBlockItem Cliquez sur l’icône d’engrenage (⚙️) pour accéder aux **Paramètres.** ::: :::WorkflowBlockItem Accédez à **Intégration de widget.** ::: :::WorkflowBlockItem Cliquez sur le bouton de copie, puis collez le code dans votre fichier `index.html`, ou dans le code de votre application. ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/1ODCzS1Qe9uLsuiEUilLN_widget-light.png "Copier le code du widget de l’application") Désormais, le widget gérera tout en arrière-plan. Ne vous inquiétez pas, tout est regroupé et minimisé. C’est un simple téléchargement de 56 Kb et il se charge de manière asynchrone, donc vos utilisateurs ne remarqueront aucune différence. ## Événement init Dans l’événement `init`, pour la valeur `spaceId`, vous pouvez utiliser `spaceId` ou `PUBLIÉ-{spaceId}`. De cette manière, vous pouvez utiliser des Spaces sans les publier, directement dans votre application. Utilisez `PREVIEW-{spaceId}` lorsque vous souhaitez uniquement publier un Space en Preview et non sur votre domaine. | **Propriété** | Type | **Description** | **Requis** | | ------------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `spaceId` | `chaîne` | Passez l’id souhaité pour charger vos documents. | `requis` | | `jwt` | `chaîne` | Passez le jeton jwt afin de voir les documents protégés par jwt. | `optionnel` | | `jeton partageable` | `chaîne` | Passez le shareableToken depuis vos liens privés pour protéger vos documents. | `optionnel` | | `widgetType` | `'docs' \| 'search'` | 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). | `optionnel` | | `hideNavbar` | `booléen` | 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 la voir, passez la valeur `vrai`, sinon ignorez simplement ce paramètre. | | | `loadingStrategy` | `paresseux` \| `impatient` | La valeur par défaut est `paresseux`. Alors que le chargement `paresseux` retarde l’initialisation d’une ressource, `impatient` initialise ou charge le widget dès que le code est exécuté. | `optionnel` | | `bulle` | `invisible` \| `demander` | La valeur par défaut est `invisible`. Si elle est définie sur `demander` elle affichera une bulle en bas à droite de votre écran. Chaque fois que quelqu’un clique dessus, le widget de recherche s’ouvrira. | `optionnel` | | `bubblePlaceholder` | `chaîne` | Le texte indicatif qui sera affiché dans la section de la bulle. S’il n’est pas fourni, une valeur par défaut (« `Poser une question` ») sera affichée. | `optionnel` | | `ancre` | `chaîne` | Vous pouvez fournir votre `classe`, `identifiant` ou `chemin` vers un élément du DOM où vous souhaitez que le widget s’ancre et s’instancie. 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 **parent** **parent** trouvé. p. ex. : `anchor: "#my-container"` / `anchor: ".container-class"` | `optionnel` | :::hint{type="info"} Si vous souhaitez qu’une bulle de recherche simple soit toujours présente dans votre application, utilisez la propriété `bubble: "demander"`. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/e6ZB7rUpuw2yLZ7pmrQ-2_ask-widget-light.png) ::: ## Événement d’affichage du widget `show-widget` déclenche l’action permettant d’afficher le widget. Il possède également une propriété *facultative* que vous pouvez transmettre pour ouvrir un document spécifique depuis vos Spaces initialisés. | **Propriété** | **Description** | **Obligatoire** | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | | `docId` | Définit la valeur de l’identifiant du document afin d’ouvrir un document spécifique. Si `docId` est transmis, `widgetType` est ignoré et le document s’ouvrira en mode `documents` quel que soit le paramètre passé.
**Remarque :** Vous devez ajouter le mot PUBLISHED devant le docId sous la forme `Publié-docId` ou `PREVIEW-spaceId` ; sinon, le widget ouvrira le document en mode édition, qui pourrait contenir des modifications non publiées. | `facultatif` | | `blockId` | Définit un identifiant de bloc afin de faire défiler jusqu’à la section souhaitée dans ce document. | `facultatif` | ## Événements pris en charge Voici une brève description de notre **API d’événements de widget** : | **Nom de l’événement** | **Description** | **Obligatoire** | | ---------------------- | ------------------------------------------------------------------------------------------ | --------------- | | `init` | Cet événement aide le widget Archbee à charger les fichiers requis dans votre application. | `obligatoire` | | `show-widget` | Cet événement affiche le widget à la demande. | `obligatoire` | | `masquer-widget` | Cet événement masque le widget si les mécanismes intégrés ne suffisent pas. | `facultatif` | ## Exemples de code Ajoutez une fonction à l’endroit où vous souhaitez afficher le widget sur votre site, comme ceci : ```javascript const openAbWidget = () => { window._archbee.push({ eventType: "show-widget", // optional, only for loading a specific doc // and scroll to section // docId: `PUBLISHED-${docId}`, // blockId: "TBMm9" }); } ``` Cela chargera le widget avec les documents Space souhaités et les utilisateurs pourront tout consulter directement depuis votre application. Si vous souhaitez charger uniquement un document spécifique, transmettez simplement ``docId: `${docId}` `` à notre objet initial comme dans l’exemple ci-dessus. Vous n’avez pas besoin de la fonction `closeWidget`, puisque le widget se fermera automatiquement si vous appuyez sur `Échap` ou cliquez à l’extérieur. Cependant, si vous souhaitez fermer le widget par programmation et ne pas compter sur les mécanismes de fermeture intégrés, vous pouvez utiliser l’événement `masquer-widget` de cette manière : ```javascript const closeAbWidgetAfterSeconds = (miliseconds) => { setTimeout(() => { // setTimeout is for demo purposes and it is not required... window._archbee.push({eventType: "hide-widget"}); }, miliseconds); } closeAbWidgetAfterSeconds(5000); ```