컨테이너

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

사용

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

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

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

<agent-assist-ui-modules>

속성

속성 이름 유형 댓글
특징 문자열 렌더링할 상담사 지원 추천 기능 키의 쉼표로 구분된 목록입니다. 예: '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";
  };
}