应用程序文档小部件
上下文文档嵌入在您的产品中，在用户最需要的地方提供帮助。上下文文档组件可帮助用户阅读文档，无需在另一个窗口中浏览用户指南门户。
您可以加载特定文章或整个用户指南门户，这对于希望提高产品采用率和留存率的公司来说是必不可少的。
您只需嵌入在 空间设置 -> 小部件集成 下生成的 HTML 代码即可。
组件的工作方式
请查看下面的视频，了解该组件的实际效果：
如何实现组件
要集成此组件，请按照以下步骤操作：
在编辑器中选择您的 空间 。
点击齿轮图标 (⚙️) 进入 设置。
进入 小部件集成。
点击复制按钮，并将代码粘贴到您的 index.html 文件或应用程序代码中。
现在，该组件将处理所有后台逻辑。不用担心，所有内容都已打包并压缩。其下载大小仅为 56Kb，并且是异步加载，因此您的用户不会感觉到任何差异。
Init 事件
在 初始化 事件中，对于 spaceId 的值，您可以使用 spaceId 或 已发布-{spaceId}。这样，您可以在应用中直接使用未发布的 Spaces。
当您只想将 space 发布到 Preview 而不是您的域名时，请使用 预览-{spaceId}。
属性 | 类型 | 描述 | 是否必需 |
|---|---|---|---|
spaceId | 字符串 | 传递所需的 id 以加载您的文档。 | 必需 |
jwt | 字符串 | 传递 jwt token 以查看受 jwt 保护的文档。 | 可选 |
shareableToken | 字符串 | 从您的私有链接中传递 shareableToken 以保护您的文档。 | 可选 |
widgetType | '文档' | '搜索' | 默认值为 文档。这将以所需的行为打开小部件。文档 类型将以默认行为打开小部件，搜索 将打开一个搜索小部件栏，显示具有 AI 支持的搜索栏（如果您的订阅中包含）。 | 可选 |
hideNavbar | 布尔 | 它显示或隐藏小部件模态窗口顶部的导航栏。默认情况下导航栏可见。如果您不想看到导航栏，请将其传递为 真 值，否则跳过即可。 | |
loadingStrategy | 懒惰 | 渴望的 | 默认值为 懒惰。懒惰 加载会延迟资源的初始化，渴望的 加载会在代码执行后立即初始化或加载小部件。 | 可选 |
气泡 | 隐形 | 询问 | 默认值为 隐形。如果设置为 询问，它将在屏幕右下角显示一个气泡。无论何时有人点击它，搜索小组件都会打开。 | 可选 |
bubblePlaceholder | 字符串 | 将在气泡区域显示的占位符。如果未传递，将显示默认值 提问。 | 可选 |
锚 | 字符串 | 您可以提供希望小组件锚定并实例化的 DOM 元素的 类、id 或 路径。如果 DOM 中存在多个具有相同 path 的元素，它将锚定到找到的第一个元素。提供的容器应具有 position: relative，因为小组件将根据找到的第一个 相对 父母 进行显示。例如：anchor: "#my-container" / anchor: ".container-class" | 可选 |
如果您希望在应用中始终显示一个简单的搜索气泡，请使用bubble: "提问" 属性。
显示 widget 事件
show-widget 事件会触发显示 widget 的操作。它还具有一个可选 属性，您可以传入该属性以从已初始化的 Spaces 中打开特定文档。
属性 | 描述 | 必需 |
|---|---|---|
docId | 设置 doc id 值以打开特定文档。如果传入 docId，widgetType 将被忽略，无论传入的属性是什么，它都会以文档 模式打开。 注意： 您必须在 docId 前添加 PUBLISHED，如PUBLISHED-docId 或PREVIEW-spaceId；否则 widget 将从编辑模式打开文档，而该文档可能包含未发布的更改。 | 可选 |
blockId | 设置特定 block id，以便滚动到该文档中所需的部分。 | 可选 |
支持的事件
以下是我们小组件活动 API 的简要说明：
事件名称 | 描述 | 必需 |
|---|---|---|
初始化 | 该事件帮助 Archbee widget 引导 所需文件加载到您的应用中。 | 必需 |
show-widget | 该事件按需显示 widget。 | 必需 |
hide-widget | 如果内置机制不足，该事件可隐藏 widget。 | 可选 |
代码示例
在您希望显示 widget 的任意位置添加一个函数，如下所示：
const openAbWidget = () => {
window._archbee.push({
eventType: "show-widget",
// optional, only for loading a specific doc
// and scroll to section
// docId: `PUBLISHED-${docId}`,
// blockId: "TBMm9"
});
}这将加载 widget，并显示所需的 Space 文档，用户能够直接在您的应用中查看所有内容。
如果您只想加载特定文档，只需像上面的示例一样，将docId: `${docId}` 传入初始对象即可。
您不需要closeWidget 函数，因为当您按下Esc 或点击 widget 外部时，它会自动关闭。
但是，如果您想通过编程方式关闭小部件，而不依赖内置的关闭机制，您可以使用 hide-widget 事件类型，如下所示：
const closeAbWidgetAfterSeconds = (miliseconds) => {
setTimeout(() => {
// setTimeout is for demo purposes and it is not required...
window._archbee.push({eventType: "hide-widget"});
}, miliseconds);
}
closeAbWidgetAfterSeconds(5000);