circle-info
The 2026 State of Docs survey is live 📝 Whether you write, edit, or just rely on docs, we want to hear from you!
Take the surveyarrow-up-right
search
PricingLog inSign up

スクリプトタグ

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

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

hashtag
手順

1

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

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

2

hashtag
スクリプトタグを 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>
3

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

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

4

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

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

5

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

呼び出す前にカスタマイズオプションを追加します 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>
6

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

API を使用して埋め込みを表示、非表示、開く、または閉じます：

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

  // ウィジェットを非表示にする
  window.GitBook("hide");

  // 埋め込みウィンドウを開く
  window.GitBook("open");

  // 埋め込みウィンドウを閉じる
  window.GitBook("close");

  // 埋め込みウィンドウを切り替える
  window.GitBook("toggle");
</script>
7

hashtag
プログラムでナビゲートや操作を行う

API を使用してページへ移動したり、タブを切り替えたり、メッセージを送信したりします：

<script>
  // ドキュメントタブの特定ページへ移動
  window.GitBook('navigateToPage', '/getting-started');

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

  // チャットにメッセージを送信
  window.GitBook('postUserMessage', 'How do I get started?');

  // チャット履歴をクリア
  window.GitBook('clearChat');
</script>
8

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

認証されたドキュメントや条件付き読み込みの場合は、実行時にスクリプトを注入します：

<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>
9

hashtag
設定を確認する

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

hashtag
API リファレンス

hashtag
初期化

  • GitBook('init', options: { siteURL: string }, frameOptions?: { visitor?: {...} }) - サイト URL とオプションの認証アクセスでウィジェットを初期化

hashtag
ウィジェット操作

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

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

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

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

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

hashtag
ナビゲーション

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

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

hashtag
チャット

  • GitBook('postUserMessage', message: string) - チャットにメッセージを投稿

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

hashtag
設定

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

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

hashtag
設定オプション

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

hashtag
tabs

表示するタブを上書きします。デフォルトはサイトの設定です。

  • を入力してから: ('assistant' | 'docs')[]

  • オプション:

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

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

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

hashtag
actions

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

注意: 以前は次の名前でした buttons。使用するには actions を推奨します。

  • を入力してから: Array<{ icon: string, label: string, onClick: () => void }>

  • プロパティ:

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

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

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

hashtag
greeting

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

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

hashtag
suggestions

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

  • を入力してから: string[]

hashtag
tools

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

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

hashtag
ボタン

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

  • を入力してから: { label: string, icon: 'assistant' | 'sparkle' | 'help' | 'book' }

  • プロパティ:

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

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

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

      • sparkle - sparkle スパークルアイコン

      • help - circle-question ヘルプ／クエスチョンアイコン

      • book - book-open ブックアイコン

例：

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

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

初期化時に次を渡す GitBook('init', options, frameOptions)。使用されるのは Adaptive Content および 認証されたアクセス.

  • を入力してから: { token?: string, unsignedClaims?: Record<string, unknown> }

  • プロパティ:

    • token: string （任意）- 署名済みの JWT トークン

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

hashtag
よくある落とし穴

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

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

  • 認証されたドキュメントにアクセスできない – ドキュメントにサインインが必要な場合は、初期化時に必ず visitor.token を提供してください。詳細は参照してください 認証付きドキュメントでの利用.

  • CORS または CSP エラー – サイトのコンテンツセキュリティポリシーが GitBook ドメインからのスクリプトおよび iframe の読み込みを許可していることを確認してください。

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

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

最終更新

役に立ちましたか？