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 à 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 :
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.
Allez à Intégration du widget.
Cliquez sur le bouton de copie et collez le code dans votre fichier index.html ou dans le code de votre 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 |
Si vous souhaitez qu’une bulle de recherche simple soit toujours présente dans votre application, utilisez la prop bulle : "demander".
É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 :
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 :
const closeAbWidgetAfterSeconds = (miliseconds) => {
setTimeout(() => {
// setTimeout is for demo purposes and it is not required...
window._archbee.push({eventType: "hide-widget"});
}, miliseconds);
}
closeAbWidgetAfterSeconds(5000);