The 2026 State of Docs report is here.
Read the report
PricingLog inSign up

script タグ

1 つの script タグで、任意の Web サイトや Web アプリに Docs Embed ウィジェットを追加する方法を学びましょう

GitBook Assistant をウェブサイトやアプリに埋め込むための最も簡単な統合方法は、HTML に含める独立したスクリプトです。各 GitBook ドキュメントサイトには、ウィジェットを自動的に読み込み、ドキュメントに接続する、すぐに使える埋め込みスクリプトが用意されています。このページでは、その方法を説明します。

SDK、ビルド手順、フレームワークの統合は不要です。スクリプトを含めるだけで、ウィジェットがページに表示されます。

はじめに

1

埋め込みスクリプトの URL をコピーする

GitBook アプリでドキュメントサイトに移動し、 設定 タブ、次に AI と MCP に移動して、埋め込みスクリプトの URL をコピーします。

手動で作成することもできます:

https://YOUR_DOCS_DOMAIN/~gitbook/embed/script.js

次のものを置き換えます YOUR_DOCS_DOMAIN を、実際のドキュメントサイトのドメインに。

2

スクリプトを HTML に追加する

ページの HTML に次のタグを追加してください。次の中に入れてください <head> または、直前に </body>.

<script src="https://YOUR_DOCS_DOMAIN/~gitbook/embed/script.js"></script>
<script>window.GitBook('show');</script>
3

ドキュメントで認証が必要な場合

ドキュメントが 認証の背後にある場合、スクリプトには署名付き JWT トークンを含める必要があります。

クエリパラメータとして追加します:

<script src="https://YOUR_DOCS_DOMAIN/~gitbook/embed/script.js?jwt_token=YOUR_TOKEN"></script>
4

確認する

ページを再読み込みします。

ウィジェットは右下隅に表示されるはずです。

必要に応じて埋め込みを設定する

表示する前にウィジェットをカスタマイズできます。スクリプトを読み込んだ後、次を呼び出します configure そして次を呼び出す前に window.GitBook('show').

<script src="https://YOUR_DOCS_DOMAIN/~gitbook/embed/script.js"></script>
<script>
  window.GitBook('configure', {
    button: {
      label: 'Ask',
      icon: 'assistant' // assistant | sparkle | help | book
    },
    trademark: false,
    tabs: ['assistant', 'docs'],
    actions: [
      {
        icon: 'circle-question',
        label: 'Contact support',
        onClick: () => window.open('https://support.example.com', '_blank')
      }
    ],
    greeting: {
      title: 'Welcome',
      subtitle: 'How can I help?'
    },
    suggestions: [
      'What is GitBook?',
      'How do I get started?'
    ]
  });

  window.GitBook('show');
</script>

この方法を使うと、以下をカスタマイズできます:

  • ボタンのラベルとアイコン

  • ウィジェット内で表示されるタブ

  • カスタムアクションボタン

  • 挨拶のタイトルとサブタイトル

  • ユーザーに表示される提案プロンプト。

ウィジェットの表示を制御する

API を通じて、実行時に表示や状態を制御できます。

<script>
  // ウィジェットを表示する
  window.GitBook('show');

  // ページからウィジェットを削除する
  window.GitBook('hide');

  // ウィジェットパネルを開く
  window.GitBook('open');

  // ウィジェットパネルを閉じる
  window.GitBook('close');

  // 開閉を切り替える
  window.GitBook('toggle');
</script>

これは、ウィジェットを独自の UI トリガーに接続したい場合に便利です。

プログラムで移動して操作する

コードからウィジェットを操作して、移動したり、タブを切り替えたり、メッセージを送信したりできます。

<script>
  // ウィジェット内で特定のドキュメントページを開く
  window.GitBook('navigateToPage', '/getting-started');

  // アシスタント タブに切り替える
  window.GitBook('navigateToAssistant');

  // ユーザーメッセージをアシスタントに送信する
  window.GitBook('postUserMessage', 'How do I get started?');

  // 現在のチャット履歴を消去する
  window.GitBook('clearChat');
</script>

この機能の典型的な用途には次のものがあります:

  • アプリからドキュメントページへのディープリンクを追加する

  • 質問を事前入力する

  • フロー間で会話をリセットする

埋め込みスクリプトを動的に読み込む

ウィジェットを条件付きでのみ読み込みたい場合や、実行時に認証トークンを付与する必要がある場合は、スクリプトをプログラムで挿入します。

<script>
  function loadGitBookEmbed() {
    var token = "" // サイトで認証が必要な場合は JWT トークンをここに入れてください
    var script = document.createElement('script');
    script.src = 'https://YOUR_DOCS_DOMAIN/~gitbook/embed/script.js'
      + token ? '?jwt_token=' + encodeURIComponent(token) : ';
    script.async = true;
    script.onload = function () {
      window.GitBook('show');
    };
    document.head.appendChild(script);
  }

  loadGitBookEmbed();
</script>

ウィジェットをユーザー操作後や機能フラグ有効化後にのみ読み込む場合は、このパターンを使用してください

