ウィジェットをインストールする

RolChat ウィジェットは、有効にしたモジュールに合わせて変化する1つのフローティングボタンです。チャット、折り返し電話のリクエストフォーム、会議予約、リードフォーム、ナレッジベース検索がすべてその中にあります。インストールは一度だけで、何を表示するかはダッシュボードで決めます。

1. スニペットをコピーする

設定 → ウィジェット でサイトを選び、インストール用スニペットをコピーします。次のような形式です。

<!-- RolChat widget -->
<script>
  window.rolchatConfig = {
    "site_id": "ste_…",
    "account_id": "…",
    "widget_key": "wk1.<site>.<signature>",
    "modules": ["chat"]
  };
</script>
<script async src="https://widget.rolchat.com/stub.js"></script>

ウィジェットキーは公開情報であり、ページに含めても安全です。キーはサイトを示し、署名されているため、第三者がウィジェットのコピーをあなたのアカウントに向けることはできません。ウィジェットの設定（あいさつ文、ヘッダーのタイトル、テーマ、勤務時間、ビューポート別のレイアウト）を変更すると、ダッシュボードはオブジェクトにキーを追加します。設定を変更したらスニペットを再度コピーするか、オブジェクトを最小限のままにして残りをウィジェットに取得させてください。

stub.js は数キロバイトで、残りは訪問者が必要とするときにだけ読み込みます。チャット画面は初めて開いたとき、トラッキングは同意の後、同意バナーは必要な場合にのみ読み込まれます。

2. </body> の前に貼り付ける

ウィジェットを表示したいすべてのページにスニペットを追加します。サイトのテンプレートやタグマネージャーを使えば、一度にすべてのページへ反映できます。スクリプトは非同期で読み込まれ、描画をブロックしません。初回読み込みのバンドルは Core Web Vitals に影響しないよう、意図的に小さく保たれています。

3. 動作を確認する

プライベートウィンドウでサイトを開きます。選んだ隅にボタンが表示されます。ダッシュボードの訪問者に新しい匿名セッションがリアルタイムで表示され、ウィジェットから送信したメッセージは受信箱に新しい会話として表示されます。

ログイン中のユーザーを識別する

訪問者が自社製品にサインインする場合は、それが誰かを RolChat に伝えると、会話が正しい連絡先に紐付けられます。

window.rolchat.identify({
  email: "alice@example.com",
  first_name: "Alice",
  last_name: "Martin",
  phone: "+15551234567",
  external_id: "user_12345",
  custom_fields: { plan: "pro" },
});

受け付ける属性は email、phone、first_name、last_name、external_id、およびフラットな custom_fields オブジェクトです。それ以外は無視されます。RolChat は CRM でメールアドレスを検索します。連絡先が存在すればセッションがその連絡先に紐付けられ、担当者はプロフィールを確認できます。存在しない場合は情報が保持され、訪問者が初めてメッセージを送ったときにリードが作成されます。

より高い信頼性が必要な場合は、バックエンドで ID に署名できます。RolChat がそのユーザー用に発行した署名を属性と一緒に渡すと、署名が検証された場合にのみセッションが昇格されます。ユーザーがサインアウトしたら window.rolchat.reset() を呼び出してください。呼び出さないと、そのブラウザを次に使う人に前の会話が表示されます。

JavaScript API

window.rolchat はスタブが実行されるとすぐに使えます。バンドルの読み込み前に行われた呼び出しはキューに入り、順番に実行されます。

メソッド	機能
show() / hide()	ランチャーを表示または非表示にする
open() / close()	チャットパネルを開くまたは閉じる
identify(traits)	セッションを人物に紐付ける（上記）
reset()	ID を破棄し、新しい匿名セッションを開始する
pushEvent(name, props)	トリガーメッセージと自動化のためにカスタムイベントを送信する
trackPageView(path?)	シングルページアプリでページビューを送信する
setLocale(code)	ウィジェットの言語を切り替える
showConsentPreferences()	同意設定センターを開く
on(event, handler) / off(event, handler)	chat:opened、chat:closed、message:sent、message:received、session:started を購読する

window.rolchat.pushEvent("cart_abandoned", { value: 129.9, currency: "EUR" });
window.rolchat.on("message:received", () => audio.play());

言語と表示方向

ウィジェットは、window.rolchatConfig の lang で指定した言語で表示されます（例: "lang": "de"）。指定がない場合は、RolChat が対応する40言語のうち、ブラウザーの優先順に従って訪問者のブラウザーの言語が使われ、該当しない場合は英語です。サイト自体の言語設定は使われません。ウィジェットにサイトの言語を使わせるには lang を設定してください。アラビア語とヘブライ語は右から左に表示されます。担当者のメッセージはウィジェットでは翻訳されません。担当者側では代わりに AI のライブ翻訳を使えます。

Cookie と同意

同意バナーが必要な地域では、ウィジェットは同意前に訪問者をトラッキングしません。RolChat のプライバシーモジュールを使う場合、バナーとウィジェットは1つの同意状態を共有します。別の同意ツールを使う場合、ウィジェットの分析イベントは 設定 → プライバシー → 埋め込み で設定したシグナルを待ちます。

ウィジェットの設定場所

項目	場所
色、位置、あいさつ文、エントリーポイント、インストール用スニペット	設定 → ウィジェット
ウィジェット内に表示するモジュール	設定 → モジュール（サイトごと）
勤務時間とオフラインメッセージ	設定 → サイト → 勤務時間
特定のページに表示するトリガーメッセージ	マーケティング → トリガー