---
title: 应用程序文档小部件
slug: docs/cn/vJ_ce7Dn7huLS_hJu1hgE
description: 了解如何将上下文文档小部件集成到您的产品中，使用户无需离开应用程序即可访问文档。本文档提供了有关选择空间、访问集成设置等的分步说明。
createdAt: 2022-01-03T10:17:23.000Z
---
上下文文档嵌入在您的产品中，在用户最需要的地方提供帮助。上下文文档组件可帮助用户阅读文档，无需在另一个窗口中浏览用户指南门户。
您可以加载特定文章或整个用户指南门户，这对于希望提高产品采用率和留存率的公司来说是必不可少的。
您只需嵌入在 **空间设置** -> **小部件集成** 下生成的 HTML 代码即可。
# 组件的工作方式
请查看下面的视频，了解该组件的实际效果：
::embed[]{url="https://www.youtube.com/watch?v=aVFVe7wUdWA"}
# 如何实现组件
要集成此组件，请按照以下步骤操作：
::::WorkflowBlock
:::WorkflowBlockItem
在编辑器中选择您的 **空间 **。
:::
:::WorkflowBlockItem
点击齿轮图标 (⚙️) 进入 **设置。**
:::
:::WorkflowBlockItem
进入 **小部件集成。**
:::
:::WorkflowBlockItem
点击复制按钮，并将代码粘贴到您的 `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"` | `可选` |
:::hint{type="info"}
如果您希望在应用中始终显示一个简单的搜索气泡，请使用`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 的任意位置添加一个函数，如下所示：
```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"
});
}
```
这将加载 widget，并显示所需的 Space 文档，用户能够直接在您的应用中查看所有内容。
如果您只想加载特定文档，只需像上面的示例一样，将``docId: `${docId}` ``传入初始对象即可。
您不需要`closeWidget` 函数，因为当您按下`Esc` 或点击 widget 外部时，它会自动关闭。
但是，如果您想通过编程方式关闭小部件，而不依赖内置的关闭机制，您可以使用 `hide-widget` 事件类型，如下所示：
```javascript
const closeAbWidgetAfterSeconds = (miliseconds) => {
setTimeout(() => {
// setTimeout is for demo purposes and it is not required...
window._archbee.push({eventType: "hide-widget"});
}, miliseconds);
}
closeAbWidgetAfterSeconds(5000);
```