Dynamics 365 대화 인텔리전스와 Twilio Flex 통합(프리뷰)
[이 문서는 시험판 문서이며 변경될 수 있습니다.]
이 통합을 통해 판매자는 Dynamics 365에서 Twilio Flex 전화를 걸고 받을 수 있으며 통화 중 실시간 트랜스크립션과 통화 후 AI 생성 통화 인사이트를 얻을 수 있습니다.
중요
- 이는 프리뷰 기능입니다.
- 프리뷰 기능은 프로덕션용으로 만들어진 것이 아니므로 기능이 제한될 수 있습니다. 이러한 기능에는 추가 사용 약관이 적용되며, 고객이 조기에 액세스하고 피드백을 제공할 수 있도록 공식 출시 전에 제공됩니다.
전제 조건
Twilio 계정
Twilio Flex 계정 – Flex 계정을 설정하는 방법에 대한 자세한 내용은 이 링크를 참조하십시오
시스템 관리자 권한과 함께 Sales Premium 또는 Sales Enterprise 라이선스가 있는 Microsoft Dynamics 365 Sales 환경
대화 인텔리전스 설치 및 설정 – 자세히 알아보기
Dynamics 365 채널 통합 프레임워크 1.0이 설치되었습니다. 자세히 알아보기
로컬 Node JS 환경 설정
create-flex-plugin 애플리케이션
1단계: Twilio Flex를 채널 공급자로 구성
Dynamics 365 채널 통합 프레임워크에서 Twilio Flex용 채널 공급자를 만듭니다. 다음 스크린샷을 예로 참조하십시오.
다음 값을 입력합니다.::
아웃바운드 통신 사용: 예
API 버전: 1.0
채널 순서: 1
신뢰할 수 있는 도메인:https://flex.twilio.com/
채널용 통합 인터페이스 앱 선택: 영업 허브(또는 통합을 활성화하려는 다른 앱)
채널의 보안 역할 선택: Twilio Flex를 사용할 역할을 추가합니다. 예를 들어 영업 직원, 영업 관리자 등입니다. Twilio Flex를 Dynamics 365 내에 iframe으로 포함하려면 허용된 URL 목록에 Dynamics 365 조직 URL을 추가합니다. 자세한 내용은 문서를 참조하십시오.
2단계: SIPREC 커넥터를 설치하고 통화를 Dynamics 365로 라우팅
SIPREC 커넥터 추가 기능을 설치합니다.
Twilio 관리 센터 설정을 열고 다음 스크린샷과 같이 미디어를 Dynamics 365 레코더로 분기하도록 구성합니다.
다음 필드에 유의해야 합니다.
고유한 이름: 이름을 지정하고 기록해 둡니다. 다음 단계에서 사용해야 합니다
세션 녹음/녹화 서버: Dynamics 365 미디어 녹음/녹화 서버 URL을 지정합니다. 지원되는 레코더 및 지역 목록은 지원되는 레코더 엔드포인트 및 지역을 참조하세요.
미디어를 가장 가까운 레코더로 분기하려면 sip:SRS@media.recording.dynamics.com:5061;secure=true URL을 사용하십시오
자격 증명 필드는 비어 있을 수 있습니다. 인증은 Twilio와 Dynamics 간의 TLS 설정에서 인증서로 수행됩니다.
3단계: 미디어를 Dynamics 365로 분기하도록 통화 흐름 구성
콘솔에서 스튜디오 흐름 섹션으로 이동하여 Voice 자동 음성 응답 흐름을 선택합니다.
우측 하단 위젯 라이브러리의 Voice 섹션에서 스트림 분기 위젯을 추가합니다.
이제 이전에 정의한 SIPREC 커넥터를 사용하여 스트림을 분기하도록 위젯을 구성합니다.
다음 값을 입력합니다.
- 스트림 작업: 시작
- 스트림 유형: Siprec
- 커넥터 이름: SIPREC 커넥터에 지정한 이름입니다. 이 예에서는 SipRec1입니다.
- 트랙: 두 트랙 모두
-
스트림 매개 변수:
역할: 인바운드(이 예에서는 수신 전화를 녹음할 것입니다)
CallerDisplayName: {{trigger.call.From}}
CalleeDisplayName: {{trigger.call.To}}
전환 탭에서 통화가 에이전트에게 전송되기 전에 스트림 분기를 구성합니다.
흐름을 저장하고 게시합니다.
4단계: Twilio 전화번호 구성
새로 만든 스튜디오 흐름에 Twilio 전화번호를 지정해야 합니다.
Twilio 전화 번호 콘솔에서 소유하고 있는 번호를 선택하거나 새 번호를 구입하십시오.
전화번호를 선택하여 연 다음 페이지에서 Voice 섹션까지 아래로 스크롤합니다.
다음 스크린샷과 같이 Call Comes In 필드에서 이전에 정의한 흐름을 선택합니다.
5단계: 통합을 위한 Dynamics 365 구성
Twilio를 통화 공급자로 설정하고 통화를 녹음할 수 있는 사람과 대화 인사이트에 사용되는 기타 정보를 정의하는 녹음 정책을 구성해 보겠습니다.
영업 허브 앱에서 변경 영역으로 이동하여 Sales Insights 설정을 선택합니다.
대화 인텔리전스를 선택합니다.
통화 공급자 섹션에서 Twilio를 선택하고 Twilio 계정 SID를 지정합니다.
변경 내용을 저장합니다.
Twilio 통화 공급자를 사용하여 녹음/녹화 정책을 구성합니다.
녹음/녹화 정책 만들기를 선택하고 정책을 구성합니다. 자세한 정보.
만들기를 선택한 다음 설정을 게시합니다.
6단계: 실시간 경험을 통합하기 위한 Flex 플러그 인 준비
Flex는 React 프로젝트이며 UI에 대한 사용자 지정은 플러그 인 구성 요소로 생성됩니다.
Node 환경을 준비하고 빈 Flex 플러그 인을 설정하는 것은 이 문서의 범위를 벗어납니다. 첫 번째 Flex 플러그 인 생성에 대한 단계별 자습서는 Twilio 설명서를 참조하십시오.
Dynamics용 사용자 지정 코드를 추가할 준비가 된 새 플러그 인을 만듭니다.
이 시점에서 플러그 인 JS 파일은 다음과 같습니다.
플러그 인에 Microsoft CIF 클라이언트 라이브러리를 추가합니다. 클라이언트 라이브러리는 Flex가 시작될 때 비동기적으로 로드되어야 하므로 Flex 초기화 함수에 다음 코드를 추가합니다.
import React from 'react';
import \* as Flex from '@twilio/flex-ui';
import { FlexPlugin } from '@twilio/flex-plugin';
import reducers, { namespace } from './states';
const PLUGIN\_NAME = 'SamplePlugin';
export interface CallStartedEvent {
callId: string;
startTime: Date;
isIncomingCall: boolean;
contactNumber: string;
contactName: string;
}
export interface CallEndedEvent {
callId: string;
callDurationInSeconds: number;
callTerminationReason: string; // \['success', 'error'\]
callEndTime: Date;
isCallStarted: boolean;
}
export default class SamplePlugin extends FlexPlugin {
constructor() {
super(PLUGIN\_NAME);
}
/\*\*
\* This code is run when your plugin is being started
\* Use this to modify any UI components or attach to the actions framework
\*
\* @param flex { typeof Flex }
\* @param manager { Flex.Manager }
\*/
async init(flex: typeof Flex, manager: Flex.Manager): Promise<void> {
this.registerReducers(manager);
this.loadCIF();
flex.Actions.addListener('afterAcceptTask', (payload) => {
const callStartedEvent : CallStartedEvent = {
callId: payload.task.\_task.attributes.call\_sid,
startTime: new Date(),
isIncomingCall: true,
contactName: payload.task.\_task.attributes.caller,
contactNumber: payload.task.\_task.attributes.caller
};
// @ts-ignore
Microsoft.CIFramework.raiseEvent('WIDGET\_CALL\_STARTED', callStartedEvent);
});
flex.Actions.addListener('afterCompleteTask', (payload) => {
// @ts-ignore
Microsoft.CIFramework.raiseEvent('WIDGET\_CALL\_ENDED', {
callId: payload.task.\_task.attributes.call\_sid,
callTerminationReason: 'success',
callEndTime: new Date(),
isCallStarted: true
});
const callEndedEvent : CallEndedEvent = {
callId: payload.task.\_task.attributes.call\_sid,
callEndTime: new Date(),
callTerminationReason: 'success',
isCallStarted: true
};
// @ts-ignore
Microsoft.CIFramework.raiseEvent('WIDGET\_CALL\_ENDED', callEndedEvent);
});
const options: Flex.ContentFragmentProps = { sortOrder: -1 };
flex.AgentDesktopView.Panel1.Content.add(<div key="SamplePlugin-component" >Hello Partner!</div>, options);
}
loadCIF = () => {
const script = document.createElement("script");
script.src = \`${window.location.ancestorOrigins\[0\]}/webresources/Widget/msdyn\_ciLibrary.js\`;
script.setAttribute('data-crmurl', window.location.ancestorOrigins\[0\]);
script.setAttribute('data-cifid', 'CIFMainLibrary');
document.body.appendChild(script);
}
/\*\*
\* Registers the plugin reducers
\*
\* @param manager { Flex.Manager }
\*/
private registerReducers(manager: Flex.Manager) {
if (!manager.store.addReducer) {
// eslint-disable-next-line
console.error(\`You need FlexUI > 1.9.0 to use built-in redux; you are currently on ${Flex.VERSION}\`);
return;
}
manager.store.addReducer(namespace, reducers);
}
}
플러그 인을 게시합니다.
이제 테스트할 준비가 된 Flex 플러그 인이 있습니다!
7단계: Dynamics 365 대화 인텔리전스와 Flex 통합 테스트
영업 허브 앱에 로그인하고 통화 아이콘을 선택합니다. 오른쪽 창에 포함된 Twilio Flex가 표시됩니다.
Twilio에서 상태를 사용 가능으로 설정했는지 확인하고 4단계: Twilio 전화번호 구성r에서 설정한 Twilio 전화번호로 전화를 겁니다.
전화를 받고 녹음을 시작하면 대화록 탭으로 이동하여 실시간 대화록을 본 다음 통화 종료 후 통화 요약 페이지에서 통화 인사이트를 봅니다.