HOSTED SPACES

App documentation widget - React

4min

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
1
Install our npm package:
Shell
# with npm
$ npm install --save @archbee/app-widget

# or with yarn
$ yarn add @archbee/app-widget
# with npm
$ npm install --save @archbee/app-widget

# or with yarn
$ yarn add @archbee/app-widget
﻿
2
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>
  );
}
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>
  );
}
﻿
3
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﻿.
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.
﻿

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.

Property	Type	Description
open	method	Opens widget programmatically.
close	method	Closes widget programmatically.
instance	method	Returns the instance of the widget.

🤔

Have a question?

Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.

To ask a question or participate in discussions, you'll need to authenticate first.

﻿

Updated 08 Nov 2024

Did this page help you?

App documentation widget

Insights