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

4 min

Ya hemos explicado algunos de los beneficios de la documentación contextual 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.

Instala nuestro paquete npm:

# 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:

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. Lea más sobre Controles de acceso públicoControles de Acceso Público.

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.

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.

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

Integrar widget de la app

Propiedades del componente

Métodos Ref