--- title: Widget de documentación de la aplicación - React slug: docs/es/widget-de-documentacion-de-la-aplicacion-react createdAt: 2023-11-17T14:25:39.130Z --- Ya hemos explicado algunos de los [beneficios sobre la documentación contextual](docId:5cRZhxzhCiVroxucIl1mb) 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. ## Integrar widget de aplicación :::::WorkflowBlock :::WorkflowBlockItem Instale nuestro [paquete npm](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 Cuando el paquete esté instalado, vaya a su archivo `jsx/tsx` e instancie el componente: :::CodeblockTabs React ```typescript import React from 'react'; import { ArchbeeAppWidget, AbWidgetRef } from '@archbee/app-widget' function App() { const widgetRef = useRef(null); return (
{ /** ... **/ }} // callback function called after widget has open onWidgetClose={() => { /** ... **/ }} // callback function called after widget has open >
); } ``` ::: :::: :::WorkflowBlockItem También puede consultar la información desde **Configuraciones del espacio**: 1. Seleccione su **Espacio **dentro del editor. 2. Haga clic en el ícono del engranaje (⚙️) para ingresar a **Configuraciones.** 3. Vaya a **Integración de widget**. 4. 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. | :::hint{type="info"} Los tokens compartibles están disponibles en el [Scaling plan](https://www.archbee.com/pricing). Lea más sobre [Controles de acceso público](docId\:ehXgwae9tjmwinTd8vFqF). ::: ### Métodos Ref :::hint{type="info"} 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. |