Agent Assist는 Agent Assist 기능을 UI에 통합하는 데 사용할 수 있는 사전 빌드된 맞춤설정 가능한 UI 구성요소 모듈을 제공합니다. 모듈을 웹 애플리케이션에 삽입하여 에이전트에게 Agent Assist 제안을 표시할 수 있습니다. LivePerson에 모듈을 통합하는 방법에 관한 구체적인 안내는 LivePerson 튜토리얼을 참고하세요.
Agent Assist 기능
다음은 UI 모듈 구성요소로 구현할 수 있는 Agent Assist 기능입니다.
시작하기 전에
UI 모듈을 구현하기 전에 대화 프로필을 구성하세요.
UI 모듈 구현
UI에 Agent Assist 모듈을 통합하는 기본 접근 방식에는 두 가지가 있습니다.
- 컨테이너 (권장): 선택한 모든 Agent Assist 기능을 하나의 간소화된 패널에 렌더링합니다.
- 개별 구성요소: 상담사 데스크톱 내의 다른 영역에 배치하려는 경우 특정 기능을 개별적으로 가져올 수 있습니다.
컨테이너와 개별 구성요소를 함께 사용할 수도 있습니다. 예를 들어 컨테이너를 구현하여 기본 패널에 모든 기능을 표시하는 동시에 독립형 스마트 답장 모듈을 상담사 데스크톱의 채팅 디스플레이 바로 아래와 같은 다른 위치에 배치할 수 있습니다.
두 접근 방식 모두 모든 시스템에서 사용할 수 있지만, Agent Assist는 Genesys Cloud, LivePerson, Twilio, Salesforce에 대해서만 오픈소스 UI 모듈 통합을 제공합니다. UI 모듈을 다른 에이전트 시스템과 통합하려면 자체 통합을 만들어야 합니다. 대부분의 기능에 컨테이너 V2 접근 방식을 사용합니다. 공간이 있는 경우 스마트 답장과 같은 개별 구성요소를 구현할 수도 있습니다.
UI 구성요소와 상담사 데스크톱 간의 통신은 UI 모듈 커넥터를 통해 이루어집니다. 모든 클라이언트 통신은 맞춤 이벤트를 디스패치하여 이루어집니다.
파일 버전
최신 버전을 지정하여 gstatic 파일의 최신 버전을 가져옵니다.
<script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>
정확한 버전을 지정하여 gstatic 파일의 특정 안정화 버전을 가져옵니다.
<script src="https://www.gstatic.com/agent-assist-ui-modules/v2.7/container.js"></script>
최신 버전:
Container: v1.16 // Legacy
Container: v2.7
Common: v1.14
Generative knowledge assist: v2.10
Smart reply: v1.4
Summarization: v1.3
Transcript: v1.4
Genesys Cloud: v1.1
컨테이너
컨테이너는 선택한 Agent Assist 기능을 하나의 통합된 반응형 패널에 렌더링하는 단일 구성요소입니다. 거의 모든 통합에 컨테이너 V2를 사용하는 것이 좋습니다.
컨테이너 구성요소를 초기화합니다.
<script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>
요소 태그 이름:
<agent-assist-ui-modules-v2>
초기화 예:
const uiModulesEl = document.createElement('agent-assist-ui-modules-v2');
uiModulesEl.setAttribute('use-configured-features', 'true');
hostElement.appendChild(uiModulesEl);
자세한 내용은 Container V2 API 문서 페이지를 참고하세요.
컨테이너 V1 (레거시)
컨테이너 V1은 지원되지만 기존 버전으로 간주됩니다. V2와 달리 V1은 UI 모듈 커넥터를 내부에 삽입합니다.
컨테이너 V1 구성요소를 초기화합니다.
<script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>
요소 태그 이름:
<agent-assist-ui-modules>
자세한 내용은 Container V1 API 문서 페이지를 참고하세요.
개별 구성요소
단일 컨테이너를 사용하는 대신 일부 Agent Assist 기능을 개별적으로 통합할 수 있습니다. 모듈을 페이지의 다른 섹션에 렌더링해야 하는 맞춤 애플리케이션을 사용하거나 상당한 맞춤설정이 필요한 경우에만 이 방법을 사용하는 것이 좋습니다. 예를 들어 채팅 표시 바로 아래에 스마트 답장 모듈을 배치할 수 있습니다.
이 경우 선택한 기능별 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';
/** Optional desktop source for metric tracking. */
agentDesktopSource?: string;
/** 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. Required for voice/omnichannel conversations and some features of chat conversations. */
eventBasedConfig?: {
/** Transport protocol to use for updates. Defaults to 'websocket'. */
transport?: string;
/** Event-based library to use. */
library?: 'SocketIo';
/** Endpoint to which the connection will be established. */
notifierServerEndpoint: string;
/** Additional Socket.io connect options. */
socketIoConnectOpts?: any;
/** Options to retry initial Socket.io connection in case of failure. */
backOffOpts?: {
initialDelay: number;
maxDelay: number;
maxAttempts: number;
connectionTimeout: number;
};
}
}
인스턴스화 예시:
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',
},
eventBasedConfig: {
notifierServerEndpoint: 'https://my-notifier-server-endpoint.com',
transport: 'websocket',
library: 'SocketIo',
}
});
가격 면책조항
UI 모듈을 사용하는 경우 다음과 같은 기본 서비스와 관련된 비용이 발생합니다.