スクリプトタグ

単一のスクリプトタグを使って Docs Embed ウィジェットを任意のウェブサイトやウェブアプリに追加する方法を学ぶ

GitBookアシスタントをウェブサイトやアプリに埋め込むための最も簡単な方法は、HTMLに含めるスタンドアロンスクリプトです。各GitBookドキュメントサイトはウィジェットを自動で読み込み、ドキュメントに接続する利用準備済みの埋め込みスクリプトを提供します。このページではその手順を説明します。

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

始める

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

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

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

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

次の部分を置き換えてください YOUR_DOCS_DOMAIN を実際のドキュメントサイトのドメインに置き換えます。

スクリプトをHTMLに追加

ページのHTMLに次のタグを追加します。タグは <head> の内部、または </body>.

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

ドキュメントが認証を必要とする場合

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

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

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

確認

ページをリロードします。

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

埋め込みをオプションで設定

ウィジェットを表示する前にカスタマイズできます。スクリプト読み込み後、次を呼び出してください 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('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`

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

型: boolean
デフォルト: true
例:

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

`tools`

アシスタントを拡張するカスタムAIツール。詳細はカスタムツールの作成を参照してください。

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

`button`

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

型: { 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'
  }
});

注：このオプションはスタンドアロンスクリプトタグの実装時にのみ利用可能です。ReactやNode.jsの実装では、埋め込みをトリガーする独自のボタンを作成する必要があります。

`visitor` (認証付きアクセス)

次を使用して初期化する際に渡します GitBook('init', options, frameOptions)。次のために使用されます Adaptive Content および Authenticated Access.

型: { 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エラー – サイトのコンテンツセキュリティポリシーがGitBookのドメインからのスクリプトおよびiframeの読み込みを許可していることを確認してください。
ウィジェットが表示されない – ページ上の他の要素とのz-indexの競合を確認してください。ウィジェットはデフォルトで高いz-indexを使用します。
初期化を忘れている – 必ず次を呼び出していることを確認してください GitBook('init', { siteURL: '...' }) 他のメソッドを使用する前に。

最終更新 23 時間前

役に立ちましたか？

こんにちは

スクリプトタグ

始める

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

スクリプトをHTMLに追加

ドキュメントが認証を必要とする場合

確認

埋め込みをオプションで設定

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

プログラムからナビゲートおよび操作

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

APIリファレンス

初期化

ウィジェット制御

ナビゲーション

チャット

設定

設定オプション

`tabs`

`actions`

`greeting`

`suggestions`

`trademark`

`tools`

`button`

`visitor` (認証付きアクセス)

よくある落とし穴

こんにちは

hashtag始める

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

hashtagスクリプトをHTMLに追加

hashtagドキュメントが認証を必要とする場合

hashtag確認

hashtag埋め込みをオプションで設定

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

hashtagプログラムからナビゲートおよび操作

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

hashtagAPIリファレンス

hashtag初期化

hashtagウィジェット制御

hashtagナビゲーション

hashtagチャット

hashtag設定

hashtag設定オプション

hashtagtabs

hashtagactions

hashtaggreeting

hashtagsuggestions

hashtagtrademark

hashtagtools

hashtagbutton

hashtagvisitor (認証付きアクセス)

hashtagよくある落とし穴

始める

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

スクリプトをHTMLに追加

ドキュメントが認証を必要とする場合

確認

埋め込みをオプションで設定

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

プログラムからナビゲートおよび操作

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

APIリファレンス

初期化

ウィジェット制御

ナビゲーション

チャット

設定

設定オプション

`tabs`

`actions`

`greeting`

`suggestions`

`trademark`

`tools`

`button`

`visitor` (認証付きアクセス)

よくある落とし穴