CSS 変数を設定すると、チャット ダイアログのスタイルをカスタマイズできます。
一般的なスタイル設定
以下の CSS 変数で一般的なスタイル設定オプションを指定します。
| プロパティ | 入力ポリシー | デフォルト値 | 説明 |
|---|---|---|---|
df-messenger-font-family |
省略可 | 「Google Sans」、「Helvetica Neue」、Sans Serif | ウィジェット全体で使用するフォント ファミリー |
df-messenger-font-size |
省略可 | 14px | ウィジェット全体で使用するテキストサイズ |
df-messenger-font-color |
省略可 | #1f1f1f | ウィジェット全体で使用するテキストの色 |
df-messenger-primary-color |
省略可 | #0b57d0 | ウィジェット全体の要素（タイトルバーの背景、アクション ボタンの背景など）のメインカラー |
df-messenger-focus-color |
省略可 | #1e88e5 | 要素の周りのフォーカス リングの色 |
df-messenger-focus-color-contrast |
省略可 | 白 | 背景色を使用した親の内部の場合（タイトルバーなど）、要素の周りのフォーカス リングの色 |
df-messenger-chat-border |
省略可 | なし | ダイアログの枠線 |
df-messenger-chat-border-radius |
省略可 | 0 | ダイアログの枠線の半径 |
df-messenger-chat-bubble のスタイル設定
df-messenger-chat-bubble 要素を使用する場合は、以下の CSS 変数を指定できます。
| プロパティ | 入力ポリシー | デフォルト値 | 説明 |
|---|---|---|---|
df-messenger-chat-window-height |
省略可 | 480px | チャット ウィンドウの高さ |
df-messenger-chat-window-width |
省略可 | 320px | チャット ウィンドウの幅 |
df-messenger-chat-window-offset |
省略可 | 16px | チャットのふきだしとチャット ウィンドウ間の距離 |
df-messenger-chat-window-box-shadow |
省略可 | なし | チャット ウィンドウのボックス シャドウ |
df-messenger-chat-collapse-icon-size |
省略可 | unset | タイトルバーの閉じるボタン アイコンのサイズ |
df-messenger-chat-bubble-icon-size |
省略可 | 36px | チャットのふきだしのアイコンのサイズ |
df-messenger-chat-bubble-close-icon-size |
省略可 | 24px | チャットのふきだしを閉じるアイコンのサイズ |
df-messenger-chat-bubble-close-icon-transform-rotate |
省略可 | -90deg | チャットのふきだしを閉じるアイコンの回転。チャットを閉じると 0 度回転します |
df-messenger-chat-bubble-icon-color |
省略可 | 白 | チャットのふきだしのアイコンと閉じるアイコンの色 |
df-messenger-chat-bubble-size |
省略可 | 64px | チャットのふきだしのサイズ |
df-messenger-chat-bubble-background |
省略可 | #0b57d0 | チャットのふきだしの背景 |
df-messenger-chat-bubble-border-radius |
省略可 | 32px | チャットのふきだしの半径 |
df-messenger-chat-bubble-border |
省略可 | なし | チャットのふきだしの枠線 |
df-messenger-chat-border-minimized |
省略可 | なし | 最小化された形式でのチャットの枠線 |
df-messenger-chat-border-radius-minimized |
省略可 | 0 | 最小化された形式でのチャットの枠線の半径 |
タイトルバーのスタイル設定
タイトルバーには、以下の CSS 変数を指定できます。
| プロパティ | 入力ポリシー | デフォルト値 | 説明 |
|---|---|---|---|
df-messenger-titlebar-background |
省略可 | #0b57d0 | タイトルバーの背景 |
df-messenger-titlebar-padding |
省略可 | 0 15px | タイトルバーのパディング |
df-messenger-titlebar-border |
省略可 | なし | タイトルバーの枠線 |
df-messenger-titlebar-border-bottom |
省略可 | なし | タイトルバーの下の枠線 |
df-messenger-titlebar-title-align |
省略可 | start | タイトルバーのタイトル テキストの配置。使用できる値は start、center、end です |
df-messenger-titlebar-font-color |
省略可 | 白 | タイトルバーのテキストの色 |
df-messenger-titlebar-letter-spacing |
省略可 | normal | タイトルバーのテキストの文字間隔 |
df-messenger-titlebar-title-font-size |
省略可 | 18px | タイトルバーのタイトル テキストのサイズ |
df-messenger-titlebar-title-font-family |
省略可 | 「Google Sans」、「Helvetica Neue」、Sans Serif | タイトルバーのタイトル テキストのフォント ファミリー |
df-messenger-titlebar-title-font-weight |
省略可 | 400 | タイトルバーのタイトル テキストのフォント ウェイト |
df-messenger-titlebar-title-line-height |
省略可 | normal | タイトルバーに表示されるタイトル テキストの行の高さ |
df-messenger-titlebar-title-letter-spacing |
省略可 | normal | タイトルバーのタイトル テキストの文字間隔 |
df-messenger-titlebar-subtitle-font-color |
省略可 | 白 | タイトルバーのサブタイトル テキストの色 |
df-messenger-titlebar-subtitle-font-size |
省略可 | 18px | タイトルバーのサブタイトル テキストのサイズ |
df-messenger-titlebar-subtitle-font-family |
省略可 | 「Google Sans」、「Helvetica Neue」、Sans Serif | タイトルバーのサブタイトル テキストのフォント ファミリー |
df-messenger-titlebar-subtitle-font-weight |
省略可 | 400 | タイトルバーのサブタイトル テキストのフォント ウェイト |
df-messenger-titlebar-subtitle-line-height |
省略可 | normal | タイトルバーに表示されるサブタイトル テキストの行の高さ |
df-messenger-titlebar-subtitle-letter-spacing |
省略可 | normal | タイトルバーのサブタイトル テキストの文字間隔 |
df-messenger-titlebar-title-order |
省略可 | 行 | タイトルバーの順序要素。使用できる値は row または row-reverse です。この値は、chat-title-icon 属性が指定されている場合にのみ有効です。 |
df-messenger-titlebar-icon-width |
省略可 | 18px | タイトルバーのアイコンの幅。この値は、chat-title-icon が指定されている場合にのみ適用されます。 |
df-messenger-titlebar-icon-height |
省略可 | 18px | タイトルバーのアイコンの高さ。この値は、chat-title-icon が指定されている場合にのみ適用されます。 |
df-messenger-titlebar-icon-padding |
省略可 | 0 12px 0 0 | タイトルバーのアイコンの周りのパディング。この値は、chat-title-icon が指定されている場合にのみ適用されます。 |
チャット ウィンドウのスタイル設定
チャット ウィンドウには、以下の CSS 変数を指定できます。
| プロパティ | 入力ポリシー | デフォルト値 | 説明 |
|---|---|---|---|
df-messenger-chat-background |
省略可 | #fafafa | メッセージが表示されるエージェント ダイアログの背景 |
df-messenger-chat-padding |
省略可 | 10px | メッセージが表示されるエージェント ダイアログのパディング |
df-messenger-messagelist-border |
省略可 | なし | メッセージ リストの枠線 |
df-messenger-message-border |
省略可 | なし | エージェントのダイアログ メッセージの枠線 |
df-messenger-message-font-size |
省略可 | 14px | エージェント ダイアログ メッセージのテキストサイズ |
df-messenger-message-font-family |
省略可 | 「Google Sans」、「Helvetica Neue」、Sans Serif | エージェント ダイアログ メッセージのフォント ファミリー |
df-messenger-message-font-weight |
省略可 | normal | エージェント ダイアログ メッセージのフォントの太さ |
df-messenger-message-bot-background |
省略可 | #ecf3fe | エージェントが送信したメッセージの背景 |
df-messenger-message-bot-border |
省略可 | なし | エージェントから送信されたメッセージの枠線 |
df-messenger-message-bot-font-color |
省略可 | #1f1f1f | エージェントが送信したメッセージのテキストの色 |
df-messenger-message-bot-font-weight |
省略可 | normal | エージェントが送信したメッセージのフォントの太さ |
df-messenger-message-user-background |
省略可 | #e1e3e1 | ユーザーが送信したメッセージの背景 |
df-messenger-message-user-border |
省略可 | なし | ユーザーが送信したメッセージの枠線 |
df-messenger-message-user-font-color |
省略可 | #1f1f1f | ユーザーが送信したメッセージのテキストの色 |
df-messenger-message-user-font-weight |
省略可 | normal | ユーザーが送信したメッセージのフォントの太さ |
df-messenger-message-spacing |
省略可 | 10px | 2 つのメッセージ間のスペース |
df-messenger-message-border-radius |
省略可 | 8px | メッセージの枠線の半径。すべての隅に適用されます |
df-messenger-message-bot-border-top-left-radius |
省略可 | 8px | エージェント メッセージの左上の枠線の半径。一般的な半径をオーバーライドします |
df-messenger-message-bot-border-top-right-radius |
省略可 | 8px | エージェント メッセージの右上の枠線の半径。一般的な半径をオーバーライドします |
df-messenger-message-bot-border-bottom-left-radius |
省略可 | 8px | エージェント メッセージの左下の枠線の半径。一般的な半径をオーバーライドします |
df-messenger-message-bot-border-bottom-right-radius |
省略可 | 8px | エージェント メッセージの右下の枠線の半径。一般的な半径をオーバーライドします |
df-messenger-message-user-border-top-left-radius |
省略可 | 8px | ユーザー メッセージの左上の枠線の半径。一般的な半径をオーバーライドします |
df-messenger-message-user-border-top-right-radius |
省略可 | 8px | ユーザー メッセージの右上の枠線の半径。一般的な半径をオーバーライドします |
df-messenger-message-user-border-bottom-left-radius |
省略可 | 8px | ユーザー メッセージの左下の枠線の半径。一般的な半径をオーバーライドします |
df-messenger-message-user-border-bottom-right-radius |
省略可 | 8px | ユーザー メッセージの右下の枠線の半径。一般的な半径をオーバーライドします |
df-messenger-message-stack-spacing |
省略可 | 10px | 2 つの連続したメッセージの間隔 |
df-messenger-message-bot-stack-border-top-left-radius |
省略可 | 8px | 連続するエージェント メッセージの左上の枠線の半径。エージェントの左上の半径をオーバーライドします |
df-messenger-message-bot-stack-border-top-right-radius |
省略可 | 8px | 連続するエージェント メッセージの右上の枠線の半径。エージェントの右上の半径をオーバーライドします |
df-messenger-message-bot-stack-border-bottom-left-radius |
省略可 | 8px | 連続するエージェント メッセージの左下の枠線の半径。エージェントの左下の半径をオーバーライドします |
df-messenger-message-bot-stack-border-bottom-right-radius |
省略可 | 8px | 連続するエージェント メッセージの右下の枠線の半径。エージェントの右下の半径をオーバーライドします |
df-messenger-message-user-stack-border-top-left-radius |
省略可 | 8px | 連続するユーザー メッセージの左上の枠線の半径。ユーザーの左上の半径をオーバーライドします |
df-messenger-message-user-stack-border-top-right-radius |
省略可 | 8px | 連続するユーザー メッセージの右上の枠線の半径。ユーザーの右上の半径をオーバーライドします |
df-messenger-message-user-stack-border-bottom-left-radius |
省略可 | 8px | 連続するユーザー メッセージの左下の枠線の半径。ユーザーの左下の半径をオーバーライドします |
df-messenger-message-user-stack-border-bottom-right-radius |
省略可 | 8px | 連続するユーザー メッセージの右下の枠線の半径。ユーザーの右下の半径をオーバーライドします |
df-messenger-message-user-writing-image-width |
省略可 | 24px | エージェントの書き込み中に表示される画像の幅（bot-writing-image が設定されている場合にのみ有効）。 |
df-messenger-message-bot-writing-image-height |
省略可 | 24px | エージェントの書き込み中に表示される画像の高さ（bot-writing-image が設定されている場合にのみ有効） |
df-messenger-message-bot-writing-font-color |
省略可 | #1f1f1f | エージェントの書き込み中に表示されるテキストの色 |
df-messenger-message-bot-writing-font-weight |
省略可 | normal | エージェントの書き込み中に表示されるテキストのフォントの太さ |
df-messenger-message-bot-writing-font-size |
省略可 | 14px | エージェントの書き込み中に表示されるテキストのサイズ |
df-messenger-message-bot-writing-border |
省略可 | なし | エージェントの書き込み中に表示されるメッセージの枠線 |
df-messenger-message-bot-writing-background |
省略可 | #ecf3fe | エージェントの書き込み中に表示されるメッセージの背景 |
df-messenger-message-bot-writing-padding |
省略可 | 12px | エージェントの書き込み中に表示されるメッセージのパディング |
df-messenger-message-bot-writing-spacing |
省略可 | 10px | エージェントの書き込み中に表示されるメッセージと前のメッセージの間のスペース |
df-messenger-chat-scroll-button-enabled-display |
省略可 | なし | [下に移動] ボタンの表示を定義します。ボタンを有効にするには flex に設定します |
df-messenger-chat-scroll-button-align |
省略可 | center | [下に移動] ボタンの配置。使用可能な値は flex-start、center、flex-end などです |
df-messenger-chat-scroll-button-container-padding |
省略可 | 8px | [下に移動] ボタンの周りのコンテナのパディング |
df-messenger-chat-scroll-button-text-display |
省略可 | インライン | [下に移動] ボタンのアイコン横のテキスト表示。テキストを非表示にするには none を使用します |
df-messenger-chat-scroll-button-font-size |
省略可 | 14px | [下に移動] ボタンのテキストサイズ |
df-messenger-chat-scroll-button-font-color |
省略可 | 白 | [下に移動] ボタンのテキストの色 |
df-messenger-chat-scroll-button-background |
省略可 | #0b57d0 | [下に移動] ボタンの背景 |
df-messenger-chat-scroll-button-border-radius |
省略可 | 999px | [下に移動] ボタンの枠線の半径 |
df-messenger-chat-messagelist-scroll-shadow-background |
省略可 | 円形グラデーション（50% 100% で最も外側、rgba(0,0,0,.2)、透明）の下部 |
リストが一番下にスクロールされていない場合にメッセージ リストの一番下に影が表示されます。無効にするには none に設定します。 |
アクターの画像のスタイル設定
アクターの画像は、ボットまたはアクターのメッセージと一緒に表示される画像です。これらのアクター画像には、次の CSS 変数を指定できます。
| プロパティ | 入力ポリシー | デフォルト値 | 説明 |
|---|---|---|---|
df-messenger-message-actor-spacing |
省略可 | 16px | アクター画像とメッセージ間の距離 |
df-messenger-message-bot-actor-order |
省略可 | 行 | アクター画像とメッセージの順序。row を使用すると、左側にアクターの画像、右側にメッセージが表示されます。row-reverse を使用すると、右側にアクターの画像、左側にメッセージが表示されます。 |
df-messenger-message-user-actor-order |
省略可 | row-reverse | アクター画像とメッセージの順序。row-reverse を使用すると、アクターの画像が右側に、メッセージが左側に表示されます。row を使用すると、アクターの画像が左側に、メッセージが右側に表示されます。 |
df-messenger-message-actor-direction |
省略可 | 列 | df-messenger-message-bot-actor-order と df-messenger-message-user-actor-order の逆にする必要があります。row ベースの場合は column を、column ベースの場合は row を使用します。 |
df-messenger-message-actor-align |
省略可 | flex-start | メッセージに対するアクターの配置。flex-start を使用するとアクターの画像が上部に、center を使用するとアクターの画像が中央に、flex-end を使用するとアクターの画像が下部に表示されます。 |
df-messenger-message-actor-border-radius |
省略可 | 999px | アクター画像の枠線の半径 |
df-messenger-message-actor-padding |
省略可 | 8px | アクター画像のパディング |
df-messenger-message-actor-image-size |
省略可 | 24px | アクター画像のサイズ |
df-messenger-message-bot-actor-background |
省略可 | 白 | エージェントのアクター画像の背景 |
df-messenger-message-bot-actor-border |
省略可 | なし | エージェントのアクター画像の枠線 |
df-messenger-message-bot-actor-offset |
省略可 | 0 | エージェントのアクター画像を移動するオフセット |
df-messenger-message-user-actor-background |
省略可 | 白 | ユーザーのアクター画像の背景 |
df-messenger-message-user-actor-border |
省略可 | なし | ユーザーのアクター画像の枠線 |
df-messenger-message-user-actor-offset |
省略可 | 0 | ユーザーのアクター画像を移動するためのオフセット |
ユーザー入力のスタイル設定
ユーザー入力には、以下の CSS 変数を指定できます。
| プロパティ | 入力ポリシー | デフォルト値 | 説明 |
|---|---|---|---|
df-messenger-send-icon-color |
省略可 | #0b57d0 | ユーザー入力の「送信」アイコンの色 |
df-messenger-send-icon-color-hover |
省略可 | #0b57d0 | カーソルを合わせたときのユーザー入力の「送信」アイコンの色 |
df-messenger-send-icon-color-active |
省略可 | #0b57d0 | テキストを送信可能なときにユーザー入力に表示される「送信」アイコンの色 |
df-messenger-send-icon-offset-x |
省略可 | 0 | ユーザー入力の「送信」アイコンの垂直オフセット |
df-messenger-send-icon-offset-y |
省略可 | -4px | ユーザー入力の「送信」アイコンの水平オフセット |
df-messenger-input-background |
省略可 | 白 | ユーザー入力の背景 |
df-messenger-input-padding |
省略可 | 8px | ユーザー入力フィールド（送信メッセージ ボタンを含む）とコンテナ間の全体的なパディング。 |
df-messenger-input-inner-padding |
省略可 | 0px 48px 0px 0 | ユーザー入力フィールド（送信メッセージ ボタンは含まない）とコンテナの間の内部パディング。 |
df-messenger-input-border |
省略可 | なし | ユーザー入力の枠線 |
df-messenger-input-border-top |
省略可 | 1px solid #e0e0e0 | ユーザー入力の上の枠線 |
df-messenger-input-border-bottom |
省略可 | なし | ユーザー入力のテキスト フィールドの下の枠線 |
df-messenger-input-font-family |
省略可 | 「Google Sans」、「Helvetica Neue」、Sans Serif | ユーザー入力のフォント ファミリー |
df-messenger-input-font-color |
省略可 | #1f1f1f | ユーザー入力のテキストの色 |
df-messenger-input-font-size |
省略可 | 14px | ユーザー入力のテキストサイズ |
df-messenger-input-font-weight |
省略可 | normal | ユーザー入力のフォントの太さ |
df-messenger-input-box-border |
省略可 | なし | ユーザー入力ボックスの枠線 |
df-messenger-input-box-focus-border |
省略可 | なし | フォーカスされているユーザー入力ボックスの枠線 |
df-messenger-input-box-border-radius |
省略可 | 0 | ユーザー入力ボックスの枠線の半径 |
df-messenger-input-box-padding |
省略可 | 12px 0 | ユーザー入力ボックスのパディング |
df-messenger-input-box-focus-padding |
省略可 | 12px 0 | フォーカスされているユーザー入力ボックスのパディング |
df-messenger-input-gutter |
省略可 | 安定 | ユーザー入力のスクロールバー ガター |
df-messenger-input-info-font-size |
省略可 | 14px | ユーザー入力の情報メッセージのテキストサイズ |
df-messenger-input-info-font-weight |
省略可 | normal | ユーザー入力の情報メッセージのフォントの太さ |
df-messenger-input-info-padding |
省略可 | 14px 16px | ユーザー入力の情報メッセージのパディング |
df-messenger-input-info-line-height |
省略可 | 20px | ユーザー入力の情報メッセージの行の高さ |
df-messenger-input-long-text-warning-display |
省略可 | なし | block に設定すると、入力が 256 文字を超えると警告メッセージが表示されます。max-query-length 属性の値の方が高い（例: 無効である）場合にのみ有効になります。その他のドキュメント。 |
df-messenger-input-warning-background |
省略可 | #fef7e0 | ユーザー入力の警告メッセージの背景 |
df-messenger-input-warning-color |
省略可 | #410e0b | ユーザー入力の警告メッセージのテキストの色 |
df-messenger-input-warning-icon-color |
省略可 | #e37400 | ユーザー入力の警告メッセージのアイコンの色 |
df-messenger-input-error-background |
省略可 | #f9dedc | ユーザー入力のエラー メッセージの背景 |
df-messenger-input-error-color |
省略可 | #410e0b | ユーザー入力のエラー メッセージのテキストの色 |
df-messenger-input-error-icon-color |
省略可 | #b3261e | ユーザー入力の警告メッセージのアイコンの色 |
認証オーバーレイのスタイル設定
認証された設定を使用する場合は、オーバーレイに以下の CSS 変数を指定できます。
| プロパティ | 入力ポリシー | デフォルト値 | 説明 |
|---|---|---|---|
df-messenger-auth-background |
省略可 | rgba(204, 204, 204, .8) | 認証が表示される場合のエージェント ダイアログの背景 |
df-messenger-auth-button-background |
省略可 | #0b57d0 | 認証ボタンの背景 |
df-messenger-auth-button-font-family |
省略可 | 「Google Sans」、「Helvetica Neue」、Sans Serif | 認証ボタンのフォント ファミリー |
df-messenger-auth-button-font-color |
省略可 | 白 | 認証ボタンのテキストの色 |
df-messenger-auth-button-font-size |
省略可 | 14px | 認証ボタンのテキストサイズ |
df-messenger-auth-button-border |
省略可 | なし | 認証ボタンの枠線 |
df-messenger-auth-button-border-radius |
省略可 | 8px | 認証ボタンの枠線の半径 |
フィードバックのスタイル
[回答のフィードバック] 機能が有効になっている場合、フィードバック コントロールに次の CSS 変数を指定できます。
| プロパティ | 入力ポリシー | デフォルト値 | 説明 |
|---|---|---|---|
df-messenger-message-feedback-icon-distance |
省略可 | 8px | 高評価ボタンと低評価ボタンの間の距離 |
df-messenger-message-feedback-icon-font-color |
省略可 | #444746 | 高評価ボタンと低評価ボタンの色 |
df-messenger-message-feedback-icon-font-color-active |
省略可 | #444746 | 有効な場合の高評価ボタンと低評価ボタンの色 |
df-messenger-message-feedback-icon-border |
省略可 | なし | 高評価ボタンと低評価ボタンの枠線 |
df-messenger-message-feedback-icon-border-radius |
省略可 | 0 | 高評価ボタンと低評価ボタンの枠線の半径 |
df-messenger-message-feedback-icon-background |
省略可 | なし | 高評価ボタンと低評価ボタンの背景 |
df-messenger-message-feedback-icon-background-hover |
省略可 | なし | カーソルを合わせたときに高評価ボタンと低評価ボタンの背景 |
df-messenger-message-feedback-icon-padding |
省略可 | 0 | 高評価ボタンと低評価ボタンのパディング |
df-messenger-message-rich-feedback-spacing |
省略可 | 10px | 豊富なフィードバック内の要素のスペース |
df-messenger-message-rich-feedback-padding |
省略可 | 0 | 豊富なフィードバックのパディング |
df-messenger-message-rich-feedback-background |
省略可 | なし | 多彩なフィードバックの背景 |
df-messenger-message-rich-feedback-border-radius |
省略可 | 0 | 豊富なフィードバックの枠線の半径 |
df-messenger-message-rich-feedback-border |
省略可 | なし | 豊富なフィードバックの枠線 |
df-messenger-rich-feedback-offset-left |
省略可 | 0 | 左側のオフセット |