自定义嵌入

通过设置欢迎消息、操作等，自定义将 Docs Embed 嵌入产品或应用时的体验

在 将 Docs Embed 添加到您的网站或应用程序后，您可以通过在侧边栏添加可执行操作的按钮、通过上下文问题引导用户的建议、标签页等方式进一步自定义体验。

自定义按钮（仅限独立 ）

当使用 独立脚本标签实现时，您可以自定义启动嵌入式组件按钮的标签和图标。

此按钮自定义选项仅在使用 独立脚本标签实现时可用。对于 React 或 Node.js/NPM 包 实现，您需要创建自己的按钮来启动嵌入。

window.GitBook("configure", {
  button: {
    label: "Ask",
    icon: "assistant", // 'assistant' | 'sparkle' | 'help' | 'book'
  },
});

可用的图标选项：

• assistant - 助手图标（默认）

• sparkle - 闪光图标

• help - 帮助/问号图标

• book - 书本图标

设置配色方案

默认情况下，嵌入内容会遵循 iframe 的 CSS color-scheme。这样它就能自动匹配您的应用主题或浏览器偏好。

如果您想强制使用某种模式，请传入 colorScheme ，当您初始化嵌入、构建帧 URL 或渲染 React 组件时。这不是 configure.

独立脚本

window.GitBook(
  "init",
  { siteURL: "https://docs.company.com" },
  { colorScheme: "dark" }
);

Node.js/NPM

React

添加操作

向嵌入内容添加操作，可以让您在 UI 中为用户提供额外操作。每个操作都由标签、图标（来自 Font Awesome）以及一个 onClick 动作组成，该动作会在用户点击该操作时运行。您添加的任何操作都会与标签页一起显示在侧边栏中。操作可以控制 Docs Embed 本身，也可以执行您想要的任何代码。

window.GitBook("configure", {
  actions: [
    {
      label: "Contact Support",
      icon: "circle-question",
      onClick: () => {
        window.open("https://support.example.com", "_blank");
      },
    },
    {
      label: "Documentation",
      icon: "book",
      onClick: () => {
        window.open("https://docs.example.com", "_blank");
      },
    },
  ],
});

添加建议

您可以向 Assistant 标签页添加建议，当 Assistant 加载时，这些建议会以可点击提示的形式显示给您的用户使用。

window.GitBook("configure", {
  suggestions: [
    "Help me get started with my new account",
    "How do I reset my password?",
    "What are your pricing plans?",
  ],
});

添加问候语

自定义在 Assistant 标签页中显示的欢迎消息：

window.GitBook("configure", {
  greeting: {
    title: "Welcome!",
    subtitle: "How can I help you today?",
  },
});

显示或隐藏商标

使用 trademark 来显示或隐藏嵌入 UI 中的 GitBook 商标——包括 Docs Embed 页脚和 Assistant 品牌标识。

window.GitBook("configure", {
  trademark: false,
});

配置标签页

覆盖要显示的标签页。默认情况下，只要您的站点支持，所有标签页都会启用。例如，如果您的站点未启用 Assistant，则不会显示它。如果您设置 tabs，嵌入将只显示你列出的标签页。

window.GitBook("configure", {
  tabs: ["assistant", "search", "docs"], // 显示所有标签页
  // tabs: ["search", "docs"], // 仅显示搜索和文档
  // tabs: ['docs'], // 仅显示文档标签页
});