独自のリンクやボタンからチャットを開く

Webサイトの任意のリンクやボタンからチャットを開けます。クリックした要素のすぐ横に表示し、テキストの事前入力やタブ選択も可能です。チャットボタンを完全に非表示にもできます。

画面の隅のチャットボタンの代わりに、サイドバーの「ヘルプとサポート」や料金ページの「プランについて質問」など、Webサイトのリンクやボタンから開くこともできます。チャットウィンドウは、その要素のすぐ横に開きます。

追加のコードは不要で、ウィジェットの埋め込みの通常のスニペットで十分です。アカウントのプロジェクト → 埋め込み → 独自リンクからチャットを開くにも、コピーできる例があります。

最も簡単な例

#rc-openへのリンク：

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

または、data-rc-open属性を付けたボタン：

<button type="button" data-rc-open>Open chat</button>

data-rc-openは、ボタン以外の任意の要素でも動作します。リンク先は#rc-openのほか、#reactive-chatにも対応します。

読み込みが終わる前のクリックも受け付け、準備ができ次第ウィンドウを開きます。

ウィンドウの表示位置

空間があれば要素の右側、なければ左側です。ウィンドウの上端を要素に合わせます。
常に全体を表示： 表示領域内に収め、スクロールやブラウザーのサイズ変更でも要素に追従します。
狭い画面（幅480ピクセル未満、つまり大半のスマートフォン）では、通常どおり全画面で開きます。要素の横には空間がありません。
サイドパネル： 外観で全高のサイドパネルに設定している場合、要素の横ではなく、そこに開きます。
すでに開いている場合は、最後にクリックしたリンクの位置に移動します。
Escapeキーを含めチャットを閉じると、開くために使ったリンクやボタンにキーボードフォーカスが戻ります。

通常の画面の隅に開くには、data-rc-open="corner"と指定します。data-rc-anchor="none"も同じです。

<button type="button" data-rc-open="corner">Open chat</button>

メッセージ欄に事前入力する

data-rc-messageを指定すると、開いたときに文が入力済みになります。送信はしません。訪問者が追記、変更、削除でき、自分で送信します。

<button type="button" data-rc-open data-rc-message="I have a question about my plan">
  Question about my plan
</button>

最大200文字を使用します。この場合は会話タブに切り替えます。

タブを選ぶ

複数のタブがある場合、data-rc-tabで開いたときに前面に出すタブを決めます。

msg – 会話
home – ホーム画面
help – ヘルプ記事

<a href="#rc-open" data-rc-tab="help">Browse help articles</a>

指定したタブがない場合（記事がなくhelpがない場合など）は、通常どおり開きます。

独自のJavaScriptから開く

同じオプションを呼び出しでも指定できます。anchorはウィンドウを隣に出す要素で、messageとtabは任意です。

document.querySelector('#my-button').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'I have a question about my plan',
    tab: 'msg'
  });
});

anchorがなければ通常の位置に開きます。オプションなしのReactiveChat('open')は従来どおりです。要素自体にdata-rc-messageやdata-rc-tabがあれば呼び出しにも適用され、呼び出しで明示した値を優先します。

埋め込みスニペットの読み込み前にコードが実行される可能性があれば、その前に次の行を置きます。呼び出しをキューに入れ、準備ができ次第実行します。

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

チャットボタンを完全に非表示にする

サイドバーの「ヘルプとサポート」など、独自リンクからだけ利用できるようにする方法は2つあります。

アカウントで設定： プロジェクト → 外観 → ブランド設定の表示を独自リンク経由のみ（チャットアイコンなし）にして保存します。Webサイトを変更しなくても反映します。ただし、その後、プロジェクト → インストールから埋め込みスニペットを再コピーしてください。新しいものにはブランドの色が含まれず、読み込み中にアイコンが一瞬表示されなくなります。接続がない場合や、初回訪問でCookieに未同意の場合など、サーバーの設定を取得できていない間は、チャットへの入口を保つため、予備としてアイコンを表示します。

スニペットで設定： 絶対に表示させない場合は、埋め込みスニペットのdata-rc-hide-launcher="true"で隠します。アカウントの設定に関係なく、常に適用します。

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

訪問者がチャットを利用できるすべてのページに、このようなリンクを1つ以上置いてください。

トラブルシューティング

クリックしても、アドレスに#rc-openが付くだけ： このページにウィジェットがないか、同意がないなどの理由で読み込まれていません。埋め込みスニペットを確認してください。
リンクの横ではなく隅に開く： 要素にdata-rc-open="corner"やdata-rc-anchor="none"がありませんか。幅480ピクセル未満ではありませんか。サイドパネルに設定していませんか。
テキストがメッセージ欄に入らない： 属性名はdata-rc-messageで、クリックした要素自体に必要です。

スニペットの他の設定は、ウィジェットの埋め込みで説明しています。独自の案内をチャット内のカードで表示する方法は、チャット内のプロモーションカードをご覧ください。

ドキュメントの関連項目

詳しくは、scriptタグのリファレンスとJavaScript APIをご覧ください。すべての章はドキュメントにあります。

最終更新: 2026-10-25