クイックスタート：5分で使えるチャット
1行でウィジェットを埋め込み、プロジェクトにドメインを登録し、Content Security Policyを拡張して接続を確認します。ログイン済みユーザー、独自ボタン、バックエンド連携の次の手順も説明します。
1. サイトキーを取得し、ドメインを登録する
アカウントのプロジェクト → インストールに、サイトキー付きの埋め込みスニペットがあります。許可するオリジンには、チャットを動作させるすべてのドメインを入力します。サブドメインも含まれます（your-company.comでwww.your-company.comとshop.your-company.comをカバーします）。チャットサーバーは、これらのドメインからの接続だけを受け付けます。
2. 埋め込みの1行
アカウントのスニペットを</body>の前、または<head>内に置きます。
<script src="https://cdn.reactive.chat/loader.js"
data-rc-site-key="SITE_KEY"
data-rc-locale="en"
async></script>
アカウントのスニペットには、チャットボタンを最初から正しい色で表示するために、ブランドの色を含むdata-rc-brandも付いています。そのため、そのままコピーすることをお勧めします。すべての属性はscriptタグのリファレンスを参照してください。
3. Content Security Policyを拡張する
WebサイトでCSPを設定している場合は、次を追加します。
script-src https://cdn.reactive.chat;
connect-src wss://ws.reactive.chat https://ws.reactive.chat;
img-src data: https:;
connect-srcに両方の項目が必要な理由は、セキュリティとCSPで説明しています。
4. 動作を確認する
開発者ツールを開いた状態でページを表示します。
- Elements：
<body>の末尾に<reactive-chat>があります。 - Network：
loader.js、次に（遅くともチャットボタンにカーソルを合わせると）core.<hash>.js、さらにステータスコード101のwss://ws.reactive.chat/rc_wss/へのWebSocket接続が表示されます。 - Console： 読み込み後、
ReactiveChat('getSession')が{ sessionId, visitorId, tabId }を返します。
テストメッセージを送信すると、アカウントのオペレーター画面に表示されます。接続できない場合は、トラブルシューティングを参照してください。
別の導入方法
タグマネージャー経由： ローダーは、自身の<script>要素から属性を読み取ります。そのため、属性付きの実際の<script src>を挿入するタグを作成するか、事前に設定を指定してください。
<script>
window.ReactiveChatSettings = { siteKey: 'SITE_KEY', locale: 'en' };
</script>
<script src="https://cdn.reactive.chat/loader.js" async></script>
厳格なCSPでは、インラインスクリプトにnonceが必要です。タグマネージャー側で設定してください。
loader.jsを自分で配信する場合： 独自のディレクトリからファイルを読み込む場合は、チャットのアドレスを明示してください。指定しないと、ウィジェットは運営側のドメインでチャットサーバーを探すため、エラーメッセージも表示されず、メッセージが届きません。
<script src="/js/loader.js"
data-rc-site-key="SITE_KEY"
data-rc-ws-url="wss://ws.reactive.chat/rc_wss/"
data-rc-cdn-base="https://cdn.reactive.chat/"
async></script>
data-rc-cdn-baseを指定すると、ローダーは引き続き当社から対応するコアを取得します。注意：loader.jsのコピーは更新されません。コアが変わった場合は、自分で更新する必要があります。cdn.reactive.chatまたは独自ドメイン経由での埋め込みを引き続きお勧めします。
末尾が2つの部分から成るドメイン（.co.uk、.com.auなど）でファイルを自分で配信する場合は、必ずdata-rc-ws-urlを明示してください。
シングルページアプリ： アプリのシェルに1回だけ埋め込みます。SPAとページ変更を参照してください。
モバイルアプリ： モバイルアプリを参照してください。
次の手順
最終更新: