Widget de documentation d’application
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 :
Comment implémenter le widget
Pour intégrer le widget, suivez ces étapes :
Sélectionnez votre Espace dans l’éditeur.
Cliquez sur l’icône d’engrenage (⚙️) pour accéder aux Paramètres.
Accédez à Intégration de widget.
Cliquez sur le bouton de copie, puis collez le code dans votre fichier index.html, ou dans le code de votre 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 |
Si vous souhaitez qu’une bulle de recherche simple soit toujours présente dans votre application, utilisez la propriété bubble: "demander".
É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 :
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 :
const closeAbWidgetAfterSeconds = (miliseconds) => {
setTimeout(() => {
// setTimeout is for demo purposes and it is not required...
window._archbee.push({eventType: "hide-widget"});
}, miliseconds);
}
closeAbWidgetAfterSeconds(5000);