チャットボタン：形、サイズ、アイコン、ラベル、位置

訪問者がチャットを開くボタンを設定：形、デスクトップとスマートフォンでのサイズ、アイコン、2行のラベル、表示、20種のテンプレート、位置、バーとの重なり回避。

チャットボタン（ランチャー）は、訪問者がチャットを開くために使う、画面下の隅にあるボタンです。/app/projects/{id}の外観タブ、ブランド設定セクションで設定します。ライブプレビューのチャットボタンの表示には、変更がすぐに反映されます。保存で保存すると、1分以内に訪問者にも反映されます。

チャットボタンにはメインカラーを使用します。色、フォント、テーマを参照してください。

チャットボタンのテンプレート

「バーチャルアシスタント – 2分以内に返信」「ご質問はありますか？」「カスタマーサービス – 月～金 8時～18時」「AIアシスタント – 数秒で回答」など、20種の組み合わせがあります。1回クリックすると、形、アイコン、ラベル、2行目、表示、サイズが入力されます。色は変わらず、保存を押すまでは保存されません。その後、テキストを調整してください。

各フィールド

形 – 円（既定）、角丸、四角、吹き出し、葉から選びます。吹き出しは、とがった角が画面の隅を向きます。葉は、対角の2つの角が小さくなります。
サイズ（px） – 44～72、既定値は56です。44は、確実にタップできる最小の領域です。
スマートフォンのサイズ（px） – 40～72。空欄なら48 px、上のサイズがそれより小さい場合はそのサイズです。
アイコン – 吹き出し（既定）、疑問符、ヘッドセット、きらめき、アイコンなし（文字のみ）から選びます。アイコンなしの場合は、ラベルと常に表示の設定が必要です。そうでなければ、吹き出しを表示します。
ラベル – アイコンの横に表示するテキストで、最大40文字です。空欄ならアイコンだけを表示します。
2行目 – ラベルの下に表示する小さな2行目で、最大60文字です。ラベルがない場合は表示しません。
表示 – ラベルを表示するタイミングです。
常に表示（既定）
マウスオーバー時のみ – 通常はアイコンだけを表示し、マウスオーバーやキーボードフォーカスでラベルを展開します。タッチ端末ではアイコンだけのままです。
大きな画面のみ – 幅481 px以上でラベルを表示し、それ未満ではアイコンだけを表示します。
独自リンク経由のみ（チャットアイコンなし） – チャットボタンをまったく表示しません。下記参照。

言語別のラベル

フォームのラベルと2行目は、すべての言語に適用されます。言語ごとに変えるには、テキストとフォーム → 独自の文言でlauncher.textとlauncher.subtextに入力します。そちらの入力が、ここのフィールドより優先されます。詳しくはテキストと言語をご覧ください。

チャットボタンを表示しないチャット

独自リンク経由のみ（チャットアイコンなし）では、チャットボタンを表示しません。訪問者は、運営側が用意したリンクやボタンからチャットを開きます。

<a href="#rc-open">Help & support</a>

チャットを利用できるようにするすべてのページに、このようなリンクを1つ以上設置してください。その後、インストールの埋め込みスニペットをもう一度コピーします。新しいスニペットにはブランドの色が含まれないため、ページの読み込み中にチャットボタンが一瞬表示されなくなります。

接続がない場合や、初回訪問でCookieへの同意前など、サーバーから設定を取得できていない間は、予備の手段としてチャットボタンを表示します。絶対に表示させない場合は、スニペットに次も追加してください。

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

data-rc-hide-launcherは、アカウントの設定に関係なく常に適用されます。チャットボタンがなければ、ボタンに付くツールチップの吹き出しも表示しません。テキストの事前入力やタブの選択を含む、独自の要素からチャットを開く方法は、独自のリンクやボタンからチャットを開くで説明しています。

リンクの代わりに、ページの既存の要素をトリガーにすることもできます。data-rc-launcher-selectorにCSSセレクターを指定します。

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        data-rc-launcher-selector="#hilfe-knopf"
        async></script>

位置と余白

左右の位置、余白、重なり順はスニペットで設定します。アカウントには設定用のフィールドはありません。

data-rc-position – right（既定）またはleft。
data-rc-offset – 端からの距離をピクセル単位のJSONで指定します。既定値は{"x":20,"y":20}です。ウィジェットは、iPhoneのノッチなどのセーフエリアを加算します。
data-rc-z-index – 重なり順で、既定値は2147483000です。独自の要素をチャットの上に表示したい場合は、小さくしてください。

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-position="left"
        data-rc-offset='{"x":24,"y":96}'
        async></script>

同じフィールドは、window.ReactiveChatSettingsまたはReactiveChat('boot', …)で、position、offset、zIndexとしても使えます。技術的な連携を参照してください。

バーとの重なりを避ける

ページの下端にCookieバナー、カートのバー、スマートフォンのナビゲーションバーなどの固定バーがある場合、チャットボタンは自動的にその上へ移動し、12 pxの間隔を空けます。ページが変わると再測定します。ウィンドウの高さの40％を超える要素はオーバーレイと見なし、回避しません。

スニペットで無効にできます。

data-rc-avoid-overlap="false"

独自アイコン付きのチャットボタン

完全に独自のアイコンは、コードのブランド設定で指定できます。launcher.iconにインラインSVGまたはdata:アドレスを指定すると、選択したアイコンより優先されます。

ReactiveChat('setBrand', {
  launcher: { shape: 'bubble', label: 'Ask us', icon: 'data:image/svg+xml,…' }
});

注意：スニペットのブランド設定（data-rc-brand）にこのようなフィールドがあると、そのページではアカウントの設定より優先されます。色、フォント、テーマを参照してください。

スマートフォンでの表示

幅481 px未満、および横向きで高さ480 px以下のスマートフォンでは、スマートフォン用のサイズを適用します。大きな画面のみの設定では、アイコンだけを表示します。訪問者がチャットを開くと、ウィンドウが全画面に広がり、チャットボタンは引っ込みます。

想定と異なるチャットボタンが表示される場合

ボタンが表示されない： 独自リンク経由のみになっていませんか。または、スニペットにdata-rc-hide-launcher="true"がありませんか。プロジェクトは一時停止中ではありませんか。
「独自リンク経由のみ」なのにボタンが表示される： ウィジェットがまだサーバーの設定を受信していません（予備の表示）。data-rc-hide-launcher="true"も追加してください。
アイコンなしでも吹き出しが表示される： アイコンなしには、ラベルと常に表示の設定が必要です。
変更が反映されない： スニペットのdata-rc-brandに、ラベル、アイコンなどの追加フィールドがありませんか。その場合はスニペットが優先されます。

最終更新: 2026-10-25