App documentation widget
La documentación contextual está integrada en tu producto donde el usuario más la necesita. El widget de documentos contextuales 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.
Puedes cargar artículos específicos o todo el portal de la guía del usuario, lo cual es indispensable para las empresas que desean aumentar la adopción y retención del producto.
Todo lo que necesitas hacer es incrustar el código HTML generado en Configuración del espacio -> Integración del widget.
Cómo funciona el widget
Consulta el video a continuación que muestra el widget en acción:
Cómo implementar el widget
Para integrar el widget, sigue estos pasos:
Selecciona tu Espacio dentro del editor.
Haz clic en el ícono de engranaje (⚙️) para entrar a Configuración.
Ve a Integración de widget.
Haz clic en el botón de copiar y pega el código en tu index.html o en el código de tu aplicación.
Ahora, el widget manejará todo detrás de escena. No te preocupes, todo está empaquetado y minimizado. Es una descarga de solo 56Kb y se carga de manera asíncrona, por lo que tus usuarios no notarán ninguna diferencia.
Evento de inicialización
En el init evento, para el valor spaceId puedes usar el spaceId o el PUBLISHED-{spaceId}. De esta manera puedes usar Spaces sin publicarlos, directamente en tu aplicación.
Usa PREVIEW-{spaceId} cuando solo quieras publicar un espacio en Preview y no en tu dominio.
Propiedad | Tipo | Descripción | Requerido |
|---|---|---|---|
spaceId | string | Pasa el id deseado para cargar tus documentos. | requerido |
jwt | string | Pasa el token jwt para ver los documentos protegidos por jwt. | opcional |
Si quieres que una burbuja de búsqueda simple esté siempre presente en tu aplicación, usa la bubble: "ask" prop.
Mostrar evento del widget
show-widget activa la acción para mostrar el widget. También tiene una propiedad opcional que puedes pasar para abrir un documento específico desde tus Spaces inicializados.
Propiedad | Descripción | Requerido |
|---|---|---|
docId | Establece el valor del doc id para abrir un documento específico. Si docId es pasado, widgetType es ignorado; se abrirá en modo docs sin importar la propiedad pasada. Nota: Debes agregar la palabra PUBLISHED delante del docId como PUBLISHED-docId o PREVIEW-spaceId; de lo contrario, el widget abrirá el documento en modo edición, que podría tener cambios no publicados. | opcional |
blockId | Establece un cierto id de bloque para desplazarse a la sección deseada en ese documento. | opcional |
Eventos compatibles
Aquí hay una breve descripción de nuestra API de eventos del Widget:
Nombre del evento | Descripción | Requerido |
|---|---|---|
init | Este evento ayuda al widget de Archbee a iniciar los archivos necesarios en tu aplicación. | requerido |
show-widget | Este evento muestra el widget bajo demanda. | requerido |
hide-widget | Este evento oculta el widget si las mecánicas incorporadas no son suficientes. | opcional |
Ejemplos de código
Agrega una función donde quieras mostrar el widget en tu sitio, así:
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 documentos del Space deseado y los usuarios podrán ver todo directamente desde tu aplicación.
Si deseas cargar solo un documento específico, simplemente pasa docId: `${docId}` a nuestro objeto inicial como en el ejemplo anterior.
No necesitas la función closeWidget, ya que el widget se cerrará automáticamente si presionas Esc o haces clic fuera de él.
Sin embargo, si deseas cerrar el widget programáticamente y no depender de la mecánica de cierre integrada, puedes usar el tipo de evento hide-widget 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);