--- title: Widget de documentation d'application slug: 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 docTags: 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 à parcourir le portail du guide d’utilisation dans une autre fenêtre. Vous pouvez charger des articles spécifiques ou l’intégralité du portail du guide d’utilisation, ce qui est essentiel 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 Visionnez 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 Allez à **Intégration du widget.** ::: :::WorkflowBlockItem Cliquez sur le bouton de copie et 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") Le widget gérera maintenant tout en arrière-plan. Ne vous inquiétez pas, tout est groupé et minimisé. Ce n’est qu’un téléchargement de 56 Kb et il se charge de façon 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 façon, vous pouvez utiliser des Spaces sans les publier, directement dans votre application. Utilisez `Aperçu-{spaceId}` lorsque vous souhaitez uniquement publier un Space en Preview et non sur votre domaine. | **Propriété** | Type | **Description** | **Obligatoire** | | ------------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | | `spaceId` | `chaîne` | Transmettez l’identifiant souhaité pour charger vos documents. | `obligatoire` | | `jwt` | `chaîne` | Transmettez le jeton jwt afin de voir les documents protégés par jwt. | `optionnel` | | `shareableToken` | `chaîne` | Transmettez le shareableToken provenant de 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 qui affiche une barre de recherche avec un support IA (si inclus dans votre abonnement). | `optionnel` | | `hideNavbar` | `boolean` | Cela affiche ou masque la barre de navigation supérieure du modal 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 omettez-la simplement. | | | `loadingStrategy` | `paresseux` \| `impatient` | La valeur par défaut est `paresseux`. Alors que le chargement `paresseux` retarde l’initialisation d’une ressource, le chargement `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 à `demander` cela affichera une bulle dans le coin inférieur droit de votre écran. Chaque fois que quelqu’un clique dessus, le widget de recherche s’ouvrira. | `facultatif` | | `bubblePlaceholder` | `chaîne` | Le texte indicatif qui sera affiché dans la section de la bulle. Si aucun texte n’est fourni, la valeur par défaut `Poser une question` sera affichée. | `facultatif` | | `ancre` | `chaîne` | 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 path sont présents. Le conteneur fourni doit avoir `position: relative` puisque le widget sera affiché en fonction du premier **relatif** **parent** trouvé. p. ex. : `anchor: "#my-container"` / `anchor: ".container-class"` | `facultatif` | :::hint{type="info"} Si vous souhaitez qu’une bulle de recherche simple soit toujours présente dans votre application, utilisez la prop `bulle : "demander"`. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/e6ZB7rUpuw2yLZ7pmrQ-2_ask-widget-light.png) ::: ## Événement d’affichage du widget `afficher le widget` déclenche l’action permettant d’afficher le widget. Il comporte également une propriété *optionnelle* que vous pouvez transmettre pour ouvrir un document précis à partir de vos Spaces initialisés. | **Propriété** | **Description** | **Requise** | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | | `docId` | Définissez la valeur doc id afin d’ouvrir un document précis. Si `docId` est transmis, `widgetType` est ignoré et le widget s’ouvrira en mode `documents` indépendamment de la prop transmise.
**Remarque :** Vous devez ajouter le mot PUBLISHED devant le docId sous la forme `PUBLISHED-docId` ou `PREVIEW-spaceId`; sinon, le widget ouvrira le document en mode édition, lequel pourrait contenir des modifications non publiées. | `optionnelle` | | `blockId` | Définissez un certain block id afin de faire défiler jusqu’à la section souhaitée dans ce document. | `optionnelle` | ## Événements pris en charge Voici une brève description de notre **API d’événements de widget** : | **Nom de l’événement** | **Description** | **Requis** | | ---------------------- | ------------------------------------------------------------------------------------------ | ----------- | | `init` | Cet événement aide le widget Archbee à amorcer les fichiers requis dans votre application. | `requis` | | `afficher le widget` | Cet événement affiche le widget à la demande. | `requis` | | `hide-widget` | Cet événement masque le widget si les mécanismes intégrés ne suffisent pas. | `optionnel` | ## 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 Space docs souhaités et les utilisateurs pourront tout voir directement à partir de votre application. Si vous souhaitez charger seulement un document précis, 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 vous fier aux mécanismes de fermeture intégrés, vous pouvez utiliser l’événement `hide-widget` de cette façon : ```javascript const closeAbWidgetAfterSeconds = (miliseconds) => { setTimeout(() => { // setTimeout is for demo purposes and it is not required... window._archbee.push({eventType: "hide-widget"}); }, miliseconds); } closeAbWidgetAfterSeconds(5000); ```