Widget de documentation d'application - React

nous avons déjà expliqué certains des docid\ vfhsqcd3wxjdd8uerz1ge dans le chapitre précédent ce guide sert d'alternative pour react et nextjs applications pour intégrer le widget de l'application archbee de manière plus élégante intégrer le widget de l'application installez notre https //www npmjs com/package/@archbee/app widget # with npm $ npm install save @archbee/app widget \# or with yarn $ yarn add @archbee/app widget lorsque le package est installé, allez dans votre jsx/tsx fichier et instanciez le composant react import react from 'react'; import { archbeeappwidget, abwidgetref } from '@archbee/app widget' function app() { const widgetref = useref\<abwidgetref>(null); return ( \<div> \<archbeeappwidget ref={widgetref} spaceid={ / published space id / } onwidgetopen={() => { / / }} // callback function called after widget has open onwidgetclose={() => { / / }} // callback function called after widget has open \> \<button type='button' onclick={() => { \<! opens widget > widgetref current? open(); }}> open \</button> \<button type='button' onclick={() => { \<! closes widget > widgetref current? close(); }}> close \</button> \<button type='button' onclick={() => { \<! gets the instance of the widget if needed for various event manipulations > widgetref current? instance(); }}> get widget instance \</button> \</archbeeappwidget> \</div> ); } vous pouvez également vous référer aux informations de paramètres de l'espace sélectionnez votre espace dans l'éditeur cliquez sur l'icône de l'engrenage (⚙️) pour accéder à paramètres allez à intégration de widget cliquez sur le react onglet puis sur le bouton de copie, et collez le code dans votre tsx/ jsx fichier maintenant, le widget s'occupera de tout en coulisses ne vous inquiétez pas, tout est regroupé et minifié c'est un téléchargement de seulement 56 ko et il se charge de manière asynchrone, donc vos utilisateurs ne sentiront aucune différence propriétés du composant propriété type requis description identifiantespace chaîne requis passez l'identifiant souhaité pour charger vos documents iddoc chaîne optionnel le document où vous souhaitez ouvrir les documents du widget si docid est passé, widgettype est ignoré, il s'ouvrira en docs mode indépendamment de la propriété passée jeton partageable chaîne optionnel passez le shareabletoken de vos liens privés pour protéger vos documents nomdeclasse chaîne optionnel passez des classes css au div wrapper typedewidget 'docs' | 'recherche' optionnel la valeur par défaut est docs cela ouvre le widget avec le comportement souhaité docs le type ouvrira le widget avec le comportement par défaut, recherche ouvrira une barre de widget de recherche qui affiche une barre de recherche avec support ai (si inclus dans votre abonnement) cacherbarredenavigation booléen optionnel il montre ou cache la barre de navigation supérieure du modal du widget par défaut, la barre de navigation est visible si vous ne voulez pas voir la barre de navigation, passez la avec vrai valeur, sinon il suffit de l'ignorer stratégiedechargement 'avide' | 'paresseux' optionnel la valeur par défaut est paresseux méthode de stratégie de chargement pour le chargement des widgets bulle invisible | demander optionnel la valeur par défaut est invisible si défini sur demander , cela affichera une bulle en bas à droite de votre écran chaque fois que quelqu'un clique dessus, le widget de recherche s'ouvrira espaceréservé chaîne optionnel le texte de remplacement qui sera affiché dans la section de bulle s'il n'est pas passé, une valeur par défaut de posez une question sera affiché ancre chaîne optionnel vous pouvez fournir votre classe , id ou chemin vers un élément dom où vous souhaitez que le widget soit ancré et instancié 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é e g ancre "#mon conteneur" / ancre " classe conteneur" surouverturewidget vide optionnel rappel qui est appelé après l'ouverture du widget surfermeturewidget vide optionnel callback qui est appelé après la fermeture du widget les jetons partageables sont disponibles dans le https //www archbee com/pricing lisez en plus sur docid\ b0x5lhw64ogwtgz9jqt j méthodes de référence 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 ouvrir méthode ouvre le widget par programmation fermer méthode ferme le widget par programmation instance méthode renvoie l'instance du widget