Embedのカスタマイズ

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

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

ボタンのカスタマイズ（スタンドアロン のみ）

〜を使用する場合 スタンドアロンの script タグ実装、埋め込みウィジェットを起動するボタンのラベルとアイコンをカスタマイズできます。

このボタンのカスタマイズオプションは、 スタンドアロンの script タグ実装。なお、 React または Node.js/NPM パッケージ 実装では、埋め込みを起動する独自のボタンを作成する必要があります。

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

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

• assistant - アシスタントのアイコン（デフォルト）
• sparkle - きらめきアイコン
• help - ヘルプ/質問アイコン
• book - 本アイコン

カラースキームの設定

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

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

スタンドアロンスクリプト

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

Node.js/NPM

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

React

<GitBookFrame colorScheme="dark" />

アクションの追加

埋め込みにアクションを追加すると、UI でユーザーに追加のアクションを提供できます。各アクションは、ラベル、アイコン（ Font Awesomeから選択）、および onClick ユーザーがアクションをクリックしたときに実行されるアクションで構成されます。追加したアクションは、タブと並んでサイドバーに表示されます。アクションは Docs Embed 自体を制御することも、任意のコードを実行することもできます。

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");
      },
    },
  ],
});

提案の追加

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

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

挨拶の追加

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

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

アシスタント名の上書き

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

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

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

閉じるボタンの表示

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

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

商標の表示/非表示

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

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

タブの設定

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

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