Agent Assist는 Agent Assist 기능을 UI에 통합하는 데 사용할 수 있는 사전 빌드된 맞춤설정 가능한 UI 구성요소 모듈을 제공합니다. 모듈을 웹 애플리케이션에 삽입하여 에이전트에게 Agent Assist 추천을 표시할 수 있습니다. LivePerson에 모듈을 통합하는 방법에 관한 구체적인 안내는 LivePerson 튜토리얼을 참고하세요.
Agent Assist 기능
다음은 UI 모듈 구성요소로 구현할 수 있는 Agent Assist 기능입니다.
시작하기 전에
UI 모듈을 구현하기 전에 대화 프로필을 구성합니다.
UI 모듈 구현
UI에 Agent Assist 모듈을 통합하는 기본 접근 방식에는 두 가지가 있습니다. 관리형 컨테이너 접근 방식은 선택한 모든 상담 지원 기능을 단일 패널에 통합합니다. 또는 인터페이스에서 구성을 맞춤설정하려면 기능을 개별적으로 가져오면 됩니다. UI 구성요소와 상담사 데스크톱 간의 통신은 UI 모듈 커넥터를 통해 이루어집니다. 모든 통신은 맞춤 이벤트를 디스패치하여 이루어집니다.
컨테이너 접근 방식과 개별 구성요소는 모든 시스템에서 사용할 수 있지만 Agent Assist는 Genesys Cloud, LivePerson, Twilio, Salesforce와 함께 사용할 수 있는 UI 모듈 커넥터만 제공합니다. UI 모듈을 다른 에이전트 시스템과 통합하려면 자체 커넥터를 만들어야 합니다. 대부분의 기능에 컨테이너 V2 접근 방식을 사용합니다. 공간이 있는 경우 스마트 답장과 같은 개별 구성요소를 구현할 수도 있습니다.
파일 버전
최신 버전을 지정하여 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.12
Container: v2.0
Common: v1.6
Knowledge assist: v1.1
Generative knowledge assist: v2.9
Smart reply: v1.4
Summarization: v1.3
Transcript: v1.3
관리형 컨테이너
관리형 컨테이너 접근 방식은 선택한 Agent Assist 기능을 하나의 통합 패널에 렌더링하는 단일 구성요소를 통합합니다. 이 패널은 커넥터 로드 및 오류 메시지를 비롯한 모든 공유 모듈 문제를 처리합니다. LivePerson과 같은 서드 파티 상담사 데스크톱에 모듈을 통합하는 경우 또는 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 문서 페이지를 참고하세요.
개별 구성요소
단일 컨테이너 대신 상담사 지원 UI 모듈을 개별적으로 통합할 수 있습니다. 이 방법은 모듈을 페이지의 다른 섹션에 렌더링해야 하는 맞춤 애플리케이션을 사용하거나 상당한 맞춤설정이 필요한 경우에만 권장됩니다.
이 경우 각 기능별 UI 모듈을 개별적으로 가져와야 합니다. 또한 UI 모듈 커넥터를 가져와 초기화해야 합니다.
UI 모듈 커넥터 구현
컨테이너 버전 1을 사용하지 않는 한 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. This is required for voice conversations and some features of chat conversations. Always set it. */
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: 'Custom',
conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
apiConfig: {
authToken: 'abc123',
customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
}
});
가격 면책조항
UI 모듈을 사용하는 경우 다음과 같은 기본 서비스와 관련된 비용이 발생합니다.