ブラウザーのイベント：on、off、DOMイベント

ウィジェットは、ReactiveChat('on', …)とwindowのDOMイベントの2つの方法で、チャット内の出来事を通知します。どちらもメッセージ本文を含まず、出来事があったことだけを伝えます。サーバーで内容を取得するには、Webhookを使います。

ReactiveChat('on')と('off')

function beiNachricht(e) {
  if (e.direction === 'in') { document.title = '(1) ' + document.title; }
}
ReactiveChat('on', 'message', beiNachricht);
// later:
ReactiveChat('off', 'message', beiNachricht);

読み込み前でもonを呼べます。登録はキューで待機します。ただしonはコマンドなので、commandトリガーでコアを即座に読み込みます。コールバック内のエラーはウィジェットが捕捉し、チャットには影響しません。不明な名前は何も表示せず無視します。

イベントとそのデータ：

• ready – { conversationId }。接続し、利用可能になりました。戻り値のあるコマンドを呼ぶタイミングです。
• open – { trigger }。ウィンドウを開きました。triggerは開いたきっかけで、既定はapiです。
• close – {}。ウィンドウを閉じました。
• message – { direction }。メッセージの受信（in、チームやアシスタントから）または送信（out、訪問者から）。内容はありません。
• unread – { count }。未読件数が変わりました。
• csat – { score }。訪問者が評価しました（1または-1）。
• handoff – { reason, to }。会話を引き継ぎました。toはagent、queue、bot、offline_formです。
• proactive – { ruleId }。ルールがプロアクティブメッセージを発生させました。
• ab – { test, variant, qa }。訪問者をA/Bバリアントに割り当てました。
• teaser:shown – { ruleId, ts }。吹き出しを表示しました。
• teaser:click – { ruleId }。吹き出しをクリックしました。
• teaser:dismiss – { ruleId }。吹き出しを閉じました。
• teaser:reply – { ruleId, text }。クイック返信を選択しました。textは、運営側が定義したボタンのテキストです。
• promo:shown – { ort }。プロモーションカードが表示されました（gespraechまたはstart）。場所とページ表示ごとに1回で、ウィンドウが開いている場合だけです。
• promo:click – { ziel, ort }。カードのボタン（knopf）またはテキストリンク（link）をクリックしました。

例：分析ツールへイベントを渡す

['open', 'close', 'csat', 'handoff', 'promo:click'].forEach(function (name) {
  ReactiveChat('on', name, function (e) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: 'reactivechat_' + name.replace(':', '_'), rc: e });
  });
});

windowのDOMイベント

onとは独立して、windowにCustomEventを発行します。バブリングしません（bubbles: false）。各detailには追加でtsを含みます。タグマネージャーなど、DOMイベントを監視するツールに適しています。

• reactivechat:ready – { sessionId, visitorId, version }
• reactivechat:opened – { conversationId, trigger }
• reactivechat:closed – { conversationId }
• reactivechat:message – { conversationId, direction }。本文は含みません。
• reactivechat:bot_handoff – { conversationId, reason }
• reactivechat:csat – { score }
• reactivechat:proactive_shown – { ruleId }
• reactivechat:teaser_shown – { conversationId, ruleId }

window.addEventListener('reactivechat:opened', function (ev) {
  console.log('Chat open since', new Date(ev.detail.ts));
});

ウィジェットが監視するイベント

MousePlayerを使う場合、mouseplayer:ready、mouseplayer:frustration、mouseplayer:intent、mouseplayer:milestoneを評価します。mouseplayer:frustrationはコアの早期読み込みも行います。他の取得元は不要です。

提供していないもの

• ページ用のpostMessageチャネルはありません。iframeモードでも同じです。
• メッセージ本文を含むイベントはありません。内容は、サーバー側のWebhookで取得します。

次：訪問者の本人確認と状況情報の受け渡し