# 自定义嵌入

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

### 自定义按钮（[仅限独立](/docs/documentation/zh/docs-site/embedding/implementation/script.md) ）

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

{% hint style="info" %}
此按钮自定义选项仅在使用 [独立脚本标签实现](/docs/documentation/zh/docs-site/embedding/implementation/script.md)时可用。对于 [React](/docs/documentation/zh/docs-site/embedding/implementation/react.md) 或 [Node.js/NPM 包](/docs/documentation/zh/docs-site/embedding/implementation/nodejs.md) 实现，您需要创建自己的按钮来启动嵌入。
{% 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'], // 仅显示文档标签页
});
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gitbook.com/docs/documentation/zh/docs-site/embedding/configuration/customizing-docs-embed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.