Embed のカスタマイズ

ウェルカムメッセージ、アクションなどを設定して、Docs Embedを製品やアプリに埋め込む際の体験をカスタマイズします

後で Docs Embed をあなたのウェブサイトまたはアプリに追加すると、サイドバーに実行可能なボタンを追加したり、文脈に応じた質問でユーザーを促す提案を追加したりして、体験をさらにカスタマイズできます。

ボタンのカスタマイズ（スタンドアロン のみ）

を使用する場合、 スタンドアロンの script タグ実装、埋め込みウィジェットを起動するボタンのラベルとアイコンをカスタマイズできます。

このボタンのカスタマイズオプションは、 スタンドアロンの script タグ実装を使用する場合にのみ利用できます。 React または Node.js/NPM パッケージ の実装では、埋め込みを起動するための独自のボタンを作成する必要があります。

window.GitBook("configure", {
  button: {
    label: "Ask",
    icon: "assistant", // 'assistant' | 'sparkle' | 'help' | 'book'
  },
});

利用可能なアイコンのオプション：

• assistant - アシスタントのアイコン（デフォルト）

• sparkle - きらめきアイコン

• help - ヘルプ/質問アイコン

• book - 本アイコン

アクションの追加

埋め込みにアクションを追加すると、UI でユーザーに追加の操作を提供できます。各アクションは、ラベル、アイコン（ Font Awesomeから）、および onClick ユーザーがそのアクションをクリックしたときに実行される action で構成されます。追加したアクションは、タブの横にサイドバーに表示されます。アクションは Docs Embed 自体を操作することも、任意のコードを実行することもできます。

window.GitBook("configure", {
  actions: [
    {
      label: "Contact Support",
      icon: "circle-question",
      onClick: () => {
        window.open("https://support.example.com", "_blank");
      },
    },
    {
      label: "Documentation",
      icon: "book",
      onClick: () => {
        window.open("https://docs.example.com", "_blank");
      },
    },
  ],
});

提案の追加

Assistant タブに提案を追加できます。これは、Assistant が読み込まれたときにユーザーが使えるクリック可能なプロンプトとして表示されます。

window.GitBook("configure", {
  suggestions: [
    "新しいアカウントの使い始め方を教えて",
    "パスワードをリセットするにはどうすればよいですか？",
    "料金プランは何ですか？",
  ],
});

挨拶の追加

Assistant タブに表示されるウェルカムメッセージをカスタマイズします：

window.GitBook("configure", {
  greeting: {
    title: "ようこそ！",
    subtitle: "今日はどのようにお手伝いできますか？",
  },
});

商標の表示または非表示

使用 trademark Docs Embed のフッターと Assistant ブランディングを含む、埋め込み UI で GitBook の商標を表示または非表示にします。

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

タブの設定

表示するタブを上書きします。デフォルトでは、埋め込みはサイトの設定に基づいてタブを表示します。

window.GitBook("configure", {
  tabs: ["assistant", "docs"], // 両方のタブを表示
  // tabs: ['assistant'], // assistant タブのみ表示
  // tabs: ['docs'], // docs タブのみ表示
});