Dialogflow 메신저 JavaScript 이벤트

Dialogflow 메신저는 이벤트 리스너를 만들 수 있는 다양한 이벤트를 트리거합니다. 일부 이벤트에는 이벤트에 대한 자세한 정보를 제공하는 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(); // Dialogflow 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(); // Dialogflow 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`

`df-accordion-clicked`

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

세부정보 속성:

없음

`df-button-clicked`

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

세부정보 속성:

actionLink(string): 클릭된 버튼의 앵커 href(지정된 경우)
event(string): 클릭된 버튼의 이벤트(지정된 경우)
languageCode (string): 지정된 경우 이벤트의 언어 코드, 그렇지 않으면 기본 언어 코드
text (string): 클릭된 버튼의 텍스트

window.addEventListener('df-button-clicked', (event) => {
  event.preventDefault(); // Dialogflow 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(); // Dialogflow Messenger won't send the "event" request.

  // Handle "event" yourself.
});

`df-image-clicked`

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

세부정보 속성:

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