API リファレンス

初期化

  • GitBook('init', options: { siteURL: string }, frameOptions?: { visitor?: {...} }) - サイト URL と任意の認証済みアクセスでウィジェットを初期化する

ウィジェット制御

  • GitBook('show') - ウィジェットボタンを表示する

  • GitBook('hide') - ウィジェットボタンを非表示にする

  • GitBook('open') - ウィジェットウィンドウを開く

  • GitBook('close') - ウィジェットウィンドウを閉じる

  • GitBook('toggle') - ウィジェットウィンドウを切り替える

ナビゲーション

  • GitBook('navigateToPage', path: string) - ドキュメントタブ内の特定のページへ移動します

  • GitBook('navigateToAssistant') - アシスタントタブへ移動する

チャット

  • GitBook('postUserMessage', message: string) - チャットにメッセージを送信します

  • GitBook('clearChat') - チャット履歴をクリアします

設定

  • GitBook('configure', settings: {...}) - ウィジェット設定を構成する（下の設定セクションを参照）

  • GitBook('unload') - ページからウィジェットを完全に削除する

設定オプション

設定オプションは次で利用できます GitBook('configure', {...}):

tabs

表示するタブを上書きします。既定値はサイトの設定です。

  • 入力: ('assistant' | 'docs')[]

  • オプション:

    • ['assistant', 'docs'] - 両方のタブを表示する

    • ['assistant'] - アシスタントタブのみを表示する

    • ['docs'] - ドキュメントタブのみを表示する

actions

タブの横にあるサイドバーに表示されるカスタムアクションボタンです。各アクションボタンはクリック時にコールバックをトリガーします。

注意：以前はこれを buttonsと呼んでいました。 actions の使用を検討してください。

  • 入力: Array<{ icon: string, label: string, onClick: () => void }>

  • プロパティ:

    • icon: string - アイコン名。任意の FontAwesome アイコン がサポートされています

    • label: string - ボタンラベルのテキスト

    • onClick: () => void | Promise<void> - クリック時のコールバック関数

greeting

アシスタンタブに表示されるウェルカムメッセージ。

  • 入力: { title: string, subtitle: string }

suggestions

アシスタントのウェルカム画面に表示される提案質問。

  • 入力: string[]

trademark

埋め込み UI で GitBook の商標を表示または非表示にします — Docs Embed のフッターと Assistant のブランド表示を含みます。

  • 入力: boolean

  • デフォルト: true

  • 例:

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

tools

アシスタントを拡張するためのカスタム AI ツールです。詳細は カスタムツールの作成 をご覧ください。

  • 入力: Array<{ name: string, description: string, inputSchema: object, execute: Function, confirmation?: {...} }>

ボタン

埋め込みを起動するウィジェットボタンを構成します（スタンドアロンスクリプトのみ）。これにより、ページの右下隅に表示されるボタンのラベルとアイコンをカスタマイズできます。

  • 入力: { label: string, icon: 'assistant' | 'sparkle' | 'help' | 'book' }

  • プロパティ:

    • label: string - ボタンに表示されるテキスト

    • icon: 'assistant' | 'sparkle' | 'help' | 'book' - ボタンに表示されるアイコン

      • assistant - アシスタントアイコン

      • sparkle - きらめきアイコン

      • help - ヘルプ/質問アイコン

      • book - 本アイコン

例:

window.GitBook('configure', {
  button: {
    label: 'Ask',
    icon: 'assistant'
  }
});

注: このオプションは、スタンドアロンの script タグ実装を使用している場合にのみ利用できます。React または Node.js の実装では、埋め込みを起動するための独自のボタンを作成する必要があります。

visitor （認証済みアクセス）

次を使って初期化する際に渡します GitBook('init', options, frameOptions)。用途は Adaptive Content 、 認証済みアクセス.

  • 入力: { token?: string, unsignedClaims?: Record<string, unknown> }

  • プロパティ:

    • token: string （任意）- 署名付き JWT トークン

    • unsignedClaims: Record<string, unknown> （任意）- 動的式用の署名なしクレーム

よくある落とし穴

  • スクリプト URL が正しくありません – 例ではなく、実際のドキュメント URL を使用していることを確認してください docs.company.com.

  • GitBook をスクリプト読み込み前に呼び出している – API 呼び出しを script.onload でラップするか、スクリプトタグの後に配置してください。

  • 認証済みドキュメントにアクセスできない – ドキュメントにサインインが必要な場合は、 visitor.token を初期化時に提供する必要があります。参照: 認証済みドキュメントでの使用.

  • CORS または CSP のエラー – サイトの Content Security Policy で、GitBook ドメインからのスクリプトと iframe の読み込みが許可されていることを確認してください。

  • ウィジェットが表示されない – ページ上の他の要素との z-index の競合を確認してください。ウィジェットはデフォルトで高い z-index を使用します。

  • 初期化を忘れている – 次を呼び出していることを確認してください GitBook('init', { siteURL: '...' }) 他のメソッドを使用する前に。

最終更新

役に立ちましたか？