Widget de documentación de la aplicación - React

ya hemos explicado algunos de los beneficios de la documentación contextual docid\ z lxm9qp9yf2452r 33tz en el capítulo anterior esta guía sirve como una alternativa para react y nextjs para integrar el widget de la app archbee de una manera más elegante integrar widget de la app instala nuestro paquete npm https //www npmjs com/package/@archbee/app widget # with npm $ npm install save @archbee/app widget \# or with yarn $ yarn add @archbee/app widget cuando el paquete esté instalado, ve a tu archivo jsx/tsx e instancia el componente 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> ); } también puedes consultar la información desde configuración del espacio selecciona tu espacio dentro del editor haz clic en el ícono de engranaje (⚙️) para entrar a configuración ve a integración del widget haz clic en la pestaña react y luego en el botón de copiar, y pega el código en tu archivo tsx/ jsx ahora, el widget se encargará de todo detrás de escena no te preocupes, todo está empaquetado y minimizado es una descarga de apenas 56kb y se carga de forma asíncrona, por lo que tus usuarios no notarán la diferencia propiedades del componente property type required description spaceid string required pass the desired id to load your docs docid string optional the doc where you want to open the widget docs if docid is passed, widgettype is ignored, it will open in docs mode regardless of the prop passed shareabletoken string optional pass the shareabletoken from your private links to protect your docs classname string optional pass css classes to the div wrapper widgettype 'docs' | 'search' optional default value is docs this opens the widget with the desired behaviour docs type will open the widget with the default behaviour, search will open a search widget bar that shows a search bar with ai support (if included in your subscription) hidenavbar boolean optional it shows or hides the top navbar from the widget modal by default the navbar is visible if you don't want to see the navbar, pass it with true value, otherwise just skip it loadingstrategy 'eager' | 'lazy' optional default value is lazy loading strategy method for widget loading bubble invisible | ask optional the default value is invisible if set to ask , it will display a bubble in the bottom right of your screen whenever someone clicks on it, the search widget will open bubbleplaceholder string optional the placeholder that will be displayed in the bubble section if not passed, a default value of ask a question will be displayed anchor string optional you can provide your class , id or path to a dom element where you would like the widget to anchor and instantiate it will anchor to the first element found in the dom, if multiple elements with the same path are present the container provided should have position relative as the widget will be displayed based on the first relative parent found e g anchor "#my container" / anchor " container class" onwidgetopen void optional callback that is called after the widget opens onwidgetclose void optional callback that is called after the widget closes los tokens compartibles están disponibles en el plan scaling https //www archbee com/pricing lea más sobre controles de acceso público docid\ ok0zudah9rzs3 bafhfqv métodos ref si ref no se pasa a archbeeappwidget , los hijos abrirán automáticamente la ventana emergente modal al hacer clic propiedad tipo descripción abrir método abre el widget mediante programación cerrar método cierra el widget mediante programación instancia método devuelve la instancia del widget