이 페이지는 Cloud Translation API를 통해 번역되었습니다.

UI 모듈 및 커넥터 구현

Agent Assist는 Agent Assist 기능을 UI에 통합하는 데 사용할 수 있는 사전 빌드된 맞춤설정이 가능한 UI 구성요소 모듈을 제공합니다. 웹 애플리케이션에 모듈을 삽입하여 Agent Assist 추천을 상담사에게 표시할 수 있습니다. 모듈을 LivePerson에 통합하는 방법에 관한 구체적인 안내는 LivePerson 튜토리얼을 참고하세요.

Agent Assist 기능

다음은 UI 모듈 구성요소로 구현할 수 있는 상담사 지원 기능입니다.

시작하기 전에

UI 모듈을 구현하려면 먼저 대화 프로필을 구성합니다.

UI 모듈 구현

Agent Assist 모듈을 UI에 통합하는 방법에는 두 가지 기본 접근 방식이 있습니다. 관리 컨테이너 접근 방식은 선택한 모든 상담사 지원 기능을 단일 패널에 통합합니다. 또는 인터페이스에서 구성을 맞춤설정하려면 기능을 개별적으로 가져오기할 수 있습니다. UI 구성요소와 상담사 데스크톱 간의 통신은 UI 모듈 커넥터에 의해 지원됩니다. 모든 통신은 맞춤 이벤트를 전달하는 방식으로 이루어집니다.

컨테이너 접근 방식과 개별 구성요소는 모두 모든 시스템에서 사용할 수 있지만 Agent Assist는 Genesys Cloud, LivePerson, Twilio, Salesforce에서 사용할 수 있는 UI 모듈 커넥터만 제공합니다. UI 모듈을 다른 상담사 시스템과 통합하려면 자체 커넥터를 만들어야 합니다. 자세한 내용은 맞춤 UI 모듈 커넥터 문서를 참고하세요.

파일 버전

최신 버전을 지정하여 gstatic 파일의 최신 버전을 가져옵니다.

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

정확한 버전을 지정하여 gstatic 파일의 특정 안정화 버전을 검색합니다.

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

최신 버전:

      Container: v1.10
      Common: v1.4
      Knowledge assist: v1.1
      Generative knowledge assist: v2.9
      Smart reply: v1.3
      Summarization: v1.3
      Transcript: v1.2

관리 컨테이너

관리 컨테이너 접근 방식은 선택한 상담사 지원 기능을 하나의 통합 패널에 렌더링하는 단일 구성요소를 통합합니다. 이 패널은 커넥터 로드 및 오류 메시지를 비롯한 모든 공유 모듈 문제를 처리합니다. 이 접근 방식은 모듈을 LivePerson과 같은 서드 파티 상담사 데스크톱에 통합하는 경우 또는 Agent Assist 기능이 UI에서 렌더링되는 방식을 최소한으로 맞춤설정하거나 맞춤설정하지 않아도 되는 경우에 권장됩니다.

컨테이너 구성요소가 초기화되면 필요한 모든 종속 항목이 로드됩니다. Agent Assist 기능을 얼마나 많이 사용하든 컨테이너를 초기화하는 데는 단일 가져오기만 필요합니다.

컨테이너 구성요소를 초기화합니다.

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

요소 태그 이름:

    <agent-assist-ui-modules>

초기화 예:

    const uiModulesEl = document.createElement('agent-assist-ui-modules');
    uiModulesEl.setAttribute('features', 'SMART_REPLY,ARTICLE_SUGGESTION');
    uiModulesEl.setAttribute('conversation-profile', 'projects/my-project/locations/global/conversationProfiles/123');
    uiModulesEl.setAttribute('auth-token', authToken);
    uiModulesEl.setAttribute('channel', 'chat');
    uiModulesEl.setAttribute('custom-api-endpoint', 'https://my-dialogflow-proxy-service.com');
    uiModulesEl.setAttribute('dark-mode-background', '#000000');
    hostElement.appendChild(uiModulesEl);

자세한 내용은 구성요소 API 문서 페이지를 참고하세요.

개별 구성요소

Agent Assist UI 모듈을 단일 컨테이너가 아닌 개별적으로 통합할 수 있습니다. 이 접근 방식은 모듈이 페이지의 여러 섹션에서 렌더링되어야 하는 맞춤 애플리케이션을 사용하거나 상당한 맞춤설정이 필요한 경우에만 권장됩니다.

이 경우 각 기능별 UI 모듈을 개별적으로 가져와야 합니다. 또한 UI 모듈 커넥터를 가져와 초기화해야 합니다.

UI 모듈 커넥터 구현

애플리케이션에 다음 코드를 추가합니다. 이렇게 하면 인스턴스화하고 초기화할 수 있는 전역 UiModulesConnector 클래스가 노출됩니다.

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

메서드:

    constructor(): void;
    init(config: ConnectorConfig): void;
    disconnect(): void;
    setAuthToken(token: string): void;

다음은 커넥터 구성 객체의 전체 TypeScript 인터페이스 예입니다. 지원되지 않는 시스템에서 사용할 커스텀 UI 모듈 커넥터를 만든 경우 agentDesktop를 Custom로 설정합니다. 다음 예는 지원되는 상담사 데스크톱 시스템 목록을 보여줍니다.

interface ConnectorConfig {
  /** Communication mode for the UI modules application. */
  channel: 'chat'|'voice';

  /** Agent desktop to use. */
  agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';

  /** Conversation profile name to use. */
  conversationProfileName: string;

  /** API Connector config. */
  apiConfig: {
    /**
     * Authentication token to attach to outgoing requests. Should be a valid
     * OAuth token for Dialogflow API, or any other token for custom API
     * endpoints.
     */
    authToken: string;

    /**
     * Specifies a custom proxy server to call instead of calling the Dialogflow
     * API directly.
     */
    customApiEndpoint?: string;

    /** API key to use. */
    apiKey?: string;

    /**
     * Additional HTTP headers to include in the Dialogflow/proxy server API
     * request.
     */
    headers?: Array;
  }

  /** Event-based connector config. Set this for voice conversations. */
  eventBasedConfig?: {
    /**
     * Transport protocol to use for updates. Defaults to 'websocket' if none is
     * specified.
     */
    transport?: 'websocket'|'polling';

    /** Event-based library to use (i.e., Socket.io). */
    library?: 'SocketIo';

    /** Endpoint to which the connection will be established. */
    notifierServerEndpoint: string;
  }
}

인스턴스화 예시:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'LivePerson',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  }
});