App documentation widget - React

we have already explained some of the benefits on contextual documentation in the previous chapter this guide serves as an alternative for react and nextjs apps to integrate the archbee app widget in a more elegant way integrate app widget install our npm package # with npm $ npm install save @archbee/app widget \# or with yarn $ yarn add @archbee/app widget when the package is installed, go to your jsx/tsx file and instantiate the component 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> ); } you can also reference the info from space settings select your space inside the editor click on the gear icon (⚙️) to get into settings go to widget integration click the react tab and then on the copy button, and paste the code into your tsx/ jsx file now, the widget will handle everything behind the scenes don't worry, everything is bundled and minified it's a mere 56kb download and it loads asynchronously, so your users won't feel a difference component props 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 shareable tokens are available in the scaling plan read more about public access controls docid\ w7vfvxpmfyspdg0xnzlk1 ref methods if ref is not passed to archbeeappwidget , children will automatically open the modal pop up upon after being clicked property type description open method opens widget programmatically close method closes widget programmatically instance method returns the instance of the widget