# 嵌入到你的产品中

Docs 嵌入是一种强大的方式，可让你在任何产品或网站中接入你的产品知识。用户可以向 [GitBook Assistant](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/publishing-documentation/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 嵌入由多个选项卡组成，会根据你网站的配置自动显示：

* **助手**： [GitBook Assistant](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/publishing-documentation/gitbook-ai-assistant) —— 一个由 AI 驱动的聊天界面，帮助用户找到答案
* **文档**：一个用于浏览你的文档站点的浏览器

你可以使用自定义操作、工具、建议问题、 [已认证访问](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/publishing-documentation/authenticated-access)等内容来自定义并覆盖默认配置。

## 开始使用

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

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

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

{% hint style="info" %}
如果你想使用“助手”选项卡， [必须为你的文档站点启用 GitBook Assistant](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/publishing-documentation/gitbook-ai-assistant) （设置 → AI & MCP）。
{% endhint %}
{% endstep %}

{% step %}
**实现**

使用我们的技能，借助你现有的技术栈，快速将 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>独立脚本标签</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-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/publishing-documentation/authenticated-access)，请按照 [如何使用已认证文档设置嵌入](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/zh/publishing-documentation/embedding/using-with-authenticated-docs).
{% endhint %}
{% endstep %}

{% step %}
**配置**

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

## 延伸阅读

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