컨테이너

이 페이지에는 UI 모듈 구현의 컨테이너 메서드에 관한 API 문서가 포함되어 있습니다. 다음은 컨테이너 내에서 구성요소로 구현할 수 있는 Agent Assist 기능입니다.

버전 2

컨테이너 v2는 초기 컨테이너에 비해 크게 개선되었습니다. 가장 효과적인 추천과 주요 도구를 상담사가 항상 이용할 수 있도록 버전 2에서는 동적 패널과 통합 추천 피드가 있는 반응형 디스플레이를 사용합니다. 이 버전은 컨테이너에서 UI 모듈 커넥터를 분리하여 통합 유연성도 높입니다.

버전 1에서 버전 2로 업그레이드

컨테이너 v1에서 v2로 업그레이드하려면 UI 커넥터를 초기화해야 합니다. UI 커넥터 구성은 이전에 HTML 속성으로 <agent-assist-ui-modules> 요소에 전달된 동일한 키와 값을 사용합니다.

업그레이드를 시작하기 전에 다음 세부정보를 확인하세요.

  • 맞춤 HTML 요소 이름은 <agent-assist-ui-modules-v2>여야 합니다.
  • features 속성은 <agent-assist-ui-modules-v2> HTML 요소(예: CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2,SMART_REPLY)에 필요합니다.
  • UI 모듈 v1에서 v2로 업그레이드하는 과정에서 에이전트 지원 엔지니어링팀은 이전에 HTML 속성으로 지정된 값을 UI 모듈 커넥터 구성으로 이동했습니다.
  • 커넥터 구성에는 features 문자열이 필요하지 않습니다.

사용

다음 코드를 사용하여 HTML 페이지에서 모듈을 가져옵니다.

<script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>

다음 태그를 사용하여 모듈을 삽입합니다.

<agent-assist-ui-modules-v2>

속성

속성 이름 유형 댓글
특징 문자열 렌더링할 Agent Assist 추천 기능 키의 쉼표로 구분된 목록입니다. 예: 'SMART_REPLY, CONVERSATION_SUMMARIZATION'
api-headers 문자열 Dialogflow API 호출에 포함할 추가 헤더입니다. 예: 'Content-Type:application/json, Accept:application/json'
conversation-profile 문자열 사용할 대화 프로필의 이름입니다.
agent-desktop AgentDesktop 통합할 에이전트 데스크톱 소프트웨어입니다.
auth-token 문자열 API 호출에 사용할 인증 토큰입니다.
api-key 문자열 API 호출에 사용할 선택적 API 키입니다.
채널 CommunicationChannel 이 애플리케이션에 사용된 커뮤니케이션 채널 (채팅, 음성 또는 옴니채널)입니다.
custom-api-endpoint 문자열 사용할 선택적 맞춤 API 엔드포인트입니다 (UI 모듈이 프록시 서버로 구성된 경우).
테마 'dark' | 'light' 사용할 색상 테마입니다.
show-header BooleanString Agent Assist 추천 헤더를 표시할지 여부입니다.
dark-mode-background 문자열 어두운 모드에 사용할 배경색입니다. 지정되지 않은 경우 기본값이 기본 지원 에이전트 데스크톱에 제공됩니다.
notifier-server-endpoint 문자열 이벤트 기반 대화에 사용할 알림 서버 엔드포인트입니다.
event-based-transport EventBasedTransport 이벤트 기반 대화에 사용할 전송 프로토콜입니다.
event-based-library EventBasedLibrary 이벤트 기반 대화에 사용할 라이브러리입니다.
oauth-client-id 문자열 일부 상담사 데스크톱 구성 (Genesys Cloud)에 사용되는 암시적 인증을 위한 선택적 OAuth 클라이언트 ID입니다.
redirect-uri 문자열 인증 후 이동할 선택적 리디렉션 URI입니다. 일부 에이전트 데스크톱 구성 (Genesys Cloud)에서 사용됩니다.
genesys-cloud-region 문자열 Genesys Cloud의 선택적 리전입니다. 기본값은 mypurecloud.com입니다.

사용

속성은 다음과 같은 방법으로 설정할 수 있는 문자열 기반 구성요소 속성입니다.

HTML 템플릿에서 직접:

<element-selector property-name="value">

JavaScript 코드에서:

var el = document.querySelector('element-selector');
el.setAttribute('property-name', 'value');

입력

속성 이름 유형 댓글
socketIoConnectOpts SocketIoConnectOpts 추가 Socket.io 연결 옵션입니다.
config UiModuleContainerConfig 모듈별 구성을 정의하는 구성 객체입니다.

사용

입력은 일반적으로 JavaScript 객체 또는 다른 복잡한 속성 유형이며 요소 인스턴스에 직접 할당해야 합니다.

const el = document.querySelector('element-selector');
el.propertyName = value;

유형

구성요소에서 사용되는 맞춤 유형은 다음 섹션을 참고하세요.

AgentDesktop

"LivePerson" | "GenesysCloud" | "SalesForce" | "Custom"

CommunicationChannel

"chat" | "voice" | "omnichannel"

BooleanString

"true" | "false"

EventBasedTransport

"websocket" | "polling"

EventBasedLibrary

"SocketIo"

SocketIoConnectOpts

interface SocketIoConnectOpts extends SocketIOClient.ConnectOpts {
  auth: {
    token: string;
  };
  withCredentials?: boolean;
}

UiModuleContainerConfig

interface UiModuleContainerConfig {
  knowledgeAssistConfig?: {
    articleLinkConfig: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
  };
  knowledgeAssistV2Config?: {
    articleLinkConfig?: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
    showCopyAnswer: boolean;
    showPasteAnswer: boolean;
  };
  summarizationConfig?: {
    /**
     * Optional callback that can be used to save the generated summary to an
     * external source.
     */
    onSaveSummary?: (
      summary: {
        summary: string;
        conversationDetails: ConversationDetails;
      },
      saveCallbacks: {
        setLoading: () => void;
        setSuccess: (message: string) => void;
        setError: (message: string) => void;
      }
    ) => void;

    /** Whether to show the 'Generate summary' button. */
    showGenerateSummaryButton?: "true" | "false";
  };
}