# 嵌入到你的产品中

Docs Embed 是一个强大的窗口，可让你查看产品知识，并且可以添加到任何产品或网站中。用户可以向 [GitBook Assistant](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/ai-and-search/gitbook-ai-assistant)提问、搜索你的文档，或直接浏览页面，而无需离开你的产品。你可以通过按钮打开该嵌入，将其放入你想要的任何组件中，或者完全通过程序控制它。

<div data-with-frame="true"><figure><img src="https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2F5krgZgNq1Mj79a3aVB7h%2Femebeddable_assistant.png?alt=media&#x26;token=a89feaac-3656-400b-8dcd-e7969f79d92d" alt="Embed GitBook Assistant into your product or website"><figcaption><p>将你的文档嵌入到产品或网站中</p></figcaption></figure></div>

## 概览

Docs Embed 可以包含三个选项卡：

* **Assistant**： [GitBook Assistant](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/ai-and-search/gitbook-ai-assistant) ——一个由 AI 驱动的聊天界面，帮助用户找到答案
* **搜索**：一个以搜索为重点的界面，可快速查找页面并提出限定范围的问题
* **文档**：一个用于浏览你的文档站点的浏览器

默认情况下，所有选项卡都已启用。如果你设置 `tabs`，则嵌入内容只会显示你列出的选项卡。

你可以使用自定义操作、工具、建议问题、 [已验证访问](https://app.gitbook.com/s/NkEGS7hzeqa35sMXQZ4X/site-access/authenticated-access)等内容来自定义并覆盖默认配置。

## 开始使用

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

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

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

{% hint style="info" %}
如果你想使用 Assistant 选项卡， [GitBook Assistant 必须已启用](https://gitbook-v2-2r744sj4m-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/ai-yu-sou-suo/gitbook-ai-assistant) 用于你的文档站点（设置 → AI & MCP）。
{% endhint %}
{% endstep %}

{% step %}
**实现**

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

{% file src="<https://2111890564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNkEGS7hzeqa35sMXQZ4X%2Fuploads%2FwQVBQvp3ux8OvL8wk785%2FGITBOOK_ASSISTANT_SKILL.md?alt=media&token=7eea78bf-1ebb-49a2-a6eb-1c5a8331542a>" %}

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

<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><h4><i class="fa-code">:code:</i></h4></td><td><strong>独立 script 标签</strong></td><td>直接插入 &#x3C;script> 标签即可实现最快速的设置，然后再自定义其外观</td><td><a href="embedding/implementation/script">script</a></td></tr><tr><td><h4><i class="fa-box">:box:</i></h4></td><td><strong>Node.js/NPM</strong></td><td>通过 NPM 安装，用于服务端渲染或构建时控制</td><td><a href="embedding/implementation/nodejs">nodejs</a></td></tr><tr><td><h4><i class="fa-react">:react:</i></h4></td><td><strong>React 组件</strong></td><td>使用预构建的 React 组件实现无缝集成</td><td><a href="embedding/implementation/react">react</a></td></tr></tbody></table>

{% hint style="info" %}
如果你的文档使用 [已验证访问](https://gitbook-v2-2r744sj4m-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/site-access/authenticated-access)，请按照 [如何使用已验证文档设置嵌入](https://gitbook-v2-2r744sj4m-gitbook.vercel.app/url/gitbook.com/docs/documentation/zh/docs-site/embedding/using-with-authenticated-docs).
{% endhint %}
{% endstep %}

{% step %}
**配置**

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

## 延伸阅读

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