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

後に [Docs Embed をあなたのウェブサイトまたはアプリに追加すると](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/docs-site/embedding/implementation)、サイドバーにアクション可能なボタンを追加したり、コンテキストに応じた質問でユーザーを促す提案や、タブなどを追加したりして、さらに体験をカスタマイズできます。

### ボタンのカスタマイズ（[スタンドアロン](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/docs-site/embedding/implementation/script) のみ）

次の場合は [スタンドアロンのスクリプトタグ実装](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/docs-site/embedding/implementation/script)、埋め込みウィジェットを起動するボタンのラベルとアイコンをカスタマイズできます。

{% hint style="info" %}
このボタンのカスタマイズオプションは、次を使用する場合にのみ利用できます。 [スタンドアロンのスクリプトタグ実装](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/docs-site/embedding/implementation/script)。 [React](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/docs-site/embedding/implementation/react) または [Node.js/NPM パッケージ](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/ja-gitbook-documentation/docs-site/embedding/implementation/nodejs) 実装では、埋め込みを起動するための独自のボタンを作成する必要があります。
{% endhint %}

```javascript
window.GitBook("configure", {
  button: {
    label: "Ask",
    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: "Contact Support",
      icon: "circle-question",
      onClick: () => {
        window.open("https://support.example.com", "_blank");
      },
    },
    {
      label: "Documentation",
      icon: "book",
      onClick: () => {
        window.open("https://docs.example.com", "_blank");
      },
    },
  ],
});
```

### 提案の追加

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

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

### 挨拶の追加

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

```javascript
window.GitBook("configure", {
  greeting: {
    title: "ようこそ！",
    subtitle: "今日はどのようにお手伝いできますか？",
  },
});
```

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

使うもの `assistantName` UI に表示されるアシスタント名を上書きするため。

値は最大 32 文字まで含められます。

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

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

使うもの `closeButton` Assistant 内に閉じるボタンを表示するため。

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

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

使うもの `trademark` Docs Embed のフッターや Assistant のブランド表示を含む、埋め込み UI 内の GitBook の商標を表示または非表示にします。

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

### タブの設定

表示するタブを上書きします。サイトが対応している場合、すべてのタブは既定で有効です。たとえば、サイトで Assistant が有効になっていない場合は表示されません。次のように設定すると `tabs`を設定すると、埋め込みにはリストしたタブのみが表示されます。

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