Widget de documentación de la aplicación
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:
Cómo implementar el widget
Para integrar el widget, siga estos pasos:
Seleccione su Espacio dentro del editor.
Haga clic en el ícono de engranaje (⚙️) para acceder a Configuraciones.
Vaya a Integración de widget.
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.
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 |
Si desea que una burbuja de búsqueda simple esté siempre presente en su aplicación, use la propiedad bubble: "preguntar".
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:
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:
const closeAbWidgetAfterSeconds = (miliseconds) => {
setTimeout(() => {
// setTimeout is for demo purposes and it is not required...
window._archbee.push({eventType: "hide-widget"});
}, miliseconds);
}
closeAbWidgetAfterSeconds(5000);