Dialogflow CX Messenger JavaScript 이벤트

Dialogflow CX Messenger는 이벤트 리스너를 만들 수 있는 다양한 이벤트를 트리거합니다. 일부 이벤트에는 이벤트에 대한 자세한 정보를 제공하는 detail 객체 필드가 있습니다.

df-messenger-loaded

에이전트 대화상자가 먼저 로드됩니다.

세부정보 속성:

  • 없음

예를 들면 다음과 같습니다.

window.addEventListener('df-messenger-loaded', () => {
  // Messenger is now ready.
});

df-chat-open-changed

채팅이 열리거나 닫힙니다.

세부정보 속성:

  • isOpen(boolean): 채팅의 새로운 상태

예를 들면 다음과 같습니다.

window.addEventListener('df-chat-open-changed', (event) => {
  console.log(`Chat is ${event.detail.isOpen ? 'open' : 'closed'}`);
});

df-user-input-entered

사용자가 텍스트를 입력했습니다.

세부정보 속성:

  • input(string): 사용자가 입력한 값입니다.

예를 들면 다음과 같습니다.

window.addEventListener('df-user-input-entered', (event) => {
  console.log(event.detail.input);
});

df-request-sent

Dialogflow 백엔드로 전송된 요청입니다.

세부정보 속성:

  • data(object): 데이터 컨테이너
  • data.requestBody(object): 전송된 요청

예를 들면 다음과 같습니다.

window.addEventListener('df-request-sent', (event) => {
  console.log('Request', event.detail.data.requestBody);
});

window.addEventListener('df-request-sent', (event) => {
  event.preventDefault(); // Messenger won't send the request.

  // Send request yourself.
});

df-response-received

응답이 에이전트 대화상자에 도착했습니다.

세부정보 속성:

  • data(object): 데이터 컨테이너
  • data.messages(object[]): 파싱된 응답 메시지 목록
  • raw(object): 수신된 그대로의 응답

예를 들면 다음과 같습니다.

window.addEventListener('df-response-received', (event) => {
  // Remove all non-text messages.
  event.detail.data.messages = event.detail.data.messages.filter(message => {
    return message.type === 'text';
  });
});

window.addEventListener('df-response-received', (event) => {
  event.preventDefault(); // Messenger won't handle the response.

  const messenger = document.querySelector('df-messenger');
  event.detail.data.messages.forEach(message => {
    if (message.type === 'text') {
      messenger.renderCustomText(message.text);
    }
  });
});

df-messenger-error

백엔드에 대한 요청이 실패했습니다.

세부정보 속성:

  • error(object): 오류가 발생했습니다.

예를 들면 다음과 같습니다.

window.addEventListener('df-messenger-error', (event) => {
  console.log(event.detail.error);
});

df-session-expired

에이전트가 있는 세션이 만료되었습니다.

세부정보 속성:

  • 없음

예를 들면 다음과 같습니다.

window.addEventListener('df-session-expired', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session expired*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-session-ended

세션이 종료되었습니다.

세부정보 속성:

  • 없음

예를 들면 다음과 같습니다.

window.addEventListener('df-session-ended', () => {
  const messenger = document.querySelector('df-messenger');
  messenger.renderCustomText(`*Session ended*`, /* isBot= */ true);
  messenger.startNewSession({ retainHistory: true });
});

df-url-suggested

추천 리소스의 URL입니다.

세부정보 속성:

  • suggestedUrls(string[]): 추천 URL 목록입니다.

예를 들면 다음과 같습니다.

window.addEventListener('df-url-suggested', (event) => {
  if (event.detail.suggestedUrls.length === 1) {
    window.location.href = event.detail.suggestedUrls[0];
  }
});

df-accordion-clicked

사용자가 아코디언을 클릭했습니다.

세부정보 속성:

  • 없음

df-button-clicked

사용자가 버튼을 클릭했습니다.

세부정보 속성:

  • actionLink(string): 클릭된 버튼의 앵커 href(지정된 경우)
  • event(string): 클릭된 버튼의 이벤트(지정된 경우)
  • languageCode (string): 지정된 경우 이벤트의 언어 코드, 그렇지 않으면 기본 언어 코드
  • text (string): 클릭된 버튼의 텍스트
window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-chip-clicked

사용자가 칩을 클릭했습니다.

세부정보 속성:

  • actionLink(string): 클릭된 칩의 앵커 href(지정된 경우)
  • text(string): 클릭된 칩의 텍스트

df-citation-clicked

사용자가 인용을 클릭했습니다.

세부정보 속성:

  • actionLink(string): 인용의 앵커 href
  • title (string): 인용의 제목

df-info-card-clicked

사용자가 정보 카드를 클릭했습니다.

세부정보 속성:

  • actionLink(string): 정보 카드의 앵커 href
  • title (string): 정보 카드의 제목

df-list-element-clicked

사용자가 목록 요소를 클릭했습니다.

세부정보 속성:

  • actionLink(string): 목록 요소의 앵커 href(지정된 경우)
  • event(string): 클릭된 목록 요소의 이벤트(지정된 경우)
  • languageCode (string): 지정된 경우 이벤트의 언어 코드, 그렇지 않으면 기본 언어 코드
  • title (string): 목록 요소의 제목
window.addEventListener('df-list-element-clicked', (event) => {
  event.preventDefault(); // Messenger won't send the "event" request.

  // Handle "event" yourself.
});

df-image-clicked

사용자가 이미지를 클릭했습니다.

세부정보 속성:

  • actionLink(string): 이미지의 앵커 href(지정된 경우)