Embedのカスタマイズ

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

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

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

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

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

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

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

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

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

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

• book - ブックアイコン

アクションの追加

埋め込みにアクションを追加すると、UIでユーザーに追加の操作を提供できます。各アクションはラベル、（ を訪れて利用可能なさまざまなアイコンを確認してください。からの）アイコン、および 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: [
    "新しいアカウントの使い始めを手伝ってください",
    "パスワードをリセットするにはどうすればよいですか？",
    "料金プランはどのようなものですか？",
  ],
});

挨拶の追加

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

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

タブの設定

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

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