> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/ja-gitbook-documentation/publish/embedding/configuration/customizing-docs-embed.md).

# 埋め込みのカスタマイズ

ウェルカムメッセージ、アクションなどを設定して、製品やアプリに Docs Embed を埋め込む際の体験をカスタマイズします

後 [Docs Embed をウェブサイトまたはアプリに追加する](/docs/documentation/ja-gitbook-documentation/publish/embedding/implementation.md)、さらにサイドバーに実行可能なボタンを追加したり、コンテキストに応じた質問、タブなどでユーザーの行動を促す提案を追加したりして、体験をさらにカスタマイズできます。

### ボタンのカスタマイズ（[スタンドアロン](/docs/documentation/ja-gitbook-documentation/publish/embedding/implementation/script.md) のみ）

〜を使用する場合 [スタンドアロンの script タグ実装](/docs/documentation/ja-gitbook-documentation/publish/embedding/implementation/script.md)、埋め込みウィジェットを起動するボタンのラベルとアイコンをカスタマイズできます。

{% hint style="info" %}
このボタンのカスタマイズオプションは、 [スタンドアロンの script タグ実装](/docs/documentation/ja-gitbook-documentation/publish/embedding/implementation/script.md)。なお、 [React](/docs/documentation/ja-gitbook-documentation/publish/embedding/implementation/react.md) または [Node.js/NPM パッケージ](/docs/documentation/ja-gitbook-documentation/publish/embedding/implementation/nodejs.md) 実装では、埋め込みを起動する独自のボタンを作成する必要があります。
{% endhint %}

```javascript
window.GitBook("configure", {
  button: {
    label: "質問する",
    icon: "assistant", // 'assistant' | 'sparkle' | 'help' | 'book'
  },
});
```

**利用可能なアイコンのオプション：**

* `assistant` - <i class="fa-gitbook-assistant">:gitbook-assistant:</i> アシスタントのアイコン（デフォルト）
* `sparkle` - <i class="fa-sparkle">:sparkle:</i> きらめきアイコン
* `help` - <i class="fa-circle-question">:circle-question:</i> ヘルプ/質問アイコン
* `book` - <i class="fa-book-open">:book-open:</i> 本アイコン

### カラースキームの設定

デフォルトでは、埋め込みは iframe の CSS に従います `color-scheme`。これにより、アプリのテーマやブラウザーの設定に自動的に一致させることができます。

モードを強制したい場合は、 `colorScheme` 埋め込みを初期化する際、フレーム URL を構築する際、または React コンポーネントをレンダリングする際に `configure`.

{% tabs %}
{% tab title="スタンドアロンスクリプト" %}

```javascript
window.GitBook(
  "init",
  { siteURL: "https://docs.company.com" },
  { colorScheme: "dark" }
);
```

{% endtab %}

{% tab title="Node.js/NPM" %}

```javascript
const iframeURL = gitbook.getFrameURL({
  colorScheme: "dark",
});
```

{% endtab %}

{% tab title="React" %}

```jsx
<GitBookFrame colorScheme="dark" />
```

{% endtab %}
{% endtabs %}

### アクションの追加

埋め込みにアクションを追加すると、UI でユーザーに追加のアクションを提供できます。各アクションは、ラベル、アイコン（ [Font Awesome](https://fontawesome.com/search?ip=brands%2Cclassic%2Cduotone)から選択）、および `onClick` ユーザーがアクションをクリックしたときに実行されるアクションで構成されます。追加したアクションは、タブと並んでサイドバーに表示されます。アクションは Docs Embed 自体を制御することも、任意のコードを実行することもできます。

```javascript
window.GitBook("configure", {
  actions: [
    {
      label: "サポートに問い合わせる",
      icon: "circle-question",
      onClick: () => {
        window.open("https://support.example.com", "_blank");
      },
    },
    {
      label: "ドキュメント",
      icon: "book",
      onClick: () => {
        window.open("https://docs.example.com", "_blank");
      },
    },
  ],
});
```

### 提案の追加

アシスタントタブに提案を追加でき、アシスタントが読み込まれるとユーザーがクリックして使えるプロンプトとして表示されます。

```javascript
window.GitBook("configure", {
  suggestions: [
    "新しいアカウントの使い始め方を教えて",
    "パスワードをリセットするにはどうすればいいですか？",
    "料金プランはどのようになっていますか？",
  ],
});
```

### 挨拶の追加

アシスタントタブに表示されるウェルカムメッセージをカスタマイズします：

```javascript
window.GitBook("configure", {
  greeting: {
    title: "ようこそ！",
    subtitle: "本日はどのようなご用件でしょうか？",
  },
});
```

### アシスタント名の上書き

使用 `assistantName` UI に表示されるアシスタント名を上書きします。

値は最大 32 文字まで含めることができます。

```javascript
window.GitBook("configure", {
  assistantName: "Support Copilot",
});
```

### 閉じるボタンの表示

使用 `closeButton` アシスタント内に閉じるボタンを表示します。

```javascript
window.GitBook("configure", {
  closeButton: true,
});
```

### 商標の表示/非表示

使用 `trademark` Docs Embed フッターとアシスタントのブランディングを含む、埋め込み UI 内の GitBook の商標を表示または非表示にします。

```javascript
window.GitBook("configure", {
  trademark: false,
});
```

### タブの設定

表示するタブを上書きします。サイトが対応している限り、すべてのタブはデフォルトで有効です。たとえば、サイトでアシスタントが有効になっていない場合は表示されません。もし `タブ`、埋め込みには指定したタブのみが表示されます。

```javascript
window.GitBook("configure", {
  tabs: ["assistant", "search", "docs"], // すべてのタブを表示
  // tabs: ["search", "docs"], // 検索と docs のみを表示
  // tabs: ['docs'], // docs タブのみを表示
});
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://gitbook.com/docs/documentation/ja-gitbook-documentation/publish/embedding/configuration/customizing-docs-embed.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
