---
title: App documentation widget - React
slug: docs/app-documentation-widget-react
docTags: 
createdAt: 2023-11-17T14:25:39.130Z
---

We have already explained some of the [benefits on Contextual documentation](docId\:UJ-aqN5Ga60vjb9Mkufhf)  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

:::::WorkflowBlock
:::WorkflowBlockItem
Install our [npm package](https://www.npmjs.com/package/@archbee/app-widget):

```shell
# with npm
$ npm install --save @archbee/app-widget

# or with yarn
$ yarn add @archbee/app-widget
```
:::

::::WorkflowBlockItem
When the package is installed, go to your `jsx/tsx` file and instantiate the component:

:::CodeblockTabs
React

```typescript
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>
  );
}
```
:::
::::

:::WorkflowBlockItem
You can also reference the info from **Space settings**:

1. Select your **Space&#x20;**&#x69;nside the editor.
2. Click on the gear icon (⚙️) to get into **Settings.**
3. Go to **Widget integration**.
4. 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.<br />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.                                                                                                                                                                                                                                                                                                                                                                                                  |

:::hint{type="info"}
Shareable tokens are available in the [Scaling plan](https://www.archbee.com/pricing). Read more about [Public Access Controls](docId\:w7VFvxPMFYSPdg0xnzlK1).
:::

### Ref methods

:::hint{type="info"}
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. |