# 自定义 Embed

在 [将 Docs Embed 添加到您的网站或应用程序后](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/docs-site/embedding/implementation)，您还可以通过在侧边栏中添加可执行操作的按钮、提示用户回答上下文问题的建议、标签页等内容，进一步自定义体验。

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

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

{% hint style="info" %}
此按钮自定义选项仅在使用 [独立脚本标签实现](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/docs-site/embedding/implementation/script)时可用。对于 [React](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/docs-site/embedding/implementation/react) 或 [Node.js/NPM 包](https://gitbook-v2-5hpihs24d-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 中为用户提供额外操作。每个操作由标签、图标（来自 [访问](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");
      },
    },
  ],
});
```

### 添加建议

您可以将建议添加到助手标签页中，这些建议会在助手加载时显示为可点击的提示，供您的用户使用。

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

### 添加问候语

自定义助手标签页中显示的欢迎消息：

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

### 覆盖助手名称

使用 `assistantName` 以覆盖 UI 中显示的助手名称。

该值最多可包含 32 个字符。

```javascript
window.GitBook("configure", {
  assistantName: "Support Copilot",
});
```

### 显示关闭按钮

使用 `closeButton` 以在助手内显示关闭按钮。

```javascript
window.GitBook("configure", {
  closeButton: true,
});
```

### 显示或隐藏商标

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

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

### 配置标签页

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

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