Dialogflow CX 메신저

이번 통합은 웹사이트에 삽입할 수 있는 맞춤설정 가능한 에이전트용 채팅 대화상자를 제공합니다.

Dialogflow 메신저 스크린샷

설정

이 통합은 인증되거나 인증되지 않은 최종 사용자 에이전트 쿼리 액세스를 허용할 수 있습니다.

인증되지 않은 설정

Dialogflow CX 메신저 에이전트에 무단 액세스를 설정하려면 다음 안내를 따르세요.

  1. Dialogflow CX 콘솔로 이동합니다.
  2. Google Cloud 프로젝트를 선택합니다.
  3. 에이전트를 선택합니다.
  4. 관리 탭을 선택합니다.
  5. 왼쪽 사이드바 메뉴에서 통합을 클릭합니다.
  6. Dialogflow CX 메신저에서 연결을 클릭합니다.
  7. 구성 대화상자가 열립니다.
  8. 이전에 이 에이전트에 대한 통합을 설정한 경우 삽입 가능한 HTML 코드가 표시됩니다. 인증 여부와 관계없이 대화상자 하단에서 사용 중지... 버튼을 클릭하여 다음 단계에서 설정을 다시 구성할 수 있습니다.
  9. 환경을 선택합니다.
  10. 인증되지 않은 API를 선택합니다.
  11. 스타일을 선택합니다.
  12. 원하는 경우 도메인 액세스를 제한합니다.
  13. 인증되지 않은 API 사용 설정을 클릭합니다.
  14. 대화상자에 웹사이트에 삽입할 수 있는 삽입 가능한 HTML 코드가 표시됩니다. 이 코드를 복사합니다.
  15. 완료를 클릭합니다.

인증된 설정

Dialogflow CX 메신저 에이전트에 인증된 액세스를 설정하려면 다음 안내를 따르세요.

  1. Dialogflow CX 콘솔로 이동합니다.
  2. Google Cloud 프로젝트를 선택합니다.
  3. 에이전트를 선택합니다.
  4. 관리 탭을 선택합니다.
  5. 왼쪽 사이드바 메뉴에서 통합을 클릭합니다.
  6. Dialogflow CX 메신저에서 연결을 클릭합니다.
  7. 구성 대화상자가 열립니다.
  8. 이전에 이 에이전트에 대한 통합을 설정한 경우 삽입 가능한 HTML 코드가 표시됩니다. 인증 여부와 관계없이 대화상자 하단에서 사용 중지... 버튼을 클릭하여 다음 단계에서 설정을 다시 구성할 수 있습니다.
  9. 환경을 선택합니다.
  10. 승인된 API를 선택합니다.
  11. 스타일을 선택합니다.
  12. 원하는 경우 도메인 액세스를 제한합니다.
  13. 승인된 API 사용 설정을 클릭합니다.
  14. 대화상자에 웹사이트에 삽입할 수 있는 삽입 가능한 HTML 코드가 표시됩니다. 이 코드를 복사합니다.
  15. 완료를 클릭합니다.
  16. OAuth 클라이언트를 설정합니다.
    1. 조직의 OAuth 동의 화면을 만듭니다. 필수 범위로 ./auth/cloud-platform을 추가합니다.
    2. OAuth 2.0 클라이언트 ID를 만듭니다. 승인된 JavaScript 출처에서 에이전트를 호스팅하고 쿼리할 수 있는 HTTP 출처를 지정합니다. 예를 들면 https://your-company.com입니다.
    3. 최종 사용자에게 에이전트를 쿼리할 수 있는 권한을 제공합니다. 각 최종 사용자 또는그룹을 Dialogflow API 클라이언트 및 서비스 사용량 소비자 역할이 있는 주 구성원으로 추가합니다.

삽입

위에서 복사한 삽입 코드를 웹사이트의 웹페이지에 붙여넣습니다. <script> 및 <df-messenger> HTML 요소는 페이지의 <body> 요소에 있어야 합니다.

인증된 통합을 사용하는 경우 <df-messenger>의 oauth-client-id 속성을 Oauth 클라이언트 ID로 설정합니다.

