Node.js/NPM

使用 NPM 包集成 Docs Embed，以实现完整的应用级控制

如果您需要更多控制并希望在应用程序级别工作，您可以从 npm 安装 GitBook 嵌入包。此方法非常适合服务端渲染、构建时集成或自定义 iframe 管理。

步骤

安装包

添加 @gitbook/embed 到您的项目：

npm install @gitbook/embed

有关完整的 API 参考和源代码，请参阅 @gitbook/embed GitHub 上的包.

导入包

在您的应用代码中，导入 createGitBook 函数：

import { createGitBook } from "@gitbook/embed";

或使用 CommonJS：

const { createGitBook } = require("@gitbook/embed");

初始化 GitBook

使用您的文档站点 URL 创建一个 GitBook 实例：

const gitbook = createGitBook({
  siteURL: "https://docs.company.com",
});

创建一个 iframe

生成一个 iframe 元素并将其源设置为嵌入 URL：

const iframe = document.createElement("iframe");
iframe.src = gitbook.getFrameURL({
  visitor: {
    token: 'your-jwt-token', // 可选：用于自适应内容或经过身份验证的访问
    unsignedClaims: { // 可选：用于动态表达式的自定义声明
      userId: '123',
      plan: 'premium'
    }
  }
});
iframe.id = "gitbook-embed-container";
iframe.style.border = "none";
iframe.style.width = "100%";
iframe.style.height = "600px";

附加该框架

创建一个 GitBook 框架实例并将其挂载到您的页面：

const frame = gitbook.createFrame(iframe);
document.getElementById("gitbook-embed-container").appendChild(iframe);

以编程方式控制嵌入

使用框架实例与嵌入交互：

// 导航到文档选项卡中的特定页面
frame.navigateToPage("/getting-started");

// 切换到助理选项卡
frame.navigateToAssistant();

// 向聊天发送消息
frame.postUserMessage("How do I get started?");

// 清除聊天记录
frame.clearChat();

配置嵌入

使用自定义选项配置嵌入：

frame.configure({
  tabs: ['assistant', 'docs'],
  actions: [
    {
      icon: 'circle-question',
      label: 'Contact Support',
      onClick: () => window.open('https://support.example.com', '_blank')
    }
  ],
  greeting: { title: 'Welcome!', subtitle: 'How can I help?' },
  suggestions: ['What is GitBook?', 'How do I get started?'],
  tools: [/* ... */]
});

监听事件

注册事件监听器以响应嵌入事件：

frame.on('close', () => {
  console.log('Frame closed');
});

// 完成后取消订阅
const unsubscribe = frame.on('navigate', (data) => {
  console.log('Navigated to:', data.path);
});

API 参考

客户端工厂

createGitBook(options: { siteURL: string }) → GitBookClient
client.getFrameURL(options?: { visitor?: {...} }) → string - 获取带有可选经过身份验证访问的 iframe URL
client.createFrame(iframe: HTMLIFrameElement) → GitBookFrameClient - 创建一个用于与 iframe 通信的框架客户端

框架客户端方法

frame.navigateToPage(path: string) → void - 导航到文档选项卡中的特定页面
frame.navigateToAssistant() → void - 切换到助理选项卡
frame.postUserMessage(message: string) → void - 向聊天发布消息
frame.clearChat() → void - 清除聊天记录
frame.configure(settings: Partial<GitBookEmbeddableConfiguration>) → void - 配置嵌入
frame.on(event: string, listener: Function) → () => void - 注册事件监听器（返回取消订阅函数）

配置选项

可以通过以下方式使用配置选项 frame.configure({...}):

`tabs`

覆盖显示的选项卡。默认为您站点的配置。

类型: ('assistant' | 'docs')[]

`actions`

在与选项卡并列的侧边栏中呈现的自定义操作按钮。每个操作按钮在被点击时都会触发回调。

注：此前名为 buttons。使用 actions 代替。

类型: Array<{ icon: string, label: string, onClick: () => void }>

`greeting`

显示在助理选项卡中的欢迎消息。

类型: { title: string, subtitle: string }

`suggestions`

显示在助理欢迎界面中的建议问题。

类型: string[]

`tools`

用于扩展助理的自定义 AI 工具。详见创建自定义工具以获取详细信息。

类型: Array<{ name: string, description: string, inputSchema: object, execute: Function, confirmation?: {...} }>

`visitor` （经过身份验证的访问）

传递给 getFrameURL({ visitor: {...} })。用于自适应内容和经过身份验证的访问.

类型: { token?: string, unsignedClaims?: Record<string, unknown> }

常见错误

忘记安装包 – 在导入之前运行 npm install @gitbook/embed 。
缺少 siteURL – 选项 siteURL 是必需的，且必须与您已发布的文档站点匹配。
iFrame 未渲染 – 确保父容器具有足够的宽度/高度以显示 iframe。
在初始化之前调用框架方法 – 等待 createFrame() 完成后再调用框架方法。
未取消订阅事件 – 记得调用由 frame.on() 返回的取消订阅函数以防止内存泄漏。
使用旧的 API 方法 – 像 open(), close(), toggle()，和 destroy() 这些方法在 NPM 包中不可用。请改用框架客户端方法。

最后更新于1个月前

这有帮助吗？

步骤

安装包

导入包