スクリプトタグ

シンプルなスクリプトタグで任意のウェブサイトにDocs Embedを追加する

Docs Embed をウェブサイトやアプリに追加する最も簡単な方法は、「スタンドアロン」スクリプトタグを追加することです。GitBook のすべてのドキュメントサイトには、ウィジェットとしてドキュメントを埋め込むための使えるスクリプトが含まれています。

手順

埋め込みスクリプトの URL を取得する

ドキュメントサイトの設定 → AI と MCP タブに移動してスクリプトの URL をコピーするか、次のスクリプトを使用してください。 https://docs.company.com/~gitbook/embed/script.js （置き換えてください docs.company.com を実際のドキュメントサイトの URL に）。

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

次のコードを HTML の適切な場所に配置します。 <head> または閉じる直前の </body> タグ：

<script src="https://docs.company.com/~gitbook/embed/script.js"></script>
<script>
  // 認証アクセスで初期化（任意）
  window.GitBook('init', 
    { siteURL: 'https://docs.company.com' },
    { visitor: { token: 'your-jwt-token' } }
  );
  window.GitBook('show');
</script>

ドキュメントサイトが認証アクセスで保護されている場合、スクリプト自体も認証制御下にあります。署名済みトークンをスクリプト URL に jwt_token として付加してください。 jwt_token:

https://docs.company.com/~gitbook/embed/script.js?jwt_token=your-jwt-token

ドキュメントの URL を置き換える

更新 docs.company.com を実際のドキュメントサイトの URL に置き換えてください。

ウィジェットをテストする

ページを読み込みます。埋め込みウィジェットが右下隅に表示されるはずです。

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

show() を呼び出す前にカスタマイズオプションを追加します。 show():

<script src="https://docs.company.com/~gitbook/embed/script.js"></script>
<script>
  window.GitBook('init', { siteURL: 'https://docs.company.com' });
  
  window.GitBook('configure', {
    button: {
      label: 'Ask',
      icon: 'assistant' // 'assistant' | 'sparkle' | 'help' | 'book'
    },
    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>

プログラムでナビゲートおよび操作する

API を使ってページに移動したり、タブを切り替えたり、メッセージを投稿したりできます：

<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 script = document.createElement("script");
    // ドキュメントサイトが保護されている場合、スクリプトリクエストを認証する必要があります。
    // 署名済みトークンを `jwt_token` として付与してください。
    var token = "your-jwt-token";
    script.src =
      "https://docs.company.com/~gitbook/embed/script.js?jwt_token=" +
      encodeURIComponent(token);
    script.async = true;
    script.onload = function () {
      window.GitBook('init', { siteURL: 'https://docs.company.com' });
      window.GitBook("show");
    };
    document.head.appendChild(script);
  }

  // 準備ができたら読み込む
  loadGitBookEmbed();
</script>

セットアップを確認する

ブラウザのコンソールを開き、次を入力して window.GitBook API が利用可能であることを確認します。

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: 文字列 - アイコン名。任意の FontAwesome アイコンがサポートされます。
- label: 文字列 - ボタンのラベルテキスト
- onClick: () => void | Promise<void> - クリック時のコールバック関数

`greeting`

アシスタントタブに表示される歓迎メッセージ。

型: { title: string, subtitle: string }

`suggestions`

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

型: string[]

`tools`

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

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

`button`

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

型: { label: string, icon: 'assistant' | 'sparkle' | 'help' | 'book' }
プロパティ:
- label: 文字列 - ボタンに表示されるテキスト
- 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)。これは以下で使用されます：アダプティブコンテンツおよび認証付きアクセス.

型: { token?: string, unsignedClaims?: Record<string, unknown> }
プロパティ:
- token: 文字列 （任意）- 署名済み 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: '...' }) 。

最終更新 7 日前

役に立ちましたか？

おやすみ

スクリプトタグ

手順

埋め込みスクリプトの URL を取得する

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

ドキュメントの URL を置き換える

ウィジェットをテストする

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

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

プログラムでナビゲートおよび操作する

動的に読み込む（任意）

セットアップを確認する

API リファレンス

初期化

ウィジェット制御

ナビゲーション

チャット

設定

設定オプション

`tabs`

`actions`

`greeting`

`suggestions`

`tools`

`button`

`visitor` （認証付きアクセス）

よくある落とし穴

おやすみ

hashtag手順

hashtag埋め込みスクリプトの URL を取得する

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

hashtagドキュメントの URL を置き換える

hashtagウィジェットをテストする

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

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

hashtagプログラムでナビゲートおよび操作する

hashtag動的に読み込む（任意）

hashtagセットアップを確認する

hashtagAPI リファレンス

hashtag初期化

hashtagウィジェット制御

hashtagナビゲーション

hashtagチャット

hashtag設定

hashtag設定オプション

hashtagtabs

hashtagactions

hashtaggreeting

hashtagsuggestions

hashtagtools

hashtagbutton

hashtagvisitor （認証付きアクセス）

hashtagよくある落とし穴

手順

埋め込みスクリプトの URL を取得する

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

ドキュメントの URL を置き換える

ウィジェットをテストする

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

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

プログラムでナビゲートおよび操作する

動的に読み込む（任意）

セットアップを確認する

API リファレンス

初期化

ウィジェット制御

ナビゲーション

チャット

設定

設定オプション

`tabs`

`actions`

`greeting`

`suggestions`

`tools`

`button`

`visitor` （認証付きアクセス）

よくある落とし穴