브라우저 이벤트: on, off와 DOM 이벤트

ReactiveChat('on')과 window의 DOM 이벤트로 위젯이 페이지에 알리는 이벤트, 포함 데이터와 분석 도구에 전달하는 방법.

위젯은 채팅의 동작을 ReactiveChat('on', …)과 window의 DOM 이벤트 두 방식으로 알립니다. 어느 쪽도 메시지 텍스트를 포함하지 않으며 발생 사실만 알립니다. 서버에서 콘텐츠를 받으려면 웹훅을 사용합니다.

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). 위치·페이지 조회당 한 번이며 창이 열려 있을 때만입니다.
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 모드에서도 없습니다.
메시지 텍스트를 포함하는 이벤트는 없습니다. 서버 측에서 웹훅으로 받습니다.

다음: 방문자 식별과 맥락 전달

최종 업데이트: 2026-10-25