ウィジェットの埋め込み

ページのheadに2行を追加します。インラインスクリプトがないため、厳格なCSPでも動作します。

簡単な手順

次の行をページのheadに追加し、SITE_KEYを自分のキーに置き換えます。

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

これだけです。ローダーは3.48 kBで、ブラウザーに余裕ができるか、訪問者がチャットボタンに触れるまで、コアを取得しません。

`loader.js`を自分で配信する場合は、もう1行必要です

ポリシー、ステージング環境、慣習などの理由で、当社の配信ネットワークではなく独自のディレクトリからスクリプトを読み込みたい場合もあるでしょう。それも可能ですが、チャットの接続先を明示する必要があります。

<script src="/js/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
        async></script>

理由： 指定しないと、ウィジェットはスクリプトの配信元からアドレスを導きます。運営側のドメインから配信した場合、そこにチャットも探すため、見つかりません。

しかも、分かりにくい形で失敗します。 ボタンは表示され、ウィンドウも開き、色や言語も正しく、すべて完了したように見えます。ただ、メッセージはまったく届きません。接続がバックグラウンドで再試行を続けるため、エラーも表示されず、それが問題を隠します。探しても見つからないホスト名が表示されるのは、ブラウザーのコンソールだけです。

上記の値は、当社のすべてのアカウントで同じです。独自の値を入れるのは、サーバーを自分で運用する場合だけです。

Webサイト独自のサブドメイン経由

チャットをファーストパーティーとして独自のサブドメイン（cdn.reactive.chatの代わりにchat.your-company.comなど）で動作させる場合、プロキシの設定は独自ドメインのガイドで説明しています。その場合、アカウントには対応するスニペットが表示されます。

WebSocketがブロックされる場合

企業のプロキシの背後など、ネットワークがWebSocketを通さない場合、チャットは通常のHTTPSで自動的に続行します。そのため、Content Security Policyには、下記のwss://アドレスに加えてhttps:// のアドレスが必要です。切り替え条件とテスト用に強制する方法は、HTTPフォールバックで説明しています。

独自リンクからチャットを開く、プロモーションカードを表示する

ページ上の任意のリンクやボタンから、そのすぐ横にウィンドウを表示してチャットを開けます。独自のリンクやボタンからチャットを開くを参照してください。有料プランなど、独自の案内をカードとしてチャットに表示する方法は、チャット内のプロモーションカードで説明しています。

プライバシーのテキストを自動で埋め込む

プライバシーポリシーのページに小さな要素を置くと、プロジェクト設定に常に合ったチャットの説明文を、そのページの言語で表示できます。プライバシーのテキストを自動で埋め込むを参照してください。

インラインスクリプトを使わない理由

競合サービスが通常提供するのは、インラインの<script>です。unsafe-inlineのない厳格なContent Security Policyでは、1行も実行される前にブロックされます。上記の属性形式には、インラインスクリプトは不要です。

ポリシーで追加で許可する必要があるのは、次の項目です。

script-srcに配信ホスト（ここではcdn.reactive.chat）
connect-srcにWebSocketアドレス（ここではwss://ws.reactive.chat）
connect-srcに同じアドレスのhttps:// 形式も追加（ここではhttps://ws.reactive.chat ）。企業のプロキシがWebSocketをブロックした際に、オフラインフォームとHTTPフォールバックが使用します。

scriptタグの設定

data-rc-site-key — 必須です。意図的に、これがなければ何も起動しないようにしています。
data-rc-locale — de、en、pl。省略するとブラウザーが決めます。
data-rc-brand — ブランドの色。テキストは読みやすくなるまで再計算します。
data-rc-ws-url — cdn.reactive.chat以外からloader.jsを読み込む場合は必須です。上のセクションを参照してください。

その他は、機能一覧と料金ページにあります。

ドキュメントの詳細

手順ごとの説明：クイックスタート。すべてのscriptタグ属性の型と既定値：scriptタグのリファレンス。すべての章はドキュメントにあります。

最終更新: 2026-10-25