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`

이 함수는 에이전트 대화상자의 영구 스토리지를 삭제합니다. 또한 에이전트 대화상자의 현재 상태도 지웁니다.

인수:

없음

반환:

void

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

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

`clearAuthentication`

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

인수:

없음

반환:

void

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

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

startNewSession

이 함수는 에이전트 대화상자 내에서 새 세션을 시작합니다. 현재 메시지 기록을 유지하거나 재설정할 수 있습니다. 사용자 인증은 삭제되지 않습니다.

인수:

이름	유형	설명
`args`	`object?`	새 세션 만들기를 구성하기 위한 선택적인 인수입니다.
`args.retainHistory`	`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	객체?	최소화된 채팅을 구성하기 위한 선택적 인수입니다.
args.anchor	문자열?	최소화된 채팅이 열리는 위치를 구성하는 선택적 `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();