色、フォント、テーマ

ブランドの色、アクセント、独自の表面色、角の丸み、フォント、ライトとダーク、テンプレート、カスタムCSSの設定と、すべてのテキストを読みやすく保つ仕組みを説明します。

ウィジェットには、ブランドの色やフォントを反映でき、必要に応じて配色全体を独自に設定することもできます。その際、どの表面色でもすべてのテキストが読めるように色を再計算します。色を選ぶだけで、コントラストはウィジェットが調整します。

このページで説明する設定は、/app/projects/{id}の外観タブにあるブランド設定セクションにあります。ただし、配色（ライト、ダーク、自動）は、インストールタブの基本設定にあります。

デザインアシスタント

ブランド設定セクションの上部には、4つのステップでデザインを設定できるアシスタントがあります。

外観 – 18種類のテンプレートが用意され、ライト、ダーク、プロフェッショナル、遊び心、くつろぎ、クール、ミニマルで絞り込めます。Klar、Nacht、Boutique、Support-Desk、Minimal、Corporate、Ozean、Graphit、Espressoなどがあります。
色 – メインカラーとアクセントを設定します。8組の配色からすばやく選べるほか、表面色を既定、ライト、ダーク、カスタムから選択できます。
形 – ウィンドウのスタイル、角の丸み、チャットボタンの形とサイズを設定します。
完了 – 設定の概要を確認します。

アシスタント自体は保存を行いません。下にあるフィールドに値を入力するだけで、保存を押すまでは保存されません。アシスタントのサムネイルは略図です。実際の設定を反映したウィジェットは、ウィジェットのホーム画面セクションのプレビューで確認できます。

細かく調整するには、すべての設定を個別に表示を展開します。フォントとカスタムCSSは、ここでのみ設定できます。

各フィールド

メインカラー – ブランドの色を#rrggbbで指定します。チャットボタン、送信ボタン、リンク、フォーカス、訪問者の吹き出し（混色）に使います。独自の値を指定しない場合は、ライトテーマで紫の#6D28D9、ダークテーマで#9B7BFFを使用します。
アクセント – カウンターや強調表示などに使う2つ目の色を#rrggbbで指定します。独自の値を指定しない場合は、ライトで#BE185D、ダークで#FF6B8Aを使用します。
角の丸み（px） – 0～28。0は直角です。既定値は12です。
フォントファミリー（CSS） – Inter, system-ui, sans-serifなどのCSS値を最大120文字で指定します。ウィジェットはフォントファイルを読み込みません。ページですでに読み込んでいるフォントか、システムフォントを使用してください。空欄の場合は、端末のシステムフォントを使います。
テンプレート – 1回クリックすると、色、表面色、角の丸み、チャットボタン、スタイルをまとめて設定できます。保存を押すまでは保存されません。

有効なのは6桁の#rrggbb形式の色だけです。#f00やrgb(…)などの短い形式は破棄され、代わりに既定値が適用されます。

表面色とテキスト

表面色とテキストでは、必要に応じてさらに5つの色を設定できます。それぞれにカスタムカラーのチェックボックスがあります。

背景 – ウィンドウの表面色です。
吹き出しの表面色 – チームとアシスタントの吹き出しです。
テキスト – 文字色です。
補助テキスト – 時刻、注記、2行目のテキストです。
区切り線 – 区切り線と枠線です。

チェックがない場合、ウィジェットはWebサイトに合わせたライトまたはダークの配色を使用します。この場合、フィールドの値は出発点にすぎず、実際に使われている値ではありません。チェックがある場合は、指定した色が適用されます。

背景だけを独自に設定した場合、ウィジェットはそれを基に、吹き出しの表面色、テキスト、補助テキスト、区切り線の色を算出します。

読みやすさ：ウィジェットが再計算する内容

利用者が選ぶのはブランドの色であり、必ずしも読みやすい色とは限りません。そのため、ウィジェットはテキストと表面色のすべての組み合わせで、コントラスト比が4.5:1以上になるか確認します。これは、通常のテキストに対するWCAG 2.xのしきい値です。

ブランドの色の上にあるテキスト（送信ボタンなど）は、読みやすさに応じて白またはほぼ黒に自動設定されます。
文字色として使うブランドの色（リンクや強調表示）は、4.5:1に達するまで少しずつ明るく、または暗く調整します。表面色、つまりチャットボタンや送信ボタンでは、指定した色をそのまま使います。
訪問者の吹き出しは、ブランドの色と背景色を混ぜた色です。コントラストが不十分な場合は、ブランドの色の割合を減らします。
独自のテキスト色と補助テキスト色も、表示されるすべての表面色に対して同じ確認を行います。

再計算された内容は、アカウントのフォーム直下にあるテキストの読みやすさを保つために再計算の行に表示されます。そのため、文字色に明るい黄色を指定すると、ウィジェットでは入力値より暗く表示され、その理由をここで確認できます。

ページ上で、測定値を自分で取得することもできます。

ReactiveChat('brandCheck');   // list of pairings with measured and required contrast
ReactiveChat('brandTokens');  // the colours actually used in the widget

ライト、ダーク、Webサイトに合わせる

インストール → 基本設定 → ウィジェットの配色で選択します。

Webサイトに合わせる（判定できない場合は訪問者のシステム設定） – 既定値です。ウィジェットはページがライトかダークかを確認し、合わせます。
ライト – 常にライトにします。
ダーク – 常にダークにします。

