Dialogflow CX Messenger JavaScript

Dialogflow CX Messenger는 사용자가 해당 동작에 영향을 주기 위해 호출할 수 있는 함수를 제공합니다.

renderCustomText

이 함수는 에이전트에서 단순 텍스트 응답으로 제공되었거나 최종 사용자가 입력한 것처럼 단순 텍스트 메시지를 렌더링합니다.

인수:

  • string: 텍스트 메시지
  • boolean: 에이전트 메시지의 경우 true이고, 최종 사용자 메시지의 경우 false

반환:

  • void

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

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text', true);

renderCustomCard

이 함수는 Dialogflow Fulfillment에서 제공된 것처럼 커스텀 카드를 렌더링합니다.

인수:

  • payload: Fulfillment 섹션에 정의된 커스텀 페이로드 응답의 목록입니다.

반환:

  • void

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

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "rawUrl": "https://example.com/images/logo.png"
    },
    "anchor": {
      "href": "https://example.com",
      "target": "_blank"
    }
  }
];
dfMessenger.renderCustomCard(payload);

sendQuery

이 함수는 Dialogflow API에 쿼리를 전송하고 응답을 기다립니다. 이렇게 하면 일반적으로 에이전트 대화상자에 제공되는 최종 사용자 입력을 시뮬레이션할 수 있습니다. 응답은 최종 사용자의 쿼리와 마찬가지로 처리됩니다.

인수:

  • string: 텍스트 쿼리

반환:

  • Promise<void>: 비동기 작업의 반환 값

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

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');

sendRequest

이 함수는 Dialogflow API에 요청을 전송하고 응답을 기다립니다.

인수:

  • string: 요청 유형으로, query (위의 sendQuery 참고) 및 event (커스텀 이벤트 참고)를 지원합니다.
  • any: 현재 지원되는 두 요청 유형의 문자열인 요청 유형에 해당하는 페이로드입니다.

반환:

  • Promise<void>: 비동기 작업의 반환 값

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

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');

setQueryParameters

이 함수는 Dialogflow API detectIntent 요청의 queryParams 필드 기본값을 설정합니다. 다른 Dialogflow CX Messenger 메서드는 쿼리 매개변수의 각 기본값을 대체할 수 있습니다.

인수:

  • object: JSON 데이터 쿼리 매개변수의 스키마는 QueryParameters를 참조하세요.

반환:

  • void

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

const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
  parameters: {
  timeZone: "America/New_York"
  }
};
dfMessenger.setQueryParameters(queryParameters);

setContext

이 함수는 최종 사용자에 대한 생성형 맞춤설정 정보를 Dialogflow로 전송합니다. 이 정보는 남은 세션 동안 유지됩니다.

인수:

  • object: JSON 데이터입니다. 생성형 맞춤설정 문서를 참조하세요.

반환:

  • void

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

const dfMessenger = document.querySelector('df-messenger');
const metadata = {
  "subscription plan": "Business Premium Plus",
  "devices owned": [
    {
      model: "Google Pixel 7",
    },
    {
      model: "Google Pixel Tablet",
    },
  ],
};
dfMessenger.setContext(metadata);

clearStorage

이 함수는 에이전트 대화상자의 영구 스토리지를 삭제합니다. 또한 에이전트 대화상자의 현재 상태도 지웁니다. 기본적으로 사용자의 인증 상태를 유지합니다. 선택적 args를 사용하여 이 동작을 맞춤설정합니다.

인수:

이름 유형 설명
args object? 저장소 지우기 작업을 구성하기 위한 선택적 인수입니다.
args.clearAuthentication boolean? 인증 상태를 지우는 선택적 플래그입니다. true로 설정하면 인증 상태가 삭제되고 그렇지 않으면 유지됩니다.

반환:

  • void

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

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearStorage();

clearAuthentication

이 함수는 에이전트 대화상자의 인증을 삭제합니다.

인수:

  • 없음

반환:

  • void

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

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearAuthentication();

startNewSession

이 함수는 에이전트 대화상자 내에서 새 세션을 시작합니다. 기본적으로 메시지 기록은 삭제되지만 사용자의 인증 상태는 유지됩니다. 선택적 args를 사용하여 이 동작을 맞춤설정합니다.

인수:

이름 유형 설명
args object? 새 세션 만들기를 구성하기 위한 선택적인 인수입니다.
args.retainHistory boolean? 기록을 보관할 선택적인 플래그입니다. true로 설정하면 기록이 유지되고 그렇지 않으면 삭제됩니다.
args.clearAuthentication boolean? 인증 상태를 지우는 선택적 플래그입니다. true로 설정하면 인증 상태가 삭제되고 그렇지 않으면 유지됩니다.

반환:

  • void

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

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });

openChat

이 함수는 채팅을 엽니다. df-messenger-chat-bubble 요소에서 호출하여 채팅을 엽니다. 채팅이 이미 열려 있는 경우 아무 작업도 수행하지 않습니다.

인수:

  • 없음

반환:

  • void

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

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();

closeChat

이 함수는 채팅을 닫습니다. df-messenger-chat-bubble 요소에서 호출하여 채팅을 종료합니다. 채팅이 이미 종료된 경우 아무 작업도 수행하지 않습니다.

인수:

  • 없음

반환:

  • void

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

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();

openMinChat

Dialogflow CX Messenger 최소화된 채팅

이 함수는 최소화된 버전으로 채팅 창을 엽니다. df-messenger-chat-bubble 요소에서 호출하여 최소화된 채팅을 엽니다. 채팅이 이미 최소화된 경우 아무 작업도 수행하지 않습니다.

인수:

이름 유형 설명
args object? 최소화된 채팅을 구성하기 위한 선택적 인수입니다.
args.anchor string? 최소화된 채팅이 열리는 위치를 구성하는 선택적 anchor입니다. 채팅 풍선 요소의 anchor 속성과 동일한 로직입니다. 기본값은 left-top입니다.
args.showActorImages boolean? 작업 수행자 이미지를 표시하는 선택적 플래그입니다(df-messenger-chat-bubble 요소에 지정된 경우). 기본값은 false입니다.

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

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.openMinChat({
  anchor: 'top-left'
});

closeMinChat

최소화된 채팅을 닫습니다. df-messenger-chat-bubble 요소에서 호출하여 최소화된 채팅을 종료합니다. 채팅이 이미 종료된 경우 아무 작업도 수행하지 않습니다.

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

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.closeMinChat();