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

4 min

Ya hemos explicado algunos de los beneficios sobre la documentación contextual en el capítulo anterior. Esta guía sirve como una alternativa para aplicaciones de React y NextJS para integrar el widget de la aplicación Archbee de una manera más elegante.

Instale nuestro paquete npm:

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

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

Cuando el paquete esté instalado, vaya a su archivo jsx/tsx e instancie 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 puede consultar la información desde Configuraciones del espacio:

Seleccione su Espacio dentro del editor.
Haga clic en el ícono del engranaje (⚙️) para ingresar a Configuraciones.
Vaya a Integración de widget.
Haga clic en la pestaña React y luego en el botón copiar, y pegue el código en su archivo tsx/.jsx.

Ahora, el widget manejará todo detrás de escena. No se preocupe, todo está empaquetado y minimizado. Es una simple descarga de 56Kb y se carga de forma asíncrona, por lo que sus usuarios no notarán la diferencia.

Props del componente

Propiedad	Tipo	Requerido	Descripción
spaceId	cadena	requerido	Pase el id deseado para cargar sus documentos.
docId	cadena	opcional	El documento donde desea abrir los documentos del widget. Si docId es pasado, widgetType se ignora; se abrirá en modo documentos independientemente de la propiedad pasada.
shareableToken	cadena	opcional	Pase el shareableToken desde sus enlaces privados para proteger sus documentos.
className	cadena	opcional	Pase clases CSS al contenedor div.
widgetType	'docs' \| 'Buscar'	opcional	El valor predeterminado es documentos. Esto abre el widget con el comportamiento deseado. El tipo documentos abrirá el widget con el comportamiento predeterminado; Buscar abrirá una barra de búsqueda que muestra una barra con soporte de IA (si está incluido en su suscripción).
ocultarBarraDeNavegación	booleano	opcional	Muestra u oculta la barra de navegación superior del modal del widget. De forma predeterminada, la barra de navegación es visible. Si no desea verla, pásela con el valor verdadero, de lo contrario simplemente omítala.
loadingStrategy	'ansioso' \| 'perezoso'	opcional	El valor predeterminado es perezoso. Método de estrategia de carga para la carga del widget.
burbuja	invisible \| preguntar	opcional	El valor predeterminado es invisible. Si se establece en preguntar, se mostrará una burbuja en la parte inferior derecha de su pantalla. Cada vez que alguien haga clic en ella, el widget de búsqueda se abrirá.
bubblePlaceholder	cadena	opcional	El texto placeholder que se mostrará en la sección de la burbuja. Si no se proporciona, se mostrará un valor predeterminado de Haz una pregunta.
ancla	cadena	opcional	Puede proporcionar su clase, id o camino a un elemento del DOM donde desea que el widget se ancle e instancie. Se anclará al primer elemento encontrado en el DOM si hay múltiples elementos con la misma ruta. El contenedor proporcionado debe tener position: relative ya que el widget se mostrará basado en el primer relativo padre encontrado. p. ej.: anchor: "#my-container" / anchor: ".container-class"
onWidgetOpen	vacío	opcional	Callback que se ejecuta después de que el widget se abre.
onWidgetClose	vacío	opcional	Callback que se ejecuta después de que el widget se cierra.

Los tokens compartibles están disponibles en el Scaling plan. Lea más sobre Controles de acceso públicoControles de Acceso Público.

Métodos Ref

Si ref no se pasa a ArchbeeAppWidget, los elementos secundarios abrirán automáticamente la ventana modal al hacer clic.

Propiedad	Tipo	Descripción
abierto	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 aplicación

Props del componente

Métodos Ref