업데이트가 필요한 다른 모든 속성을 업데이트합니다.

반응형 레이아웃을 허용하려면 <head> 요소에 다음을 추가합니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

맞춤설정

채팅 대화상자의 모양과 동작에 영향을 주기 위해 적용할 수 있는 다양한 HTML 맞춤설정 및 CSS 맞춤설정이 있습니다.

JavaScript

채팅 대화상자와 상호작용하는 데 사용할 수 있는 여러 JavaScript 이벤트 및 JavaScript 함수가 있습니다.

예

다음 예시는 HTML 맞춤설정, CSS 맞춤설정, JavaScript 이벤트 처리를 보여줍니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>My chat</title>
  <style>
    df-messenger {
      /*
       * Customize as required. df-messenger will fill the
       * space that is provided.
      */
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 320px;
    }
  </style>
  <script src="https://www.gstatic.com/dialogflow-console/fast/df-messenger/prod/v1/df-messenger.js"></script>
</head>
<body>
<df-messenger
    location="global" <!-- TODO: update agent location as needed -->
    project-id="my-project-id" <!-- TODO: update project ID -->
    agent-id="my-agent-id" <!-- TODO: update agent ID -->
    language-code="en" <!-- TODO: update agent language as needed -->
>
  <df-messenger-chat
      chat-title="Agent Name" <!-- TODO: update dialog title as needed -->
  ></df-messenger-chat>
</df-messenger>

<script>
  // An example of handling events: Navigate to the first suggested URL.
  document.addEventListener('df-url-suggested', (event) => {
    if (Array.isArray(event.detail.suggestedUrls) &&
      event.detail.suggestedUrls.length) {
      window.location.href = event.detail.suggestedUrls[0];
  }
});
</script>
</body>
</html>

Fulfillment

상담사 응답에 사용할 수 있는 다양한 fulfillment 응답 유형이 있습니다.

응답 피드백

만약 응답 피드백이 사용 설정되어 있으면, 채팅 대화상자에 좋아요 및 싫어요 버튼이 사용자 인터페이스에 기본으로 추가됩니다. 대화 중 최종 사용자가 이 버튼을 클릭하여 에이전트 응답에 대한 피드백을 제공할 수 있습니다. 사용자가 싫어요를 선택할 때는 부정적인 의견을 보내는 이유를 선택적으로 제공할 수 있습니다.

커스텀 피드백 구성요소

커스텀 피드백 요소를 지정하려면 웹사이트에 새 커스텀 요소를 정의해야 합니다. 피드백을 제출하려면 요소가 df-custom-submit-feedback-clicked 이벤트를 내보내야 합니다. 포함된 detail 필드는 문자열이어야 합니다.

class CustomFeedbackElement extends HTMLElement {
  constructor() {
    super();
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  // Web component Lifecycle method.
  connectedCallback() {
    const wrapper = document.createElement('div');

    // Build the component as required.
    const button = document.createElement('button');
    button.innerText = 'Submit';
    button.addEventListener('click', () => {
      this._onSubmitClick();
    });
    wrapper.appendChild(button);

    this.renderRoot.appendChild(wrapper);
  }

  // Called when Submit button is clicked.
  _onSubmitClick() {
    const event = new CustomEvent("df-custom-submit-feedback-clicked", {
      // `detail` may be any string,
      // this will be sent to the backend to be stored.
      detail: JSON.stringify({
        "usefulness": 2,
        "accuracy": 3,
      }),
      // Required to propagate up the DOM tree
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles
      bubbles: true,
      // Required to propagate across ShadowDOM
      // https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
      composed: true,
   });
   this.dispatchEvent(event);
  }
}

(function() {
  // Registers the element. This name must be "df-external-custom-feedback".
  customElements.define('df-external-custom-feedback', CustomFeedbackElement);
})();

디버깅

Dialogflow 메신저로 에이전트를 로컬에서 테스트하려면 다음 안내를 따르세요.

  • 위 설명처럼 페이지에 Dialogflow 메신저 요소를 삽입합니다.
  • 특정 포트로 페이지의 로컬 HTTP 서버를 시작합니다.
  • http://localhost:port_number에서 페이지에 액세스합니다.