--- title: Widget de documentación de la aplicación slug: docs/es/widget-de-documentacion-de-la-aplicacion description: Aprende cómo integrar un widget de documentación contextual en tu producto, permitiendo que los usuarios accedan a la documentación sin salir de la aplicación. Este documento proporciona instrucciones paso a paso para seleccionar un espacio, acceder a las createdAt: 2022-01-03T10:17:23.000Z --- La documentación contextual se incrusta dentro de su producto, donde el usuario más lo necesita. El widget de documentación contextual ayuda a los usuarios a leer la documentación sin necesidad de navegar por el portal de la guía del usuario en otra ventana. Puede cargar artículos específicos o todo el portal de la guía del usuario, lo cual es imprescindible para las empresas que desean aumentar la adopción y retención del producto. Todo lo que debe hacer es incrustar el código HTML generado en **Configuraciones del espacio** -> **Integración de widget**. # Cómo funciona el widget Vea el video a continuación que muestra el widget en acción: ::embed[]{url="https://www.youtube.com/watch?v=aVFVe7wUdWA"} # Cómo implementar el widget Para integrar el widget, siga estos pasos: ::::WorkflowBlock :::WorkflowBlockItem Seleccione su **Espacio **dentro del editor. ::: :::WorkflowBlockItem Haga clic en el ícono de engranaje (⚙️) para acceder a **Configuraciones.** ::: :::WorkflowBlockItem Vaya a **Integración de widget.** ::: :::WorkflowBlockItem Haga clic en el botón de copiar y pegue el código en su archivo `index.html` o en el código de su aplicación. ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/1ODCzS1Qe9uLsuiEUilLN_widget-light.png "Copiar código del widget de la aplicación") Ahora, el widget gestionará todo detrás de escena. No se preocupe, todo está empaquetado y minimizado. Son solo 56 Kb de descarga y se carga de forma asíncrona, por lo que sus usuarios no notarán la diferencia. ## Evento init En el evento `init`, para el valor `spaceId`, puede usar `spaceId` o `PUBLISHED-{spaceId}`. De este modo puede usar Spaces sin publicarlos, directamente en su aplicación. Use `VISTA PREVIA-{spaceId}` cuando solo quiera publicar un Space en Preview y no en su dominio. | **Propiedad** | Tipo | **Descripción** | **Requerido** | | ------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | | `spaceId` | `cadena` | Pase el id deseado para cargar sus documentos. | `requerido` | | `jwt` | `cadena` | Pase el token jwt para ver documentos protegidos con jwt. | `opcional` | | `shareableToken` | `cadena` | Pase el shareableToken desde sus enlaces privados para proteger sus documentos. | `opcional` | | `tipoDeWidget` | `'docs' \| 'Buscar'` | 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 widget de búsqueda que muestra una barra de búsqueda con soporte de IA (si está incluido en su suscripción). | `opcional` | | `hideNavbar` | `booleano` | 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 ver la barra de navegación, pásela con el valor `verdadero`; de lo contrario, simplemente omítala. | | | `loadingStrategy` | `perezoso` \| `ansioso` | El valor predeterminado es `perezoso`. Mientras la carga `perezoso` retrasa la inicialización de un recurso, la carga `ansioso` inicializa o carga el widget tan pronto como se ejecuta el código. | `opcional` | | `burbuja` | `invisible` \| `preguntar` | El valor predeterminado es `invisible`. Si se establece en `preguntar` mostrará una burbuja en la esquina inferior derecha de su pantalla. Cada vez que alguien haga clic en ella, el widget de búsqueda se abrirá. | `opcional` | | `bubblePlaceholder` | `cadena` | El marcador de posición que se mostrará en la sección de la burbuja. Si no se proporciona, se mostrará un valor predeterminado de `Haz una pregunta`. | `opcional` | | `ancla` | `cadena` | Puede proporcionar su `clase`, `id` o `camino` a un elemento 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á en función del primer **pariente** **padre** encontrado. por ejemplo: `ancla: "#my-container"` / `anchor: ".container-class"` | `opcional` | :::hint{type="info"} Si desea que una burbuja de búsqueda simple esté siempre presente en su aplicación, use la propiedad `bubble: "preguntar"`. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/e6ZB7rUpuw2yLZ7pmrQ-2_ask-widget-light.png) ::: ## Mostrar evento del widget `Mostrar-widget` desencadena la acción para mostrar el widget. También tiene una propiedad *opcional* que usted puede pasar para abrir un documento específico desde sus Spaces inicializados. | **Propiedad** | **Descripción** | **Requerido** | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | | `docId` | Establece el valor de doc id para abrir un documento específico. Si se pasa `docId`, `tipoDeWidget` se ignora, se abrirá en modo `documentos` independientemente de la propiedad pasada.
**Nota:** Debe agregar la palabra PUBLISHED delante del docId como `PUBLISHED-docId` o `PREVIEW-spaceId`; de lo contrario, el widget abrirá el documento desde el modo de edición, que podría tener cambios no publicados. | `opcional` | | `blockId` | Establece un block id específico, para desplazarse a la sección deseada en ese documento. | `opcional` | ## Eventos compatibles Aquí hay una breve descripción de nuestra **API de evento de widget**: | **Nombre del evento** | **Descripción** | **Requerido** | | --------------------- | ------------------------------------------------------------------------------------------ | ------------- | | `init` | Este evento ayuda al widget de Archbee a iniciar los archivos requeridos en su aplicación. | `requerido` | | `Mostrar-widget` | Este evento muestra el widget bajo demanda. | `requerido` | | `ocultar-widget` | Este evento oculta el widget si las mecánicas incorporadas no son suficientes. | `opcional` | ## Ejemplos de código Agregue una función donde quiera mostrar el widget en su sitio, como esta: ```javascript const openAbWidget = () => { window._archbee.push({ eventType: "show-widget", // optional, only for loading a specific doc // and scroll to section // docId: `PUBLISHED-${docId}`, // blockId: "TBMm9" }); } ``` Esto cargará el widget, con los Space docs deseados y los usuarios podrán ver todo directamente desde su aplicación. Si desea cargar solo un documento específico, simplemente pase ``docId: `${docId}` `` a nuestro objeto inicial como en el ejemplo anterior. No necesita la función `closeWidget`, ya que el widget se cerrará automáticamente si presiona `Esc` o hace clic fuera de él. Sin embargo, si usted desea cerrar el widget programáticamente y no depender de la mecánica de cierre incorporada, puede usar `ocultar-widget` como tipo de evento de esta manera: ```javascript const closeAbWidgetAfterSeconds = (miliseconds) => { setTimeout(() => { // setTimeout is for demo purposes and it is not required... window._archbee.push({eventType: "hide-widget"}); }, miliseconds); } closeAbWidgetAfterSeconds(5000); ```