チャットウィンドウ：スタイル、サイズ、サイドパネル、モバイル表示

開いたチャットウィンドウの外観：ヘッダー、密度、吹き出し、影、アバター、入力欄、カード、ウィンドウサイズ、サイドパネル、背景、文字サイズ、アニメーション、訪問者の吹き出し。

色が印象を決め、形が仕上げます。/app/projects/{id}の外観タブ、ブランド設定セクションには、スタイル（色よりも形）とウィンドウ（開いたウィンドウの表示方法）の2つの設定グループがあります。選択しなければ、すべて既定のままです。保存で保存します。ウィジェットのホーム画面のプレビューには、実際のウィジェットが表示されます。

デザインアシスタントのテンプレートは、これらの設定も同時に指定します。

スタイル

ヘッダー – グラデーション（既定）、フラット、ガラス。ホーム画面のヘッダーとタイトルバーに適用されます。
密度 – 標準（既定）、コンパクト、ゆったり。ホーム画面と会話内の余白です。
吹き出し – 柔らかい（既定。設定した角の丸みに合わせる）、丸（18 px）、四角（4 px）。
影 – 柔らかい（既定）、くっきり、なし。チャットボタンではなく、ウィンドウに適用されます。
アバター – 丸（既定）または四角。
入力欄 – フラット（既定）またはカプセル（大きく丸めた形と丸いボタン）。
カード – 枠線（既定）またはフラット。ホーム画面のタイル、ヘルプの行、会話内のカードに適用されます。

ウィンドウ

ウィンドウサイズ – 標準（既定、幅380 px）、幅広（440 px）、幅狭（340 px）、縦長（ほぼ画面全体の高さ、最大960 px）。通常の高さは620 pxで、小さな画面ではそれより低くなります。
レイアウト – フローティングウィンドウ（既定）またはサイドパネル。サイドパネルは、チャットボタン側の端に全高で配置され、そこからスライドして表示されます。開いている間、チャットボタンは引っ込みます。ヘッダーのボタンで閉じます。
背景 – メッセージ領域の背景です。シンプル（既定）、ドット、グリッド、グラデーション（ブランドの色をわずかに使用）。
文字サイズ – 標準（既定、14 px）、大（15.5 px）、小（13 px）。吹き出しと入力欄に適用され、チャットボタンには適用されません。
開くときのアニメーション – スライドイン（既定）、ズームイン、フェードイン、なし。訪問者がシステムで「動きを減らす」を設定している場合は、いずれにしてもアニメーションを省略します。
訪問者の吹き出し – 訪問者の吹き出しの色です。メインカラー（既定。ブランドの色を薄く混色）、アクセントカラー、ニュートラル（グレー）。ここでも、ウィジェットはテキストが読みやすくなるまで再計算します。

ウィンドウサイズとレイアウトは、画面幅481 px以上でのみ適用されます。それ未満では、チャットは常に全画面で開きます（下記参照）。

コードでの設定

すべての項目は、ブランド設定のstilにあります。値は内部名です。

kopf: verlauf, flach, glas
dichte: normal, kompakt, luftig
blase: weich, rund, eckig
schatten: weich, hart, keiner
avatar: rund, eckig
eingabe: flach, pille
karten: rahmen, flach
fenster: normal, breit, schmal, hoch
ansicht: schwebend, seite
hintergrund: schlicht, punkte, raster, verlauf
schrift: normal, gross, klein
animation: gleiten, zoom, blenden, keine
besucher: marke, akzent, neutral

不明な値の場合は、既定値に戻ります。

ReactiveChat('setBrand', { stil: { ansicht: 'seite', hintergrund: 'punkte', schrift: 'gross' } });

スニペットでdata-rc-brand='{"stil":{"ansicht":"seite"}}'として指定すると、そのページ独自のブランド設定と見なされ、アカウントより優先されます。色、フォント、テーマを参照してください。

動き

スニペットのdata-rc-motionでアニメーションを制御します。auto（既定。訪問者のシステム設定に合わせる）、reduced（動きなし）、fullを指定できます。

data-rc-motion="reduced"

ヘッダー

ヘッダーには、誰が回答しているかが表示されます。

チームの担当者が書いている場合は、その人の表示名が表示されます。各メンバーが個人設定で管理します。チーム、コンソール、通知を参照してください。
AIアシスタントが回答している場合は、AIとナレッジ → アシスタントの名前（既定は「Ada」）が表示されます。AIアシスタントを参照してください。
それ以外は「チャット」というタイトルです。タイトルと2行目（「対応中です」「AIアシスタント」）は、テキストと言語でheader.title、header.subtitle_online、header.subtitle_botを使って変更します。

アバターには名前の最初の文字を、アシスタントには✦を表示します。現在、チームメンバー独自の写真は保存できません。

ヘッダーには封筒のアイコンもあり、訪問者が会話をメールで受け取れます。ルールとサービス → 会話のメール送信で無効にできます。対応状況、フォーム、サービスを参照してください。

「Powered by reactive.chat」の案内

無料プランでは、ウィンドウの下部に「Powered by reactive.chat」を表示します。有料プランでは、外観 → チャット内のreactive.chatにある「Powered by reactive.chat」を非表示で選択できます。有料プランの既定は非表示です。案内の文言は変更できません。

スマートフォンでの表示

幅480 px以下、または横向きで高さ480 px以下の端末では、チャットは全画面で開きます。角をなくし、画面上のキーボードが開いていても、見える高さ全体を使います。入力欄の文字は、スマートフォンがズームしないよう16 pxにし、ボタンは44 px以上にします。チャットを開いている間、チャットボタンは引っ込みます。

スマートフォンでは、ウィンドウサイズとサイドパネルは適用されません。それ以外のスタイル、色、文字サイズは適用されます。スマートフォンのチャットボタンのサイズは、チャットボタンで設定します。

最終更新: 2026-10-25