# 嵌入到你的产品中

Docs Embed 是一个强大的窗口，可让你查看产品知识，并可添加到任何产品或网站中。用户可以向 [GitBook Assistant](/docs/documentation/zh/ai-yu-sou-suo/gitbook-ai-assistant.md)提问、搜索你的文档，或直接浏览页面，而无需离开你的产品。你可以通过按钮打开该嵌入内容，把它放入任何你想要的组件中，或者完全通过程序进行控制。

<div data-with-frame="true"><figure><img src="/files/97538cae968c488b6e43986c80dc14d7d0efecd2" alt="Embed GitBook Assistant into your product or website"><figcaption><p>将你的文档嵌入到产品或网站中</p></figcaption></figure></div>

## 概览

Docs Embed 可以包含三个标签页：

* **Assistant**： [GitBook Assistant](/docs/documentation/zh/ai-yu-sou-suo/gitbook-ai-assistant.md) — 一个由 AI 驱动的聊天界面，帮助用户找到答案
* **搜索**：一个以搜索为核心的界面，用于快速查找页面并提出限定范围的问题
* **文档**：一个用于浏览你的文档站点的浏览器

默认情况下，所有标签页都已启用。如果你设置 `tabs`，嵌入内容将只显示你列出的标签页。

你可以使用自定义操作、工具、推荐问题、 [已认证访问](/docs/documentation/zh/zhan-dian-fang-wen/authenticated-access.md)等内容来自定义并覆盖默认配置。

## 开始使用

{% stepper %}
{% step %}
**前提条件**

在嵌入文档之前，请确保：

1. **你的文档已发布** 并可通过一个 URL 访问（例如， `https://docs.company.com`).
2. **你已从站点设置中获取嵌入脚本 URL** （设置 → AI & MCP → 嵌入）。

{% hint style="info" %}
如果你想使用 Assistant 标签页， [必须为你的文档站点启用 GitBook Assistant](/docs/documentation/zh/ai-yu-sou-suo/gitbook-ai-assistant.md) （设置 → AI & MCP）。
{% endhint %}
{% endstep %}

{% step %}
**实现方式**

使用我们的技能，借助你现有的技术栈，快速将 GitBook Assistant 实现到你的产品中。

{% file src="/files/660b98bf335fdae37957dad219a2cfe40afb63cb" %}

或者，继续阅读文档，选择适合你设置的方案：

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-code">:code:</i></td><td><strong>独立 script 标签</strong></td><td>插入一个 &#x3C;script> 标签即可获得最快的设置，然后再自定义其外观</td><td><a href="/pages/81272e1e8dae8b9000873ffae62b3b5a7fd53166">/pages/81272e1e8dae8b9000873ffae62b3b5a7fd53166</a></td></tr><tr><td><i class="fa-box">:box:</i></td><td><strong>Node.js/NPM</strong></td><td>通过 NPM 安装，用于服务端渲染或构建时控制</td><td><a href="/pages/8453f74f049615248171dd3528fd9d96ad8271b5">/pages/8453f74f049615248171dd3528fd9d96ad8271b5</a></td></tr><tr><td><i class="fa-react">:react:</i></td><td><strong>React 组件</strong></td><td>使用预构建的 React 组件，实现无缝集成</td><td><a href="/pages/fc94bec83478ce08eac8e9fae8a7b03fd3067f0a">/pages/fc94bec83478ce08eac8e9fae8a7b03fd3067f0a</a></td></tr></tbody></table>

{% hint style="info" %}
如果你的文档使用 [已认证访问](/docs/documentation/zh/zhan-dian-fang-wen/authenticated-access.md)，请按照 [如何通过已认证文档设置嵌入](/docs/documentation/zh/docs-site/embedding/using-with-authenticated-docs.md).
{% endhint %}
{% endstep %}

{% step %}
**配置**

* [自定义嵌入](/docs/documentation/zh/docs-site/embedding/configuration/customizing-docs-embed.md) — 添加欢迎消息、自定义操作和建议
* [创建自定义工具](/docs/documentation/zh/docs-site/embedding/configuration/creating-custom-tools.md) — 将 Assistant 连接到你的产品 API
  {% endstep %}
  {% endstepper %}

## 延伸阅读

如需完整的 API 参考和源代码，请参阅 GitHub 上的 [`@gitbook/embed` 包](https://github.com/GitbookIO/gitbook/tree/main/packages/embed).


---

# 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.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.