自動選択では、次の順序で確認します。

画面中央にあるページの背景色
<html>のCSS値color-schemeが、厳密にdarkまたはlightであるか
<html>または<body>の一般的な切り替え指定（darkクラスやdata-theme="dark"など）
最後に、訪問者のシステム設定

ページがライトとダークを切り替えると、ウィジェットも追従します。ウィンドウを開いたときにも再確認します。

コードでは、スニペットまたは実行時にテーマを設定します。この設定は、アカウントの設定より優先されます。

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-theme="dark"
        async></script>

ReactiveChat('setTheme', 'dark');   // 'light', 'dark' or 'auto'

setThemeを使うと、ウィジェットは訪問者のブラウザーに選択を記憶します。setTheme('auto')で記憶を削除します。ページ独自のライト／ダーク切り替えと組み合わせて使えます。

コードで色を設定する

キャンペーンなどの個別ページでは、スニペットまたは実行時にブランド設定を指定できます。フィールド名は次のとおりです。

primary、accent – ブランドの色とアクセント
bg、surface、text、textDim、line – 5つの表面色
onPrimary – ブランドの色の上にある文字色（指定しない場合は自動）
radius – 0～28
font – CSSのフォント値
launcherとstil – チャットボタンとチャットウィンドウを参照してください。

ReactiveChat('setBrand', { primary: '#0F766E', accent: '#F59E0B', radius: 8 });

setBrandは、ウィジェットを再構築せずに、コントラストと派生する色を即座に再計算します。nullで値を削除すると、既定値が適用されます。

スニペットでは、data-rc-brand属性にJSONを指定します。

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-brand='{"primary":"#0F766E","accent":"#F59E0B"}'
        async></script>

重要：スニペットとアカウントのどちらが優先されるか アカウントが生成するスニペットには、ブランドの色、角の丸み、チャットボタンの形とサイズがすでに含まれています。これは、チャットボタンを最初から正しい色で表示するための初期状態にすぎません。ウィジェットがサーバーから設定を受け取ると、アカウントの設定が全面的に適用されます。

ただし、data-rc-brandにaccent、stil、ラベルなどの追加フィールドを1つでも書き込むと、スニペットのブランド設定は、そのページ独自のブランド設定と見なされます。この場合は、アカウントの設定より優先されます。アカウントの設定のうち、そのページに引き続き適用されるのは「独自リンク経由のみ」の表示設定だけです。また、このページはA/Bテストに参加しません。

アカウントでブランドの色を変更した場合は、その後でインストールの埋め込みスニペットをもう一度コピーしてください。そうしないと、ページの読み込み中に古い色が一瞬表示されます。

スニペットの仕組みと、その他の方法（window.ReactiveChatSettings、ReactiveChat('boot', …)）は、技術的な連携で説明しています。

カスタムCSS

すべての設定を個別に表示 → カスタムCSSには、他のすべてのルールの後、最後に適用するCSSを記述します。

最大20,000文字です。
@importは、保存時とウィジェット内の両方で削除されます。
CSSが効くのはウィジェット内だけです。隔離された領域（shadow DOM）で動作するため、ページを変更できません。逆に、ページのCSSもウィジェットには届きません。ウィジェットのCSSはここに記述します。
ウィジェットは、その後に2つのルールを再適用します。キーボード利用者向けの視認できるフォーカスリングと、ヘッダーの閉じるボタンです。スタイルによってチャットの出口をなくすと、キーボード利用者が抜け出せなくなります。
ウィジェット内部のクラス名は、互換性を保証するインターフェースではありません。変更後は、プレビューでCSSを確認してください。

.rc-launcher { box-shadow: 0 0 0 4px #fff; }

コードでは、customCssでも同じことができます。たとえばReactiveChat('boot', { customCss: '…' })やdata-rc-custom-css属性を使用します。

ウィンドウのヘッダーにロゴを表示する

最も簡単な方法は、アカウントのプロジェクト → 外観 → ブランド設定にあるロゴ（アドレス）フィールドに入力することです。保存後、遅くとも1分以内にチャットウィンドウのヘッダーに表示されます。

コードでは、logoで高さ、代替テキスト、表示位置（チャットボタン内など）も設定できます。コードで設定したロゴは、アカウントのフィールドより優先されます。

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-logo='{"src":"https://www.example.com/logo.svg","alt":"Example Ltd","height":24,"placement":"header"}'
        async></script>

src – https:// のアドレス、またはdata:image/…の画像。小さなSVGをdata:アドレスにすると、リクエストを1回減らせます。
alt – 代替テキスト
height – ピクセル単位の高さ。12～40、既定値は20です。
placement – header（ヘッダー、既定）、launcher（チャットボタン内）、またはboth

一方、ホーム画面のロゴは、アカウントで簡単に設定できます。チャットのホーム画面を参照してください。

想定と異なる表示になる場合

入力した色より暗い、または明るい： コントラストを保つための調整です。フォーム下の再計算の行に、調整した内容が表示されます。
アカウントの変更が反映されない： スニペットのdata-rc-brandに追加フィールドが含まれていませんか。その場合はスニペットが優先されます。また、保存後の反映には最大1分かかります。
読み込み中に別の色が一瞬表示される： 色を変更した後、スニペットをもう一度コピーしてください。
フォントが反映されない： ページでそのフォントを読み込んでいますか。ウィジェットはフォントファイルを読み込みません。

最終更新: 2026-10-25