Click-to-Call

Click-to-Call을 사용하면 컨택 컨택 센터의 상담원, IVR 또는 Bot과 인터랙션하는 사람입니다.이 한 번의 클릭으로 실시간 상담원에게 전화를 걸 수 있습니다. 웹사이트의 버튼을 통해 방문자는 상담원에게 직접 전화를 걸 수 있습니다. 따라서 다음 작업을 줄이거나 제거하는 데 도움이 됩니다.

영업팀 또는 지원팀에 연결할 때의 추가 단계.
서비스 번호 수수료, 모바일 추가 요금 등 간접비.

Click-to-Call은 JavaScript로 작성된 소프트웨어 개발 키트(SDK)를 통해 작동합니다. 이를 설정하려면 개발자와 협력하여 웹사이트에 SDK를 구현해야 합니다. 또한 특정 자격 증명을 제공할 수 있는 계정 대표자과 협력해야 합니다.

Click-to-Call은 데스크톱 브라우저에서 지원됩니다.

Click-to-Call SKD 세부 정보

SDK 다운로드: 계정 대표자에게 문의하세요
SDK 언어: JavaScript (AudioCodes WebRTC SDK 사용)
지원되는 브라우저: Google Chrome, Microsoft Edge, Mozilla Firefox
마이크 사용 권한: 컨택 컨택 센터의 상담원, IVR 또는 Bot과 인터랙션하는 사람입니다.은 브라우저에서 마이크를 사용하도록 허용해야 합니다.

SDK는 단일 clicktocall.js 파일로 구성됩니다. 이는 Click-to-Call 버튼을 표시할 각 웹 페이지에 포함되거나 참조되어야 합니다. 또한 Click-to-Call 버튼 및 통화 컨트롤과 같은 자체 UI 구성 요소를 구현해야 합니다. Click-to-Call 버튼은 SDK에서 makeCall 함수를 호출해야 하며, 이 함수는 WebRTC 통화를 시작합니다. 통화 요청이 CXone에서 인증되면 통화가 이루어집니다.

통합 전제 조건

개발자가 Click-to-Call을 사이트에 통합하도록 준비하려면 다음을 완료해야 합니다.

계정 대표자로부터 클라이언트 ID를 받습니다.
계정 대표자와 협력하여 Click-to-Call에 대한 특정 전화번호를 제공합니다.
자체 서버에 POST API를 구현합니다. 이 API는 인증을 위해 JWT 토큰을 생성해야 합니다. 이를 통해 수신 통화 요청이 타당한지 확인합니다.
더 보기
Click-to-Call 인증은 JWT를 사용합니다. PKCS#1 형식으로 2048비트 크기의 RSA 비대칭 키 쌍을 생성해야 합니다. 첫 번째는 JWT 또는 JWT1을 생성할 때 사용하는 비공개 키입니다. 두 번째는 NICENICE에 제공해야 하는 공개 키입니다. 전화 통화를 시작할 때 요청에 JWT1을 포함시켜야 합니다. CXone은 제공한 공개 키로 수신 요청의 JWT1을 검증합니다.

POST API로 JWT1을 생성해야 합니다. 이 API는 자체 서버에서 구현해야 합니다. SDK는 이 API가 요청 본문에 있는 컨택 포인트 인바운드 컨택이 인터랙션을 개시하는 데 사용되는 진입점(예: 전화번호, 이메일 주소)입니다.(컨택 주소)와 ClientID를 수용할 것으로 예상합니다. ContactAddress와 ClientId를 클레임으로 사용하여 JWT 토큰을 반환해야 합니다.

SDK 패키지의 IntegrationHelpers/Templates 디렉터리에서 예제 코드 스니펫을 찾을 수 있습니다. 이들은 .NET과 Java로 작성됩니다. 이들은 인증을 위한 비대칭 키 생성 방법과 구현해야 하는 POST API를 예시합니다.

API 엔드포인트 예:
```
POST /generate-jwt1-token
Content-Type: application/json
{
	"ContactAddress": "<CONTACT_ADDRESS>",
	"ClientId": "<CLIENT_ID>"
}
							
	// API response:
"GENERATED_JWT1_TOKEN"
```
예제 JWT1 토큰 API 엔드포인트 URL:
```
let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>'; //This is where you enter the URL for the POST API you implement.
```
인증을 위해 계정 대표자에게 공개 키를 제공합니다.
UI 디자인을 고려합니다. 통화의 컨택 측에 대한 UI를 직접 개발해야 하며, 여기에는 음소거 또는 통화 종료와 같은 통화 제어용 버튼이 포함됩니다. SDK에는 개발자가 참조 및 영감을 얻기 위해 사용할 수 있는 샘플 React 및 Angular 구성 요소가 포함되어 있습니다. 통화의 상담원 측은 상담원 애플리케이션에서 처리되므로 UI 개발은 컨택 측에만 필요합니다.

CXone 설정

