スクリプトタグ

シンプルなスクリプトタグであらゆるウェブサイトに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 を置き換える

更新する docs.company.com を実際のドキュメントサイトの URL にしてください。

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

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

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

呼び出す前にカスタマイズオプションを追加します 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");
    script.src = "https://docs.company.com/~gitbook/embed/script.js";
    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: string - アイコン名。任意の FontAwesome アイコンがサポートされます
- label: string - ボタンのラベルテキスト
- onClick: () => void | Promise<void> - クリック時のコールバック関数

`greeting`

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

を入力してから: { title: string, subtitle: string }

`suggestions`

アシスタントの歓迎画面に表示される推奨質問。

を入力してから: string[]

`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'
  }
});

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

最終更新 1 か月前

役に立ちましたか？

手順