Embed のカスタマイズ

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

〜の後で Docs Embed をあなたのウェブサイトやアプリに追加すると、サイドバーに実行可能なボタンを追加したり、ユーザーにコンテキストに沿った質問を促す提案を表示したりするなど、体験をさらにカスタマイズできます。

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

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

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

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

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

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

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

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

• book - 本のアイコン

アクションの追加

埋め込みにアクションを追加すると、UI 内でユーザーに追加の操作を提供できます。各アクションはラベル、（ Font Awesomeからの）アイコン、および onClick —ユーザーがアクションをクリックしたときに実行されるアクション—で構成されます。追加したアクションはタブと並んでサイドバーに表示されます。アクションは 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: [
    "Help me get started with my new account",
    "How do I reset my password?",
    "What are your pricing plans?",
  ],
});

挨拶の追加

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

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

商標の表示または非表示

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

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

タブの設定

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

window.GitBook("configure", {
  tabs: ["assistant", "docs"], // 両方のタブを表示
  // tabs: ['assistant'], // アシスタントタブのみを表示
  // tabs: ['docs'], // ドキュメントタブのみを表示
});