웹사이트에 Click-to-Call 기능을 추가하는 것 외에도 CXone에 라우팅 구성 요소가 설정되어 있는지 확인해야 합니다. CXone 관리자가 필요한 구성 요소를 설정할 수 있습니다.

아래 항목을 반드시 구비해야 합니다.

필요한 상담원이 할당되어 생성된 인바운드 음성 ACD 스킬.
음성 통화를 위해 설정된 컨택 포인트 (POC). 이는 각 Click-to-Call 전화번호에 대한 전화 POC여야 합니다. 사이트에서 Click-to-Call을 구현하는 개발자는 JavaScript 파일의 contactAddress에서 이를 사용해야 합니다.
통화를 상담원에게 라우팅하는 Studio 스크립트.

CXone 설정에 따라 기존 라우팅 구성요소를 사용할 수도 있고 새 구성요소를 만들어 설정하는 것이 필요할 수 있습니다.

SDK 통합

전제 조건 섹션에서 필요한 항목을 완료하거나 준비했는지 확인합니다.

필요에 따라 clicktocall.js 파일을 웹페이지에 통합합니다.
clicktocall.js 파일에서 POST API의 API 엔드포인트 URL을 설정합니다.
```
let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';
```
getJWT2TokenURL 변수를 다음 API 엔드포인트로 업데이트합니다. CXone은 이를 사용하여 JWT를 검증합니다.
```
let getJWT2TokenURL = 'https://api-na1.niceincontact.com/ClickToCall/GetJWT2Token';
```
다음 UI 구성 요소를 웹사이트에 추가합니다. 각 구성 요소에 고유 식별자를 지정해야 합니다. SDK 패키지에는 React 및 Angular의 샘플 UI 구성요소가 포함되어 있습니다. 이는 IntegrationHelpers/UIComponents 디렉터리에서 찾을 수 있습니다.
- 음성 통화를 시작하는 버튼.
- 통화를 끊거나 연결을 끊는 버튼.
- 통화 오디오의 음소거 및 음소거 해제 버튼.
- DTMF 입력을 위한 키패드 표시 버튼.
- 키패드 키를 표시하는 <div>.
- 통화 성공 또는 오류 메시지를 표시하는 레이블.
- 다이얼 톤이나 통화 연결음과 같은 특정 소리를 재생하는 <audio> 태그.

이전 단계에서 추가한 UI 구성요소를 참조하여 clicktocall.js 파일을 업데이트합니다.

let clickToCallButtonId = '<YOUR_CLICK_TO_CALL_BUTTON_ID>';
let hangUpButtonId = '<YOUR_HANG_UP_BUTTON_ID>';
let muteAudioButtonId = '<YOUR_MUTE_AUDIO_BUTTON_ID>';
let keypadButtonId = '<YOUR_KEYPAD_BUTTON_ID>';
let dtmfKeyDivId = '<YOUR_DTMF_KEY_DIV_ID>';
let callStatusMessageLabelId = '<YOUR_CALL_STATUS_MESSAGE_LABEL_ID>';
let remoteAudioId = '<YOUR_AUDIO_CONTROL_ID>';

Click-to-Call 버튼에 makeCall(contactAddress) 메서드를 추가합니다.
DTMF 톤을 보내려면 DTMF 버튼을 클릭할 때 guiSendDTMF(digit) 함수가 호출됩니다.

clicktocall.js 파일의 구성 섹션에서 기본 설정을 지정합니다. 이 섹션에는 특정 유형의 동작을 제어하는 여러 구성 변수가 있습니다.

retryCount로 재시도 횟수를 설정합니다. 통화가 끊어질 경우 시스템이 통화를 다시 연결하려고 시도하는 횟수입니다. 기본값은 3입니다.
POCREnvironmentXHeaderValue 값을 PROD로 설정합니다.

phoneServerConfig 및 clientId에서 전화 서버에 대한 구성 설정을 지정합니다.

let phoneServerConfig = {
	domain: '<Domain of the SIP server>', //Set value of this configuration to 'cxonevoice.com'
	addresses: [], //Keep this array empty
	iceServers: [], //Keep this array empty
	userName: '<username>', //This configuration is a human-readable string used to identify the sender in a more friendly way. In agent applications like CXone Agent, this might be displayed on the screen during a call. Tthis value should not contain any spaces and should not exceed 20 characters. 
	displayName: '', // This is an optional field and its value can be kept the same as userName 
	password: '' //Keep this field empty
}
let clientID = '<YOUR_CLIENT_ID>'; //Set the value of this configuration as provided by CXone

통화 실패 또는 연결 해제와 관련된 컨택 측 알림을 사용자 지정하려면 clicktocall.js의 다음 변수들에서 텍스트 문자열을 변경합니다.
- callFailedToConnectErrorMessage
- uiErrorMessage
- contactSupportTeamMessage
통화를 성공적으로 시작하고 라우팅하는지 확인하기 위해 충분한 테스트를 수행해야 합니다.