# 製品に埋め込む

Docs Embed は、製品やウェブサイトに追加できる、製品ナレッジへの強力なウィンドウです。ユーザーは次の相手に質問できます： [GitBook Assistant](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/gitbook-ai-assistant) または、製品を離れることなくドキュメントを直接閲覧できます。Embed はボタンで開いたり、任意のコンポーネントに組み込んだり、完全にプログラムで制御したりできます。

<div data-with-frame="true"><figure><img src="https://4217681718-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://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/gitbook-ai-assistant) - ユーザーが答えを見つけるのを助ける、AI 搭載のチャットインターフェース
* **Docs**：ドキュメントサイトを移動するためのブラウザー

カスタムアクション、ツール、推奨質問、 [認証済みアクセス](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/authenticated-access)などを使って、デフォルト設定をカスタマイズおよび上書きできます。

## はじめに

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

ドキュメントを埋め込む前に、以下を確認してください：

1. **ドキュメントが公開されている** こと、および URL でアクセス可能であること（例： `https://docs.company.com`).
2. **埋め込みスクリプトの URL を取得している** こと。これはサイト設定（Settings → AI & MCP → Embed）から確認できます。

{% hint style="info" %}
Assistant タブを使いたい場合は、 [GitBook Assistant が有効になっている必要があります](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/gitbook-ai-assistant) ドキュメントサイトで（Settings → AI & MCP）。
{% endhint %}
{% endstep %}

{% step %}
**実装**

既存のスタックを使って、当社のスキルを利用し、GitBook Assistant をすばやく製品に実装できます。

{% file src="<https://4217681718-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-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/authenticated-access)を使用している場合は、 [認証済みドキュメントで埋め込みを設定する方法](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/embedding/using-with-authenticated-docs).
{% endhint %}
{% endstep %}

{% step %}
**設定**

* [Embed のカスタマイズ](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/embedding/configuration/customizing-docs-embed) – ウェルカムメッセージ、カスタムアクション、提案を追加する
* [カスタムツールの作成](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/embedding/configuration/creating-custom-tools) – Assistant を製品の API に接続する
  {% endstep %}
  {% endstepper %}

## さらに読む

完全な API リファレンスとソースコードについては、GitHub 上の次のものを参照してください： [`@gitbook/embed` パッケージ](https://github.com/GitbookIO/gitbook/tree/main/packages/embed).