# 製品への埋め込み

Docs Embedは、製品やウェブサイトに追加できる強力な製品知識への窓です。ユーザーは次に質問をすることができます： [GitBookアシスタント](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は、サイトの設定に応じて自動的に表示される複数のタブで構成されています：

* **アシスタント**：次の [GitBookアシスタント](https://gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs/documentation/ja-gitbook-documentation/publishing-documentation/gitbook-ai-assistant) －ユーザーが答えを見つけるのを支援するAI搭載のチャットインターフェース
* **ドキュメント**：ドキュメントサイトをナビゲートするブラウザ

カスタムアクション、ツール、推奨質問、 [認証されたアクセス](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アシスタントが有効化されている必要があります](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 %}
**実装**

セットアップに合った方法を選んでください：

<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/ja-gitbook-documentation/publishing-documentation/authenticated-access)を使用している場合は、次の手順に従ってください： [認証されたドキュメントでEmbedを設定する方法](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) －アシスタントを製品のAPIに接続します
  {% endstep %}
  {% endstepper %}

## 関連記事

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