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를 사용하여 이 동작을 맞춤설정합니다.

인수:

반환:

• void

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

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

clearAuthentication

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

인수:

• 없음

반환:

• void

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

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

startNewSession

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

인수:

반환:

• 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

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

인수:

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

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();