# 自定义嵌入

在 [将 Docs Embed 添加到您的网站或应用程序后](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/docs-site/embedding/implementation)，您可以通过在侧边栏添加可执行操作的按钮、通过上下文问题引导用户的建议、标签页等方式进一步自定义体验。

### 自定义按钮（[仅限独立](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/docs-site/embedding/implementation/script) ）

当使用 [独立脚本标签实现](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/docs-site/embedding/implementation/script)时，您可以自定义启动嵌入式组件按钮的标签和图标。

{% hint style="info" %}
此按钮自定义选项仅在使用 [独立脚本标签实现](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/docs-site/embedding/implementation/script)时可用。对于 [React](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/docs-site/embedding/implementation/react) 或 [Node.js/NPM 包](https://gitbook-v2-lrp5kto0w-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/docs-site/embedding/implementation/nodejs) 实现，您需要创建自己的按钮来启动嵌入。
{% endhint %}

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

**可用的图标选项：**

* `assistant` - <i class="fa-gitbook-assistant">:gitbook-assistant:</i> 助手图标（默认）
* `sparkle` - <i class="fa-sparkle">:sparkle:</i> 闪光图标
* `help` - <i class="fa-circle-question">:circle-question:</i> 帮助/问号图标
* `book` - <i class="fa-book-open">:book-open:</i> 书本图标

### 设置配色方案

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

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

{% tabs %}
{% tab title="独立脚本" %}

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

{% endtab %}

{% tab title="Node.js/NPM" %}

```javascript
const iframeURL = gitbook.getFrameURL({
  colorScheme: "dark",
});
```

{% endtab %}

{% tab title="React" %}

```jsx
<GitBookFrame colorScheme="dark" />
```

{% endtab %}
{% endtabs %}

### 添加操作

向嵌入内容添加操作，可以让您在 UI 中为用户提供额外操作。每个操作都由标签、图标（来自 [Font Awesome](https://fontawesome.com/search?ip=brands%2Cclassic%2Cduotone)）以及一个 `onClick` 动作组成，该动作会在用户点击该操作时运行。您添加的任何操作都会与标签页一起显示在侧边栏中。操作可以控制 Docs Embed 本身，也可以执行您想要的任何代码。

```javascript
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 加载时，这些建议会以可点击提示的形式显示给您的用户使用。

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

### 添加问候语

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

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

### 显示或隐藏商标

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

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

### 配置标签页

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

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