高度なカスタマイズ
早期アクセス
この機能は早期アクセスとしてリリースされています。
高度なカスタマイズを使用すると、テーマごとにLive Chatウィジェットのデザインと動作を完全に制御できます。各テーマには、複数のカスタマイズ機能を含めることができます。
- スタイル: CSS 変数をオーバーライドして、ウィジェット要素の色、寸法、間隔、および可視性を変更します。
- フォント: ブランドのタイポグラフィに合わせてカスタム Web フォント (Google Fonts、Adobe Fonts、またはセルフホスト型) を読み込みます。
各機能は、JSON のテーマ オブジェクト内で構成されます。
高度なカスタマイズを有効にすると、set_theme SDK コマンドを使用して、実行時にウィジェットの外観を変更できます。
高度なカスタマイズを有効にするには:
- ウィジェットの設定ページに移動します。
- 高度なカスタマイズ → テーマ セクションを見つけて、固有のテーマ を有効にします。
カスタマイズ構成構造
テーマは、次の構造を持つ JSON オブジェクトを使用して定義されます。
{
"default": {
"styles": {
// CSS variable overrides
},
"fonts": {
"fontFaceUrl": "https://fonts.googleapis.com/css2?family=Inter&display=swap",
"fontFamily": "Inter"
}
},
"my-theme": {
"styles": {
// CSS variable overrides
}
}
}
第 1 レベルのキー (この場合は default と my-theme) は、テーマの名前です。これらの名前は set_theme コマンドの引数として使用します。
各テーマオブジェクトには、次のものを含めることができます。
- スタイル: CSS 変数のキーと値のペア。オーバーライドする変数のみを指定します。
- フォント: カスタムフォント構成。存在する場合は、fontFaceUrl と fontFamily の両方が必要です。
テーマ内のすべてのプロパティはオプションです。Fonts オブジェクトのないテーマは、組み込みのデフォルトとして Roboto を使用します。
default theme is always required.以下は、実際の設定例です。
{
"default": {
"styles": {
"lc-header-container-background-color": "#4169E1",
"lc-chat-message-user-bubble-background-color": "#4169E1",
"lc-chat-message-user-bubble-text-color": "#FFFFFF"
},
"fonts": {
"fontFaceUrl": "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
"fontFamily": "Inter"
}
},
"dark": {
"styles": {
"lc-chat-background-color": "#181A20",
"lc-header-container-background-color": "#3552B3"
}
}
}
テーマの設定
Live Chatウィジェットに特定のテーマを適用するには、set_theme SDK コマンドを使用します。
このコマンドは、ウィジェットを初期化する前に呼び出すか、ウィジェットが既に適用されたテーマでレンダリングするか、ウィジェットが読み込まれてテーマがすぐに更新される後に呼び出すことができます。
エラー(たとえば、無効なJSON構造や存在しないテーマの使用など)が発生した場合、ウィジェットは以前に設定されたテーマを保持するか、デフォルトのCSS変数値に戻します。
default theme, you do not need to call the set_theme command. The default theme is automatically applied to a widget with advanced customization.スタイル
Live Chatウィジェットの外観は、サポートされている一連の CSS 変数 (opens in a new tab) を使用して CSS プロパティを調整することでカスタマイズできます。これにより、背景色、寸法、特定のフィーチャの表示設定などの要素を簡単に変更できます。
サポートされている CSS 変数
サポートされているすべての CSS 変数の名前は、構造化されたモジュール方式でスタイルを編成する atomic design (opens in a new tab) 方法論に従います。
各 CSS 変数は、次のパターンに基づいて宣言されます。
lc-{section}-{organism}-{molecule}-{atom}
lc- Live Chat を示します。section- ウィジェットの大きな部分(ヘッダー、チャット、フッターなど)を指します。organism- セクション内の重要なコンポーネントまたは領域 (フォーム、カルーセル、スレッド アイテムなど) に対応します。molecule- 生物内の特定のグループ(ヘッダータイトル、アバター、バブルなど)を表します。atom- 影響を受ける最小のビジュアル エレメント (背景色、パディング、境界線の半径など)。
以下に、現在サポートされているすべてのCSS変数の包括的なリストと、その名前、影響を受けるスタイル、およびデフォルト値を示します。
全般
lc-brand-background-color - ウィジェット構成ページの [テーマ] で選択した色を表します。原色は、他の CSS 変数によってデフォルト値として使用されます (デフォルト: ウィジェット設定ページで設定された値)
lc-brand-text-color - ウィジェット設定ページの [テーマ] で選択した色を表します。プライマリテキストの色は、他のCSS変数によってデフォルト値として使用されます(デフォルト:ウィジェット設定ページで設定された値)
lc-chat-background-color - ウィジェット設定ページの [テーマ] で選択した色を表します。背景色は、他の CSS 変数によってデフォルト値として使用されます (デフォルト: ウィジェット設定ページで設定された値)
lc-focus-outline-color - フォーカスアウトラインに選択された色を表します(デフォルト: #5d72c2)
lc-focus-outline - 要素のフォーカスアウトラインを表します (デフォルト: 2px solid $lc-focus-outline-color)
変数 lc-focus-outline-color と lc-focus-outline は、アクセシビリティサポートにリンクされています。変更は慎重に行ってください。アウトラインを無効にするには、テーマ設定で "lc-focus-outline": "none" を設定します。
lc-focus-outline変数を使用して、特定のクライアントで必要な場合にフォーカスアウトラインを無効にします。この設定は、アクセシビリティ標準に準拠していないため、一般的な使用にはお勧めしません。
コンテナ
lc-widget-wrapper-loading-background-color - コンテナ読み込みウィジェットの背景色を設定します (デフォルト: lc-chat-background-color)
lc-widget-wrapper-loading-spinner-color - ウィジェットをロードしているコンテナ内のスピナーの色を設定します (デフォルト: lc-brand-background-color)
lc-widget-wrapper-width - ウィジェットラッパーの幅を設定します (デフォルト: 360px)
lc-widget-wrapper-height - ウィジェットラッパーの高さを設定します (デフォルト: calc(100vh - 120px))
lc-widget-wrapper-max-height - ウィジェットラッパーの最大高さを設定します (デフォルト: 640px)
lc-widget-wrapper-border-radius - ウィジェットラッパーの境界線の半径を設定します (デフォルト: 8px)
lc-widget-wrapper-box-shadow - ウィジェットラッパーのボックスの影を設定します (デフォルト: rgba(0, 0, 0, 0.25) 0 4px 16px)
lc-widget-wrapper-y-position - ウィジェットラッパーの垂直位置を設定します(デフォルト:100px)
lc-widget-wrapper-x-position - ウィジェットラッパーの水平位置を設定します (デフォルト: 20px)
lc-widget-button-width - ウィジェットボタンの幅を設定します(デフォルト:60px)
lc-widget-button-height - ウィジェットボタンの高さを設定します (デフォルト: 60px)
lc-widget-button-position-y - ウィジェットボタンの垂直位置を設定します(デフォルト:20px)
lc-widget-button-position-x - ウィジェットボタンの水平位置を設定します(デフォルト:20px)
lc-widget-button-background-color - ウィジェットボタンの背景色を設定します (デフォルト: lc-brand-background-color)
lc-widget-button-border-radius - ウィジェットボタンの境界線の半径を設定します(デフォルト:50%)
lc-widget-button-box-shadow - ウィジェットボタンのボックスの影を設定します (デフォルト: rgba(0, 0, 0, 0.25) 0 4px 16px)
lc-widget-button-close-icon-color - ウィジェットボタンの閉じるアイコンの色を設定します(デフォルト:lc-brand-text-color)
lc-widget-unread-messages-counter-width - 未読メッセージカウンターの幅を設定します(デフォルト:23px)
lc-widget-unread-messages-counter-height - 未読メッセージカウンターの高さを設定します(デフォルト:23px)
lc-widget-unread-messages-counter-top - 未読メッセージカウンタの一番上の位置を設定します(デフォルト:-3px)
lc-widget-unread-messages-counter-right - 未読メッセージカウンタの正しい位置を設定します(デフォルト:-4px)
lc-widget-unread-messages-counter-color - 未読メッセージカウンタの色を設定します(デフォルト:lc-brand-text-color)
lc-widget-unread-messages-counter-background-color - 未読メッセージカウンタの背景色を設定します(デフォルト:#e0283e)
lc-widget-unread-messages-counter-border-radius - 未読メッセージカウンターの境界線の半径を設定します(デフォルト:50%)
ヘッダ
lc-header-container-height - ウィジェットヘッダーの高さを設定します(デフォルト:80px)
lc-header-container-padding - 個々のヘッダー要素からのパディングを設定します (デフォルト: 20px)
lc-header-container-background-color - ウィジェットヘッダーの背景色を設定します (デフォルト: lc-brand-background-color)
lc-header-container-border-bottom - ウィジェットヘッダーの下枠のプロパティを設定します(デフォルト:なし)
lc-header-container-item-gap - ヘッダー要素(ナビゲーションボタン、タイトル、アバター、デフォルト:10px)間のギャップを設定します
lc-header-thread-list-nav-bar-color - マルチスレッドウィジェットのスレッドリストに移動するボタンアイコンの色を設定します(デフォルト:lc-brand-text-color)
lc-header-logo-width - ウィジェットのロゴの幅を設定します (デフォルト: 40px)
lc-header-logo-height - ウィジェットのロゴの高さを設定します(デフォルト:40px)
lc-header-logo-margin - ウィジェットのロゴの余白を設定します (デフォルト: (0px 0px))
lc-header-logo-border-radius - ウィジェットのロゴの境界線の半径を設定します(デフォルト:50%)
lc-header-title-color - ウィジェットタイトルのテキストの色を設定します (デフォルト: lc-brand-text-color)
lc-header-title-font-size - ウィジェットタイトルのフォントサイズを設定します(デフォルト:16px)
lc-header-title-font-weight - ウィジェットタイトルのフォントの太さを設定します(デフォルト:太字)
lc-header-close-button-visibility - ヘッダーに [閉じる] ボタンがある場合、その可視性を設定します。デフォルトでは、モバイルサイズの画面にのみ表示されます(デフォルト:非表示)
lc-header-close-button-width - 閉じるボタンの幅を設定します(デフォルト:40px)
lc-header-close-button-height - 閉じるボタンの高さを設定します(デフォルト:40px)
lc-header-close-button-color - 閉じるボタンのアイコンの色を設定します (デフォルト: lc-brand-text-color)
チャット
lc-chat-message-bubble-margin - メッセージバブルの周りの余白を設定します (デフォルト: (0, 0, 8px, 0))
lc-chat-message-bubble-padding - メッセージバブルの周りのパディングを設定します (デフォルト: (12px 20px))
lc-chat-message-bubble-text-color - メッセージバブル内のテキストの色を設定します。これは、エージェント/ユーザーのバブルテキストの色が定義されていない場合に使用されます
'lc-chat-message-ユーザー-バブル-テキストカラー' - ユーザーメッセージバブル内のテキストの色を設定します(デフォルト:lc-ブランド-テキストカラー)
'lc-チャット-メッセージ-ユーザー-バブル-背景色' - ユーザーメッセージバブルの背景色を設定します(デフォルト:lc-ブランド-背景色)
'lc-チャット-メッセージ-ユーザー-バブル-ボーダー半径' - ユーザーメッセージバブルの境界線の半径を設定します(デフォルト:(8px 2px 8px 8px))
lc-chat-message-agent-bubble-text-color - エージェントメッセージバブルのテキストの色を設定します(デフォルト:#000)
lc-chat-message-agent-bubble-background-color - エージェントメッセージバブルの背景色を設定します(デフォルト:#f7f7f7)
lc-chat-message-agent-bubble-border-radius - ユーザーメッセージバブルの境界線半径を設定します(デフォルト:(2px 8px 8px 8px 8px))
lc-chat-message-bubble-send-time-color - 最初のメッセージバブルの周囲の余白を設定します (lc-chat-message-bubble-margin を上書きします) (デフォルト: 0, 0, 4px, 0)
lc-chat-message-bubble-middle-margin - 中央のメッセージバブルの周りの余白を設定します (lc-chat-message-bubble-margin を上書きします) (デフォルト: 0, 0, 4px, 0)
lc-chat-message-bubble-last-margin - 最後のメッセージバブルの周りのマージンを設定します (lc-chat-message-bubble-margin を上書きします) (デフォルト: 0, 0, 4px, 0)
lc-chat-message-bubble-first-margin - メッセージバブルの下の送信時刻の色を設定します (デフォルト: #737376)
lc-chat-message-bubble-agent-name-color - メッセージバブルの横のエージェント名の色を設定します(デフォルト:#737376)
lc-chat-message-bubble-resend-button-color - メッセージが正常に送信されなかった場合の [再送信] ボタンの色を設定します (デフォルト: lc-brand-text-color)
lc-chat-agent-typing-indicator-first-color - 「エージェントタイピング」インジケーターアニメーションの最初の色の色を設定します(デフォルト:#d8d8d8)
lc-chat-agent-typing-indicator-second-color - 「エージェントタイピング」インジケーターアニメーションの2番目の色の色を設定します(デフォルト:#b0b0b0)
lc-chat-agent-typing-indicator-circle-color - 「エージェントタイピング」インジケーターアニメーションの円の色を設定します(デフォルト:#b0b0b0)
lc-chat-agent-avatar-name-text-color - アバターのエージェント名テキストの色を設定します(デフォルト:#3d5869)
lc-chat-agent-avatar-name-background-color - アバターのエージェント名の背景の色を設定します(デフォルト:#f7f7f7)
lc-chat-time-divider-text-color - タイムディバイダーテキストの色を設定します(デフォルト:#979797)
lc-chat-carousel-background-color - カルーセルの背景色を設定します (デフォルト: none)
lc-chat-carousel-message-border-radius - カルーセルメッセージアイテムの境界線の半径を設定します(デフォルト:4px)
lc-chat-carousel-message-background-color - カルーセルメッセージアイテムの背景色を設定します(デフォルト:#F7F7F7)
lc-chat-quickreply-button-background-color - クイックリプライボタンの背景色を設定します(デフォルト:カラーミックス(sRGBでは、lc-ブランド背景色10%、透明))
lc-chat-quickreply-button-background-color-hover - カーソルを合わせたときのクイックリプライボタンの背景色を設定します(デフォルト:lc-ブランド背景色)
lc-chat-quickreply-button-border - クイックリプライボタンの境界線プロパティを設定します (デフォルト: 1px solid lc-brand-background-color)
lc-chat-quickreply-button-border-hover - カーソルを合わせたときのクイックリプライボタンの境界線プロパティを設定します(デフォルト:lc-chat-quickreply-button-border)
lc-chat-quickreply-button-border-radius - クイックリプライボタンの境界線の半径を設定します(デフォルト:4px)
lc-chat-quickreply-button-color - クイックリプライボタンのテキストの色を設定します(デフォルト:lc-ブランド-背景色-暗い)
lc-chat-quickreply-button-color-hover - カーソルを合わせたときのクイックリプライボタンのテキストの色を設定します(デフォルト:lc-ブランド-テキストカラー)
lc-chat-scrollbar-background-color - スクロールバーの色を設定します (デフォルト: inherit)
lc-chat-scrollbar-background-color-hover - カーソルを合わせたときのスクロールバーの色を設定します(デフォルト:lc-chat-scrollbar-background-color)
lc-chat-scrollbar-border - スクロールバーの境界線プロパティを設定します (デフォルト: 5px solid transparent
lc-chat-scrollbar-border-hover - カーソルを合わせたときのスクロールバーの境界線プロパティを設定します (デフォルト: lc-chat-scrollbar-border)
lc-chat-scrollbar-border-radius - スクロールバーの境界線の半径を設定します(デフォルト:16px)
lc-chat-scrollbar-box-shadow - スクロールバーのボックスの影を設定します (デフォルト: inset 0 0 100px 100px rgba(0, 0, 0, 0.3))
lc-chat-scrollbar-box-shadow-hover - カーソルを合わせたときのスクロールバーのボックスの影を設定します (デフォルト: lc-chat-scrollbar-box-shadow)
lc-chat-scrollbar-width - スクロールバーの幅を設定します (デフォルト: 16px)
lc-chat-loading-spinner-fill-color - ローディングスピナーの塗りつぶし色を設定します(デフォルト:lc-brand-text-color)
lc-chat-loading-spinner-stroke-color - ローディングスピナーのストロークの色を設定します (デフォルト: lc-brand-background-color)
フッター
lc-footer-container-background-color - ウィジェットフッターの背景色を設定します (デフォルト: lc-chat-background-color)
lc-footer-start-chat-button-background-color - マルチスレッドウィジェットで使用される Start New Chat ボタンの背景色を設定します (デフォルト: lc-brand-background-color)
lc-footer-start-chat-button-color - マルチスレッドウィジェットで使用される Start New Chat ボタンのテキストの色を設定します (デフォルト: lc-brand-text-color)
lc-footer-start-chat-text-color - 会話が閉じられたときなど、Start New Chatボタンが表示される理由を説明する情報テキストの色を設定します(デフォルト:#545454)
lc-footer-attachment-icon-hover-background-color - カーソルを合わせたときの添付ファイルボタンの背景色を設定します(デフォルト:#f5f5f5)
lc-footer-attachment-icon-color - 添付ファイルアイコンの色を設定します(デフォルト:#B4B4B4)
lc-footer-attachment-icon-selected-color - ユーザーが送信する添付ファイルを選択した後の添付ファイルアイコンの色を設定します(デフォルト:lc-brand-background-color)
lc-footer-attachment-background-color - ユーザーが送信する準備ができている添付ファイルを表すコンポーネントの背景色を設定します(デフォルト:lc-ブランド-背景色)
lc-footer-attachment-color - ユーザーが送信する準備ができている添付ファイルを表すコンポーネントのテキストの色を設定します(デフォルト:lc-ブランド-テキスト-色)
lc-footer-send-button-color - [メッセージの送信] ボタンの色を設定します (デフォルト: lc-brand-background-color)。
lc-footer-send-button-disabled-color - メッセージ入力が空の場合など、無効になっている [メッセージの送信] ボタンの色を設定します (デフォルト: #B4B4B4)
lc-footer-emoji-picker-icon-hover-background-color - 絵文字ピッカーボタンにカーソルを合わせたときの背景色を設定します(デフォルト:#f5f5f5)
lc-footer-emoji-picker-icon-color - 絵文字ピッカーの色を設定します(デフォルト:#72716F)
lc-footer-emoji-picker-icon-selected-color - 絵文字ピッカーモーダルが開いているときの絵文字ピッカーの色を設定します(デフォルト:lc-brand-background-color)
lc-footer-emoji-picker-color - 絵文字ピッカーメニューのテキストの色を設定します(デフォルト:#222427)
lc-footer-emoji-picker-border-color - 絵文字ピッカーメニューの境界線の色を設定します(デフォルト:#d9d9d9)
lc-footer-emoji-picker-background-color - 絵文字ピッカーメニューの背景色を設定します(デフォルト:lc-chat-background-color)
lc-footer-emoji-picker-search-color - 絵文字検索コンポーネント内のテキストの検索色を設定します (デフォルト: lc-footer-emoji-picker-color)
lc-footer-emoji-picker-search-border-color - 絵文字検索コンポーネントの境界線の色を設定します (デフォルト: lc-footer-emoji-picker-border-color)
lc-footer-emoji-picker-search-background-color - 絵文字検索コンポーネントの背景色を設定します (デフォルト: lc-footer-emoji-picker-background-color)
lc-footer-emoji-picker-search-icon-color - 絵文字検索コンポーネントの検索アイコンの色を設定します(デフォルト: lc-footer-emoji-picker-color)
lc-footer-emoji-picker-search-no-result-color - 検索パラメータ内に絵文字が見つからなかったことを示す情報テキストの色を設定します(デフォルト:#B4B4B4)
lc-footer-emoji-hover-background-color - 現在ホバーされているピッカーメニューの絵文字の背景色を設定します(デフォルト:#f5f5f5)
lc-footer-start-chat-button-border-radius - 'Start new chat' ボタンの境界線の半径を設定します (デフォルト: 4px)
lc-footer-container-padding - ウィジェットのフッターのパディングを設定します (デフォルト: 10px 10px)
lc-footer-container-margin - ウィジェットのフッターの余白を設定します (デフォルト: 0)
lc-footer-container-border-top - ウィジェットフッターの上枠を設定します (デフォルト: solid 1px rgba(0, 0, 0, 0.1))
lc-footer-input-container-background-color - ウィジェットフッターの入力コンテナの背景色を設定します(デフォルト:lc-chat-background-color)
lc-footer-input-container-padding - ウィジェットフッターの入力コンテナのパディングを設定します(デフォルト:0)
lc-footer-input-container-margin - ウィジェットフッターの入力コンテナの余白を設定します(デフォルト:0)
lc-footer-input-container-gap - ウィジェットフッターの入力コンテナ内の要素間のギャップを設定します(デフォルト:5px)
lc-footer-message-input-width - ウィジェットフッターに入力されるメッセージの幅を設定します(デフォルト:100%)
lc-footer-message-input-padding - ウィジェットフッターのメッセージ入力のパディングを設定します (デフォルト: 3px 0)
lc-footer-message-input-margin - ウィジェットのフッターに入力されるメッセージの余白を設定します (デフォルト: 0)
lc-footer-message-input-font-size - ウィジェットフッターに入力されるメッセージのフォントサイズを設定します(デフォルト:15px)
lc-footer-message-input-font-weight - ウィジェットフッターに入力されるメッセージのフォントの太さを設定します(デフォルト:normal)
lc-footer-message-input-font-style - ウィジェットフッターに入力されるメッセージのフォントスタイルを設定します(デフォルト:normal)
lc-footer-message-input-line-height - ウィジェットフッターに入力されるメッセージの行の高さを設定します (デフォルト: 24px)
lc-footer-message-input-background-color - メッセージ入力の背景色を設定します (デフォルト: lc-chat-background-color)
lc-footer-message-input-min-lines - 入力の最小行数を設定します。
lc-footer-message-input-line-heightは、入力の最小の高さを定義します(デフォルト:1)
lc-footer-message-input-max-lines:入力の最大行数を設定します。
lc-footer-message-input-line-heightは、入力の最大高さを定義します(デフォルト:5)
lc-footer-message-input-color - メッセージ入力の色を設定します (デフォルト: 黒)
lc-footer-attachment-button-width - ウィジェットフッターの添付ファイルボタンの幅を設定します(デフォルト:30px)
lc-footer-attachment-button-height - ウィジェットフッターの添付ファイルボタンの高さを設定します(デフォルト:30px)
lc-footer-attachment-button-padding - ウィジェットフッターの添付ファイルボタンのパディングを設定します(デフォルト:0)
lc-footer-attachment-button-margin - ウィジェットフッターの添付ファイルボタンの余白を設定します(デフォルト:0)
lc-footer-attachment-button-border-radius - ウィジェットフッターの添付ファイルボタンの境界線の半径を設定します(デフォルト:50%)
lc-footer-attachment-button-background-color - ウィジェットフッターの添付ファイルボタンの背景色を設定します(デフォルト:継承)
lc-footer-attachment-button-display - ウィジェットフッターの添付ファイルボタンの display プロパティを設定します (デフォルト: flex)
lc-footer-send-button-width - ウィジェットフッターの [メッセージの送信] ボタンの幅を設定します (デフォルト: 30px)
lc-footer-send-button-height - ウィジェットフッターの [メッセージの送信] ボタンの高さを設定します (デフォルト: 30px)
lc-footer-send-button-padding - ウィジェットフッターの [メッセージの送信] ボタンのパディングを設定します (デフォルト: 0)
lc-footer-send-button-margin - ウィジェットフッターの [メッセージの送信] ボタンの余白を設定します (デフォルト: 0)
lc-footer-send-button-background-color - ウィジェットフッターの [メッセージの送信] ボタンの背景色を設定します (デフォルト: inherit)
lc-footer-attachment-container-padding - ウィジェットフッターの添付ファイルプレビューコンテナのパディングを設定します(デフォルト:0)
lc-footer-attachment-container-margin - ウィジェットフッターの添付ファイルプレビューコンテナの余白を設定します(デフォルト:10px 0)
lc-footer-attachment-min-width - ウィジェットフッターの添付ファイルプレビューの最小幅を設定します(デフォルト:130px)
lc-footer-attachment-min-height - ウィジェットフッターの添付ファイルプレビューの最小高さを設定します(デフォルト:30px)
lc-footer-attachment-padding - ウィジェットフッターの添付ファイルプレビューのパディングを設定します(デフォルト:0)
lc-footer-attachment-margin - ウィジェットフッターの添付ファイルプレビューの余白を設定します(デフォルト:0)
lc-footer-attachment-border - ウィジェットフッターの添付ファイルプレビューの境界線を設定します(デフォルト:1px #e4e4e4 実線)
lc-footer-attachment-border-radius - ウィジェットフッターの添付ファイルプレビューの境界線の半径を設定します(デフォルト:4px)
lc-footer-attachment-font-size - ウィジェットフッターの添付ファイルプレビューのフォントサイズを設定します(デフォルト:14px)
lc-footer-attachment-font-weight - ウィジェットフッターの添付ファイルプレビューのフォントの太さを設定します(デフォルト:normal)
lc-footer-attachment-font-style - ウィジェットフッターの添付ファイルプレビューのフォントスタイルを設定します(デフォルト:通常)
lc-footer-attachment-image-max-width - ウィジェットフッターの画像添付プレビューの最大幅を設定します(デフォルト:150px)
lc-footer-attachment-image-max-height - ウィジェットフッターの画像添付プレビューの最大高さを設定します(デフォルト:250px)
lc-footer-attachment-image-border-radius - ウィジェットフッターの画像添付プレビューの境界線の半径を設定します(デフォルト:4px)
lc-footer-attachment-document-max-width - ウィジェットフッターのドキュメント添付ファイルプレビューの最大幅を設定します(デフォルト:300px)
lc-footer-attachment-document-padding - ウィジェットフッターのドキュメント添付ファイルプレビューのパディングを設定します(デフォルト:0)
lc-footer-attachment-document-margin - ウィジェットフッターのドキュメント添付ファイルプレビューの余白を設定します(デフォルト:0 32px 0 6px)
lc-footer-attachment-detach-icon-top - ウィジェットフッターの添付ファイルプレビューでデタッチアイコンの上部位置を設定します(デフォルト:6px)
lc-footer-attachment-detach-icon-right - ウィジェットフッターの添付ファイルプレビューでデタッチアイコンの正しい位置を設定します(デフォルト:6px)
lc-footer-attachment-detach-icon-background-color - ウィジェットフッターの添付ファイルプレビューのデタッチアイコンの背景色を設定します(デフォルト:rgba(0, 0, 0, 0.5))
lc-footer-attachment-detach-icon-color - ウィジェットフッターの添付ファイルプレビューのデタッチアイコンの色を設定します(デフォルト:#FFFFFF)
lc-footer-error-stack-gap - 個々のエラーメッセージ間のギャップを設定します(デフォルト:4px)
lc-footer-error-stack-margin - ウィジェットフッターのエラースタックのマージンを設定します(デフォルト:4px 0 0 0)
lc-footer-error-message-width - ウィジェットフッターのエラーメッセージの幅を設定します(デフォルト:90%)
lc-footer-error-message-padding - ウィジェットフッターのエラーメッセージのパディングを設定します(デフォルト:2px 0px 0px 0px)
lc-footer-error-message-margin - ウィジェットフッターのエラーメッセージの余白を設定します(デフォルト:0px 0px 0px 5px)
lc-footer-error-message-gap - ウィジェットフッターのエラーメッセージの要素間のギャップを設定します(デフォルト:12px)
lc-footer-error-message-color - ウィジェットフッターのエラーメッセージの色を設定します(デフォルト:#c84714)
lc-footer-error-message-border-top - ウィジェットフッターのエラーメッセージの上枠を設定します(デフォルト:1px実線)
lc-footer-start-chat-container-gap - ウィジェットフッターの "Start chat" コンテナ内の要素間のギャップを設定します (デフォルト: 10px)
lc-footer-start-chat-container-padding - ウィジェットフッターの "Start chat" コンテナのパディングを設定します (デフォルト: 0px)
lc-footer-start-chat-container-margin - ウィジェットフッターの "Start chat" コンテナの余白を設定します (デフォルト: 0px)
lc-footer-start-chat-container-background-color - ウィジェットフッターの "Start chat" コンテナの背景色を設定します (デフォルト: lc-chat-background-color)
lc-footer-start-chat-text-background-color - ウィジェットフッターの "Start chat" テキストの背景色を設定します (デフォルト: lc-chat-background-color)
lc-footer-start-chat-text-padding - ウィジェットフッターの "Start chat" テキストのパディングを設定します (デフォルト: 5px 0px)
lc-footer-start-chat-text-margin - ウィジェットフッターの "Start chat" テキストの余白を設定します (デフォルト: 0px)
lc-footer-start-chat-text-font-size - ウィジェットフッターの "Start chat" テキストのフォントサイズを設定します (デフォルト: 15px)
lc-footer-start-chat-text-font-weight - ウィジェットフッターの "Start chat" テキストのフォントの太さを設定します (デフォルト: normal)
lc-footer-start-chat-text-font-style - ウィジェットフッターの "Start chat" テキストのフォントスタイルを設定します (デフォルト: normal)
lc-footer-start-chat-button-width - ウィジェットフッターの Start チャットボタンの幅を設定します (デフォルト: 85%)
lc-footer-start-chat-button-height - ウィジェットフッターの Start チャットボタンの高さを設定します (デフォルト: 48px)
lc-footer-start-chat-button-padding - ウィジェットフッターの Start チャットボタンのパディングを設定します (デフォルト: 0px)
lc-footer-start-chat-button-margin - ウィジェットフッターの Start チャットボタンの余白を設定します (デフォルト: 0px)
lc-footer-start-chat-button-border-radius - ウィジェットフッターの Start Chat ボタンの境界線の半径を設定します (デフォルト: 4px)
lc-footer-start-chat-button-font-size - ウィジェットフッターの Start Chat ボタンのフォントサイズを設定します (デフォルト: 15px)
lc-footer-start-chat-button-font-weight - ウィジェットフッターの Start Chat ボタンのフォントの太さを設定します (デフォルト: normal)
lc-footer-start-chat-button-font-style - ウィジェットフッターの Start Chat ボタンのフォントスタイルを設定します (デフォルト: normal)
アンケート調査
lc-survey-content-flex-direction - アンケートタイプのコンテンツフレックス方向を設定します(デフォルト:列)
lc-survey-content-font-size - アンケートコンテンツのフォントサイズを設定します(デフォルト:4vw)
lc-survey-content-gap - アンケートコンテンツ要素間のギャップを設定します(デフォルト:20px)
lc-survey-content-padding - アンケートコンテンツのパディングを設定します(デフォルト:10px)
lc-survey-modal-background-color - アンケートモーダルウィンドウの背景色を設定します(デフォルト:lc-chat-background-color)
lc-survey-modal-flex-direction - サーベイモーダルウィンドウ内の要素のフレックス方向を設定します(デフォルト:列)
lc-survey-modal-padding - アンケートモーダルウィンドウのパディングを設定します(デフォルト:5px)
'lc-survey-ユーザー-評価-アイテム-背景色' - ユーザー評価ボタンオプションの背景色を設定します(親指を立てる、親指を下げます)(デフォルト:lc-チャット-背景色)
'lc-survey-ユーザー-評価-アイテム-ボックス-シャドウ' - ユーザー評価ボタンオプションのボックスシャドウを設定します(デフォルト:0 1px 3px 1px rgba(0, 0, 0, 0.1))
'lc-survey-ユーザー-評価-アイテム-ボックス-シャドウ-ホバー' - ユーザー評価ボタンオプションのホバーボックスの影を設定します(デフォルト:0 1px 3px 1px rgba(0, 0, 0, 0.2))
'lc-survey-ユーザー-評価-アイテム-アイコン-色' - ユーザー評価ボタンオプションのアイコンの色を設定します(デフォルト:lc-ブランド-背景色)
'lc-survey-ユーザー-評価-アイテム-ネガティブ-背景色' - 否定的なユーザー評価ボタンオプションの背景色を設定します(デフォルト:lc-チャット-背景色)
'LC-調査-ユーザー-評価アイテム-ネガティブアイコンカラー' - ネガティブユーザー評価ボタンオプションのアイコンの色を設定します(デフォルト:LC-ブランド-背景色)
'lc-survey-ユーザー-評価-アイテム-パディング' - ユーザー評価ボタンオプションのパディングを設定します(デフォルト:10px 20px)
'lc-survey-ユーザー-評価-アイテム-選択-背景色' - ユーザーが選択した場合のユーザー評価ボタンオプションの背景色を設定します(デフォルト:lc-ブランド-背景色)
'lc-survey-ユーザー-評価-アイテム-選択-アイコン-色' - ユーザーが選択した場合のユーザー評価ボタンオプションのアイコンの色を設定します(デフォルト:lc-ブランド-テキスト-色)
'LC-調査-ユーザー-評価-オプション-ギャップ' - ユーザー評価ボタンオプション間のギャップを設定します(デフォルト:20px)
'lc-survey-ユーザー-評価オプション-フレックス-方向' - ユーザー評価ボタンオプションのフレックス方向を設定します(デフォルト:行)
'LC-調査-ユーザー-評価オプション-正当化-コンテンツ' - ユーザー評価ボタンオプションの正当化コンテンツタイプを設定します(デフォルト:中央)
'lc-survey-ユーザー入力幅' - ユーザーフィードバック入力の幅を設定します(デフォルト:100%)
'lc-survey-ユーザー入力-行の高さ' - ユーザーフィードバック入力の行の高さを設定します(デフォルト:24px)
'lc-survey-ユーザー-入力-min-lines' - と組み合わせた場合、フィードバック入力の最小行数を設定します。
'lc-survey-ユーザー-入力-行-高さ'は、フィードバック入力の最小の高さを定義します(デフォルト:2)
'lc-survey-ユーザー-入力-最大行' - と組み合わせた場合、フィードバック入力の最大行数を設定します。
'lc-survey-ユーザー-入力-行-高さ'、フィードバック入力の最大高さを定義します(デフォルト:7)
'lc-survey-ユーザー入力-パディング' - ユーザーフィードバック入力のパディングを設定します(デフォルト:3px)
'lc-survey-ユーザー入力-背景色' - ユーザーフィードバック入力の背景色を設定します(デフォルト:白)
lc-survey-submit-button-align-self - アンケートの送信ボタンの位置を水平方向に揃えます(デフォルト:中央)。
lc-survey-submit-button-background-color-[アンケートの送信]ボタンの背景色を設定します(デフォルト:lc-brand-background-color)
lc-survey-submit-button-color - アンケートの送信ボタンのテキストの色を設定します(デフォルト:lc-brand-text-color)
lc-survey-submit-button-disabled-background-color - [アンケートの送信]ボタンが無効になっている場合の背景色を設定します(デフォルト:#e4e4e4)
lc-survey-submit-button-disabled-color - [アンケートの送信]ボタンが無効になっている場合のテキストの色を設定します(デフォルト:#737376)
lc-survey-submit-button-padding - Submit Survey ボタンのパディングを設定します (デフォルト: 10px 30px)
スレッド一覧
lc-thread-list-background-color - スレッドリストビューの背景色を設定します(デフォルト:lc-chat-background-color)
lc-thread-list-border-radius - スレッドリストビューの境界線の半径を設定します(デフォルト:初期値)
lc-thread-list-margin - スレッドリストビューのマージンを設定します (デフォルト: initial)
lc-thread-list-padding - スレッドリストビューのパディングを設定します (デフォルト: 初期値)
lc-thread-list-card-background-color - 個々のスレッドカードの背景色を設定します(デフォルト:lc-thread-list-background-color)
lc-thread-list-card-border-radius - 個々のスレッドカードの境界線の半径を設定します(デフォルト:2px)
lc-thread-list-card-box-shadow - 個々のスレッドカードのボックスの影を設定します (デフォルト: 0 1px 3px rgba (0, 0, 0, 0.17))
lc-thread-list-card-box-shadow-hover - 個々のスレッドカードのホバーボックスの影を設定します(デフォルト:2px、2px、5px、灰色)
lc-thread-list-card-height - 個々のスレッドカードの高さを設定します(デフォルト:72px)
lc-thread-list-card-margin - 個々のスレッドカードのマージンを設定します(デフォルト:8px 12px)
lc-thread-list-card-padding - 個々のスレッドカードのパディングを設定します(デフォルト:初期値)
lc-thread-list-card-avatar-align-items - アバターを垂直方向に揃えます(デフォルト:中央)
lc-thread-list-card-avatar-background-color - カードアバターのボックスの背景色を設定します(デフォルト:初期値)
lc-thread-list-card-avatar-border-radius - カードアバターのボックスの境界線の半径を設定します(デフォルト:初期値)
lc-thread-list-card-avatar-justify-content - アバターを水平方向に揃えます(デフォルト:中央)
lc-thread-list-card-avatar-logo-height - アバターのロゴの高さを設定します (デフォルト: 30px)
lc-thread-list-card-avatar-logo-width - アバターロゴの幅を設定します(デフォルト:30px)
lc-thread-list-card-avatar-margin - カードアバターのボックスの余白を設定します(デフォルト:初期値)
lc-thread-list-card-avatar-padding - カードアバターのボックスのパディングを設定します(デフォルト:初期値)
lc-thread-list-card-avatar-width - カードアバターのボックスの幅を設定します(デフォルト:70px)
lc-thread-list-card-message-container-background-color - カードメッセージコンテナの背景色を設定します(デフォルト:初期値)
lc-thread-list-card-message-container-border-radius - カードメッセージコンテナの境界線の半径を設定します(デフォルト:初期値)
lc-thread-list-card-message-container-margin - カードメッセージコンテナのマージンを設定します(デフォルト:初期値)
lc-thread-list-card-message-container-padding - カードメッセージコンテナのパディングを設定します(デフォルト:初期値)
lc-thread-list-card-message-container-width - カードメッセージコンテナの幅を設定します(デフォルト:75%)
lc-thread-list-card-message-content-background-color - カードメッセージプレビューの背景色を設定します(デフォルト:初期値)
lc-thread-list-card-message-content-border-radius - カードメッセージプレビューの境界線の半径を設定します(デフォルト:初期値)
lc-thread-list-card-message-content-color - スレッドカードメッセージプレビューのテキストの色を設定します(デフォルト:#B4B4B4)
lc-thread-list-card-message-content-font-size - カードメッセージプレビューのフォントサイズを設定します(デフォルト:14px)
lc-thread-list-card-message-content-font-style - カードメッセージプレビューのフォントスタイルを設定します(デフォルト:normal)
lc-thread-list-card-message-content-font-weight - カードメッセージプレビューのフォントの太さを設定します(デフォルト:normal)
lc-thread-list-card-message-content-line-height - カードメッセージプレビューの行の高さを設定します(デフォルト:140%)
lc-thread-list-card-message-content-margin - カードメッセージプレビューの余白を設定します(デフォルト:2px 0px 0px 0px)
lc-thread-list-card-message-content-padding - カードメッセージプレビューのパディングを設定します(デフォルト:初期値)
lc-thread-list-card-message-info-background-color - カードメッセージ情報の背景色を設定します(デフォルト:初期値)
lc-thread-list-card-message-info-border-radius - カードメッセージ情報の境界線の半径を設定します(デフォルト:初期値)
lc-thread-list-card-message-info-color - スレッドカードヘッダーとタイムスタンプのテキストの色を設定します(デフォルト:#545454)
lc-thread-list-card-message-info-flex-direction - カードメッセージ情報のフレックス方向タイプを設定します(デフォルト:行)
lc-thread-list-card-message-info-font-size - カードメッセージ情報のフォントサイズを設定します(デフォルト:14px)
lc-thread-list-card-message-info-font-style - カードメッセージ情報のフォントスタイルを設定します(デフォルト:normal)
lc-thread-list-card-message-info-font-weight - カードメッセージ情報のフォントの太さを設定します(デフォルト:normal)
lc-thread-list-card-message-info-line-height - カードメッセージ情報の行の高さを設定します(デフォルト:115%)
lc-thread-list-card-message-info-margin - カードメッセージ情報のマージンを設定します(デフォルト:16px 0px 0px 0px)
lc-thread-list-card-message-info-padding - カードメッセージ情報のパディングを設定します(デフォルト:初期値)
lc-thread-list-card-message-info-name-background-color - カードメッセージ情報の名前ボックスの背景色を設定します(デフォルト:初期値)
lc-thread-list-card-message-info-name-border-radius - カードメッセージ情報の名前ボックスの境界線の半径を設定します(デフォルト:初期値)
lc-thread-list-card-message-info-name-color - カードメッセージ情報の名前のテキスト色を設定します(デフォルト:初期値)
lc-thread-list-card-message-info-name-font-size - カードメッセージ情報の名前のフォントサイズを設定します(デフォルト:初期値)
lc-thread-list-card-message-info-name-font-style - カードメッセージ情報の名前のフォントスタイルを設定します(デフォルト:初期値)
lc-thread-list-card-message-info-name-font-weight - カードメッセージ情報の名前のフォントの太さを設定します(デフォルト:初期値)
lc-thread-list-card-message-info-name-margin - カードメッセージ情報の名前ボックスの余白を設定します(デフォルト:初期値)
lc-thread-list-card-message-info-name-padding - カードメッセージ情報の名前ボックスのパディングを設定します(デフォルト:初期値)
lc-thread-list-card-message-info-name-width - カードメッセージ情報の名前ボックスの幅を設定します(デフォルト:90%)
lc-thread-list-card-lock-icon-height - ロックアイコンのプロポーショナルサイズを設定します(デフォルト:16px)
lc-thread-list-card-lock-icon-margin-left - ロックアイコンの水平位置の左マージンを設定します(デフォルト:10px)
lc-thread-list-card-lock-icon-margin-top - 垂直方向のロックアイコン配置の余白の上部を設定します (デフォルト: 10px)
lc-thread-list-card-channel-switch-height - チャネルスイッチアイコンのプロポーショナルサイズを設定します(デフォルト:16px)
lc-thread-list-card-channel-switch-margin-left - チャンネルスイッチアイコンの水平位置の左マージンを設定します(デフォルト:37px)
lc-thread-list-card-channel-switch-margin-top - 垂直チャネルスイッチアイコンの位置の余白の上部を設定します(デフォルト:12px)
lc-thread-list-card-unread-message-counter-background-color - 未読メッセージカウンタの背景色を設定します(デフォルト:#C84714)
lc-thread-list-card-unread-message-counter-border-radius - 未読メッセージカウンタの境界線の半径を設定します(デフォルト:50%)
lc-thread-list-card-unread-message-counter-color - 未読メッセージカウンタのテキストの色を設定します(デフォルト:#FFFFFF)
lc-thread-list-card-unread-message-counter-font-size - 未読メッセージカウンタのフォントサイズを設定します(デフォルト:12px)
lc-thread-list-card-unread-message-counter-font-weight - 未読メッセージカウンタのフォントの太さを設定します(デフォルト:初期値)
lc-thread-list-card-unread-message-counter-height - 未読メッセージカウンターの高さを設定します(デフォルト:18px)
lc-thread-list-card-unread-message-counter-right - 未読メッセージカウンターの水平位置の right プロパティを設定します (デフォルト: 15px)
lc-thread-list-card-unread-message-counter-top - 未読メッセージカウンターの垂直位置のtopプロパティを設定します(デフォルト:38px)
lc-thread-list-card-unread-message-counter-width - 未読メッセージカウンタの幅を設定します(デフォルト:18px)
アイキャッチャー
lc-eye-catcher-container-x-position - アイキャッチャーコンテナの水平位置を設定します(デフォルト:100px)
lc-eye-catcher-container-y-position - アイキャッチャーコンテナの垂直位置を設定します(デフォルト:20px)
lc-eye-catcher-container-gap - アイキャッチャーコンテナ内の要素間のギャップを設定します(デフォルト:3px)
lc-eye-catcher-close-button-width - アイキャッチャーの閉じるボタンの幅を設定します(デフォルト:30px)
lc-eye-catcher-close-button-height - アイキャッチャーの閉じるボタンの高さを設定します(デフォルト:30px)
lc-eye-catcher-close-button-border-radius - アイキャッチャーの [閉じる] ボタンの境界線の半径を設定します (デフォルト: 50%)
lc-eye-catcher-close-button-background-color - アイキャッチャーの閉じるボタンの背景色を設定します (デフォルト: rgba(white, 0.8))
lc-eye-catcher-close-button-hover-background-color - アイキャッチャーの閉じるボタンにカーソルを合わせたときの背景色を設定します(デフォルト:#f5f5f5)
'lc-eyecatcher-close-button-color' - アイキャッチャーの閉じるボタンの色を設定します (デフォルト: #999999)
lc-eye-catcher-close-button-hover-color - アイキャッチャーの閉じるボタンにカーソルを合わせたときの色を設定します (デフォルト: #4c4c4c)
lc-eye-catcher-message-bubble-max-width - アイキャッチャーのメッセージバブルの最大幅を設定します(デフォルト:220px)
lc-eye-catcher-message-bubble-min-width - アイキャッチャーのメッセージバブルの最小幅を設定します(デフォルト:80px)
lc-eye-catcher-message-bubble-max-height - アイキャッチャーのメッセージバブルの最大高さを設定します(デフォルト:125px)
lc-eye-catcher-message-bubble-padding - アイキャッチャーのメッセージバブルのパディングを設定します (デフォルト: 18px)
lc-eye-catcher-message-bubble-margin - アイキャッチャーのメッセージバブルのマージンを設定します (デフォルト: 0)
lc-eye-catcher-message-bubble-background-color - アイキャッチャーのメッセージバブルの背景色を設定します(デフォルト:白)
lc-eye-catcher-message-bubble-box-shadow - アイキャッチャーのメッセージバブルのボックスシャドウを設定します (デフォルト: 0px 5px 10px rgba(0, 0, 0, 0.18))
lc-eye-catcher-message-bubble-border-radius - アイキャッチャーのメッセージバブルの境界線の半径を設定します(デフォルト:8px)
lc-eye-catcher-message-bubble-text-font-size - アイキャッチャーのメッセージバブルテキストのフォントサイズを設定します(デフォルト:14px)
lc-eye-catcher-message-bubble-text-font-weight - アイキャッチャーのメッセージバブルテキストのフォントの太さを設定します(デフォルト:normal)
lc-eye-catcher-message-bubble-text-font-style - アイキャッチャーのメッセージバブルテキストのフォントスタイルを設定します(デフォルト:normal)
lc-eye-catcher-message-bubble-text-line-height - アイキャッチャーのメッセージバブルテキストの行の高さを設定します(デフォルト:18px)
lc-eye-catcher-message-bubble-text-color - アイキャッチャーのメッセージバブルテキストの色を設定します(デフォルト:黒)
カスタムフォント
高度なカスタマイズを使用すると、テーマごとにLive Chatウィジェットのカスタムフォントを構成できます。CSS スタイルシート URL が利用可能である限り、Google Fonts や独自のセルフホスト フォントなど、任意の Web フォントを使用できます。
ウィジェットをブランドのタイポグラフィに一致させたい場合や、Roboto(組み込みのデフォルトフォント)が満たしていないアクセシビリティ要件を満たす場合は、カスタムフォントを使用します。
仕組み
フォントは、高度なカスタマイズ JSON 内の themes[themeName].fonts で宣言されます。ウィジェットが読み込まれると、フォント スタイルシートが取得され、フォントが使用可能になるのを待ってから、ウィジェット全体に適用されます。
フォントの読み込みは、完全にウィジェット iframe 内で行われます。フォントはNTT CPaaSドメインから読み込まれ、ウィジェットが埋め込まれているページのコンテンツセキュリティポリシー(CSP)の対象ではありません。
サイトの font-src または style-src ディレクティブは、ウィジェットのフォント読み込みを妨げません。
フォントを構成する
-
NTT CPaaS Webインターフェイスで、Live Chat > ウィジェットに移動し、設定するウィジェットを開きます。
-
カスタマイズタブに移動し、高度なカスタマイズセクションまでスクロールします。
-
一意のテーマ がまだ有効になっていない場合は、有効にします。
-
JSON テキスト領域で、テーマ内に
fontsオブジェクトを追加します。fontsが存在する場合は、両方のフィールドが必須です。{ "default": { "styles": {}, "fonts": { "fontFaceUrl": "https://fonts.googleapis.com/css2?family=Inter&display=swap", "fontFamily": "Inter" } } } -
[保存] を選択します。ウィジェットは、次回の読み込み時に構成されたフォントを使用します。
検証ルール
- JSON は有効な JSON オブジェクトである必要があります。
- 「デフォルト」テーマは常に存在する必要があります。
- テーマに
fontsオブジェクトが含まれている場合は、fontFaceUrlとfontFamilyの両方が必要です。フィールドを 1 つだけ指定すると、検証エラーが発生し、構成は保存されません。
フォント構成リファレンス
| フィールド | タイプ | 必須 | 説明 |
|---|---|---|---|
fontFaceUrl | 文字列 | はい (fonts が存在する場合) | 「@font面」ルールを宣言する CSS スタイルシートのURL。これは通常、Google Fonts または Adobe Fonts の CSS URL です。完全修飾 URL である必要があります。 |
fontFamily | 文字列 | はい (fonts が存在する場合) | 適用する CSS の font-family 値。fontFaceUrl のスタイルシートによって公開されるファミリ名と一致する必要があります。 |
JSON の例
次の例では、2 つのテーマを構成します。
- 「デフォルト」テーマはカスタムフォントを使用します。
darkテーマは、fontsオブジェクトが定義されていないため、デフォルトのフォント フォールバック (Roboto) を使用します。
{
"default": {
"styles": {
"lc-header-container-background-color": "#1a1a2e",
"lc-chat-message-user-bubble-background-color": "#16213e"
},
"fonts": {
"fontFaceUrl": "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap",
"fontFamily": "Inter"
}
},
"dark": {
"styles": {
"lc-header-container-background-color": "#0f0f0f",
"lc-chat-message-user-bubble-background-color": "#1a1a1a"
}
}
}すべてのテーマにカスタムフォントを適用するには、各テーマにfontsオブジェクトを個別に追加します。
{
"default": {
"fonts": {
"fontFaceUrl": "https://fonts.googleapis.com/css2?family=Inter&display=swap",
"fontFamily": "Inter"
}
},
"dark": {
"fonts": {
"fontFaceUrl": "https://fonts.googleapis.com/css2?family=Inter&display=swap",
"fontFamily": "Inter"
}
}
}fontFaceUrl, the stylesheet is retrieved only once.フォントの優先順位
ウィジェットがテーマを適用すると、使用するフォントが次の順序で解決されます。
- テーマごとのフォント: アクティブなテーマで定義された
fontsオブジェクト。 - デフォルトフォント: Roboto、アクティブなテーマに
fontsオブジェクトが定義されていない場合。
ノート
fontFaceUrlは、フォントバイナリ(.ttf、.woff2など)ではなく、CSSスタイルシートを指す必要があります。Google Fonts と Adobe Fonts はどちらも CSS URL を提供します。セルフホスティングフォントの場合は、URLが有効な@font-face宣言を含む CSS ファイルを返すことを確認してください。- バックエンドはフォント URL を検証しません。URL に到達できない場合、またはエラーが返された場合、ウィジェットはサイレントに Roboto にフォールバックします。
- Roboto は必要な場合にのみロードされます。設定内のすべてのテーマが独自の「フォント」を定義している場合、Robotoは取得されず、不要なネットワークリクエストが回避されます。