スクリプトタグ

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

GitBook Assistant をウェブサイトやアプリに埋め込む最も簡単な方法は、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>
    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>
この方法を使うと、次の項目をカスタマイズできます：
ボタンのラベルとアイコン
ウィジェット内に表示されるタブ

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

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

を呼ぶ前に実行してください。
  ユーザーに表示される推奨プロンプト。
  'How do I get started?'

  ウィジェットの表示を制御する
  API を通じて実行時に表示と状態を制御できます。

  // ウィジェットを表示可能にする
  // ページからウィジェットを削除する

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

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

window.GitBook('close');

// 開閉を切り替える

window.GitBook('toggle');

を呼ぶ前に実行してください。
  これはウィジェットを自身の UI トリガーに接続したい場合に便利です。
  プログラムからナビゲートおよび操作する

  コードからウィジェットを操作して、ナビゲート、タブ切替、メッセージ送信ができます。
  // ウィジェット内で特定のドキュメントページを開く

  window.GitBook('navigateToPage', '/getting-started');
  // アシスタントタブに切り替える

  window.GitBook('navigateToAssistant');
  // ユーザーメッセージをアシスタントに送る
],

window.GitBook('postUserMessage', 'How do I get started?');

// 現在のチャット履歴をクリアする
window.GitBook('clearChat');
この機能の典型的な用途は次の通りです：

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

質問の事前入力（プリフィル）

を呼ぶ前に実行してください。
  フロー間で会話をリセットする
    埋め込みスクリプトを動的に読み込む
    ウィジェットを条件付きで読み込みたい場合、または実行時に認証トークンを添付する必要がある場合、スクリプトをプログラムで注入してください。
    function loadGitBookEmbed() {
      var token = "" // サイトが認証を必要とする場合はここに JWT トークンを入れてください
    var script = document.createElement('script');
    script.src = 'https://YOUR_DOCS_DOMAIN/~gitbook/embed/script.js'
      'How do I get started?'
    };
    + token ? '?jwt_token=' + encodeURIComponent(token) : ';
  }

  script.async = true;
],

script.onload = function () {

document.head.appendChild(script);

};

} loadGitBookEmbed();

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

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']- ドックスタブのみ表示する ['assistant', 'docs'] actions

設定オプション: タブと並んでサイドバーに表示されるカスタムアクションボタン。各アクションボタンはクリック時にコールバックを発火します。
注記:
- : 以前は: buttons と名付けられていました。代わりにを使用してください。 Array<{ icon: string, label: string, onClick: () => void }>
- プロパティ: buttons icon
- string: - アイコン名。任意の FontAwesome アイコン

`がサポートされます`

label

設定オプション: - ボタンのラベルテキスト

`onClick`

() => void | Promise<void>

設定オプション: - クリック時のコールバック関数

`greeting`

アシスタントタブに表示される歓迎メッセージ。 { title: string, subtitle: string } suggestions

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

`string[]`

tools

設定オプション: アシスタントを拡張するカスタム AI ツール。詳細は
注記:
- プロパティ: buttons Creating custom tools
- : 以前は: を参照してください。 Array<{ name: string, description: string, inputSchema: object, execute: Function, confirmation?: {...} }>
  - button - 埋め込みを起動するウィジェットボタンを構成します（スタンドアロンのスクリプトのみ）。これにより、ページ右下に表示されるボタンのラベルとアイコンをカスタマイズできます。
  - { label: string, icon: 'assistant' | 'sparkle' | 'help' | 'book' } - - ボタンに表示されるテキスト
  - 'assistant' | 'sparkle' | 'help' | 'book' - - ボタンに表示されるアイコン
  - assistant - アシスタントアイコン

sparkle

<script>
  window.GitBook('configure', {
    button: {
    スパークルアイコン
  }
});

help ヘルプ／クエスチョンアイコン

`book` ブックアイコン

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

設定オプション: 次で初期化する際に渡します、
注記:
- GitBook('init', options, frameOptions): buttons 。これは
- Adaptive Content: および Authenticated Access

で使用されます。

{ token?: string, unsignedClaims?: Record<string, unknown> } token （オプション）- 署名済み JWT トークン.
unsignedClaims Record<string, unknown> （オプション）- 動的式用の未署名クレーム よくある落とし穴
スクリプト URL が間違っている – 例の URL ではなく実際のドキュメント URL を使用していることを確認してください。 docs.company.com スクリプト読み込み前に GitBook を呼んでいる – API 呼び出しを.
script.onload でラップするか、スクリプトタグの後に配置してください。
認証されたドキュメントにアクセスできない – ドキュメントにサインインが必要な場合、初期化時に
visitor.token を提供する必要があります。参照： Using with authenticated docs CORS または CSP エラーが発生する場合がある。 – サイトのコンテンツセキュリティポリシーが GitBook ドメインからのスクリプトと iframe の読み込みを許可していることを確認してください。は実行してください。　（訳注：原文の意図を保持）。

最終更新 2 日前

役に立ちましたか？

こんにちは

スクリプトタグ

始める

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

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

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

確認

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

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

// 開閉を切り替える

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

document.head.appendChild(script);

};

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

- ウィジェットウィンドウを開く

ナビゲーション

チャット

設定

`GitBook('unload')`

`['assistant', 'docs']`

`がサポートされます`

`onClick`

`greeting`

`string[]`

`book` ブックアイコン

で使用されます。

こんにちは

hashtag始める

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

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

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

hashtag確認

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

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

hashtag// 開閉を切り替える

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

hashtagdocument.head.appendChild(script);

hashtag};

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

hashtag- ウィジェットウィンドウを開く

hashtagナビゲーション

hashtagチャット

hashtag設定

hashtagGitBook('unload')

hashtag['assistant', 'docs']

hashtagがサポートされます

hashtagonClick

hashtaggreeting

hashtagstring[]

hashtagbook ブックアイコン

hashtagで使用されます。

始める

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

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

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

確認

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

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

// 開閉を切り替える

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

document.head.appendChild(script);

};

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

- ウィジェットウィンドウを開く

ナビゲーション

チャット

設定

`GitBook('unload')`

`['assistant', 'docs']`

`がサポートされます`

`onClick`

`greeting`

`string[]`

`book` ブックアイコン

で使用されます。