Click-to-Call

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

• 영업팀 또는 지원팀에 연결할 때의 추가 단계.

• 서비스 번호 수수료, 모바일 추가 요금 등 간접비.

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

Click-to-Call에 대한 주요 정보

• Click-to-Call은 데스크톱 브라우저에서 지원됩니다. 현재 모바일에서는 지원되지 않습니다.

• Click-to-Call은 현재 다음 지역에서 지원됩니다.

  • 캐나다

  • 독일

  • 일본

  • UK

  • 미국

• Click-to-Call SDK에 대한 주요 정보는 다음과 같습니다.

  • SDK 다운로드: NICE계정 대표자에 문의하세요.

  • 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 Mpower에서 인증되면 통화가 이루어집니다.

• SDK는 X-헤더를 사용하여 SIP 초대 요청의 일부로 사용자 데이터, 웹사이트 메타데이터 및 라우팅 데이터를 전달하는 옵션을 제공합니다. 테이크를 가져와 필요에 따라 사용하려면 Studio 스크립트를 구성해야 합니다 Click-to-Call 연락처 인바운드 컨택이 인터랙션을 개시하는 데 사용되는 진입점(예: 전화번호, 이메일 주소)입니다.와 연결된. 여기에는 에이전트를 위한 화면 팝에 사용자 데이터를 표시하거나 라우팅 데이터를 사용하여 라우팅 결정을 내리는 것이 포함될 수 있습니다.

  이 조항은 선택 사항이므로 필요한 경우에만 설정해야 합니다. 필요하지 않으면 데이터를 전달하지 않고 makeCall() 함수를 설정할 수 있습니다.

  데이터를 수집하고 전달하는 것은 귀하의 책임입니다. SDK는 데이터를 전송하는 메커니즘만 제공합니다. 데이터를 생성, 검증 또는 관리하지 않습니다.

통합 전제 조건

Click-to-Call을 귀하의 사이트에 통합하려면 다음을 완료하세요.

• NICE 계정 대표자에서 클라이언트 ID를 얻으세요.

• NICE 계정 대표자과 협력하여 Click-to-Call에 대한 특정 전화번호를 제공합니다.

• 자체 서버에 POST API를 구현합니다. 이 API는 인증을 위해 JWT 토큰을 생성해야 합니다. 이를 통해 수신 통화 요청이 타당한지 확인합니다.

  더 보기

  Click-to-Call 인증은 JWT를 사용합니다. PKCS#1 형식으로 2,048비트 크기의 RSA 비대칭 키 쌍을 생성해야 합니다. 첫 번째는 JWT 또는 JWT1을 생성하는 데 사용하는 개인 키입니다. JWT는 RS256 알고리즘을 사용하여 서명되어야 합니다. 두 번째는 NICE에 제공해야 하는 공개 키입니다. 전화 통화를 시작할 때 요청에 JWT1을 포함시켜야 합니다. CXone Mpower은 제공한 공개 키로 수신 요청의 JWT1을 검증합니다. JWT1 토큰의 만료 시간이 20초를 초과하지 않는지 확인하세요.

  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 Mpower 설정

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

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

• 필요한 상담원이 할당되어 생성된 인바운드 음성 ACD 스킬.

• 음성 통화를 위해 설정된 컨택 포인트 (POC). 이는 각 Click-to-Call 전화번호에 대한 전화 POC여야 합니다. 사이트에서 Click-to-Call을 구현하는 개발자는 JavaScript 파일의 contactAddress에서 이를 사용해야 합니다.

• 통화를 상담원에게 라우팅하는 Studio 스크립트.

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

SDK 통합

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

1. 필요에 따라 clicktocall.js 파일을 웹페이지에 통합합니다.

2. clicktocall.js 파일에서 POST API의 API 엔드포인트 URL을 설정합니다.

   let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';

3. 다음 UI 구성 요소를 웹사이트에 추가합니다. 각 구성 요소에 고유 식별자를 지정해야 합니다. SDK 패키지에는 React 및 Angular의 샘플 UI 구성요소가 포함되어 있습니다. 이는 IntegrationHelpers/UIComponents 디렉터리에서 찾을 수 있습니다.

   • 음성 통화를 시작하는 버튼.

   • 통화를 끊거나 연결을 끊는 버튼.

   • 통화 오디오의 음소거 및 음소거 해제 버튼.

   • DTMF 입력을 위한 키패드 표시 버튼.

   • 키패드 키를 표시하는 <div>.

   • 통화 성공 또는 오류 메시지를 표시하는 레이블.

   • 다이얼 톤이나 통화 연결음과 같은 특정 소리를 재생하는 <audio> 태그.

4. 이전 단계에서 추가한 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>';

5. 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 

6. 통화 실패 또는 연결 해제와 관련된 컨택 측 알림을 사용자 지정하려면 clicktocall.js의 다음 변수들에서 텍스트 문자열을 변경합니다.

   • callFailedToConnectErrorMessage

   • uiErrorMessage

   • contactSupportTeamMessage

   let callFailedToConnectErrorMessage = 'Call failed to connect. Service not available!';
   let uiErrorMessage = {
   'Default': 'Error occurred. Please try again!',
   'Terminated': 'Call ended successfully!',
   'Canceled': 'Call cancelled. Please try again!',
   'Failed': callFailedToConnectErrorMessage,
   'login failed': callFailedToConnectErrorMessage,
   'disconnected': callFailedToConnectErrorMessage,
   'logout': callFailedToConnectErrorMessage,
   'SIP Failure Code': callFailedToConnectErrorMessage,
   'RTP Timeout':  'RTP Timeout': 'The call ended unexpectedly due to network issues. Please ensure your internet is stable and try placing the call again!',
   'Token Claims': 'An error occurred during the call attempt. Please retry!'
   						}
   let contactSupportTeamMessage = "We're sorry, could not connect the call. Please try again later or contact our support team!";

7. Click-to-Call 요청을 처리하기 위해 가장 가까운 리소스를 할당하려면 위치 기반 리소스를 구성하세요. 이렇게 하려면 clicktocall.js에서 다음을 수행하세요.

   1. getAvailableLocations() 함수를 사용하여 세션 경계 컨트롤러(SBC)와 같은 필수 리소스가 배포된 위치 목록을 반환합니다. 이러한 위치는 Click-to-Call 요청을 처리하기 위한 최적의 리소스를 결정하는 데 도움이 됩니다.

   2. 위치 선택을 UI에 통합합니다. 다음 두 가지 방법 중 하나로 이 작업을 수행할 수 있습니다.

      • 사용자가 선택할 수 있는 컨트롤: 연락처가 getAvailableLocations() 함수에서 제공하는 옵션 중에서 가장 가까운 위치를 선택할 수 있도록 드롭다운이나 라디오 버튼과 같은 선택 가능한 요소를 제공합니다.

      • 자동 매핑: 시스템이 연락처의 위치를 확인할 수 있는 경우 getAvailableLocations() 함수에서 노출된 위치 중 하나에 매핑하고 makeCall() 함수에 전달합니다.

   3. 기본 위치를 구성합니다. 이렇게 하려면 defaultLocation 변수를 연락처가 가장 자주 전화하는 위치로 설정합니다. 기본 위치는 getAvailableLocations() 함수에서 반환된 위치 중 하나여야 합니다.

      // Variable to store default location
      let defaultLocation = "US";

8. Click-to-Call 버튼에 makeCall(contactAddress, [location], [userData], [routingData]) 메서드를 추가합니다. location, userData, routingData 매개변수는 선택 사항입니다.

   userData 및 routingData 매개변수는 라우팅 결정에 사용하거나 Agent에 표시하기 위해 사용자 및 라우팅 데이터를 전달합니다. 이 작업은 X-헤더를 사용하는 SIP 초대 요청의 일부로 수행됩니다. 그런 다음 연락처에 사용된 Studio 스크립트에서 데이터를 처리할 수 있습니다.

   • userData: 사용자 관련 정보를 표시합니다.

   • routingData: 라우팅 결정에 사용되는 데이터를 표시합니다.

   이러한 매개변수는 키-값 쌍을 포함하는 객체로 제공되어야 합니다. SDK는 JSON.stringify()을 사용하여 두 객체를 모두 문자열로 변환하고 SIP 초대 요청에서 X-헤더로 전송합니다.

   • X-user-data: userData 객체를 포함합니다.

   • X-routing-data: routingData 객체를 포함합니다.

   userData와 routingData은 필요한 경우 데이터를 분리하기 위한 편의를 위해 별도의 객체입니다. 하지만 원한다면 필요한 모든 데이터를 하나의 매개변수에만 전달할 수도 있습니다. Studio 스크립트가 그에 따라 구성된 경우 단일 X-헤더 내에서 모든 데이터를 전송할 수도 있습니다.

   X-헤더에서 전달할 수 있는 데이터 크기에 대한 제한으로 인해 문자열 변환 후 userData 및 routingData 객체 각각의 문자 길이는 1,000자(1KB)를 초과할 수 없습니다.

   다음 예를 참조하여 특정 사용 사례에 맞게 구성하세요.

   • 매개변수를 전달하지 않고:

     makeCall(contactAddress);

   • location만 통과:

     makeCall(contactAddress, "US");

   • location, userData, routingData 통과:

     makeCall(contactAddress, "US", { name: "Elizabeth Bennet", age: 20 }, { skill: "sales" });

   • userData만 통과:

     makeCall(contactAddress, undefined, { name: "John Doe", age: 30 }, undefined);

9. makeCall() 메서드를 구성한 경우 userData 또는 routingData 객체를 사용하도록 다음 작업을 사용하여 Studio 스크립트에서 X-헤더 데이터를 처리해야 합니다 Click-to-Call 연락처 인바운드 컨택이 인터랙션을 개시하는 데 사용되는 진입점(예: 전화번호, 이메일 주소)입니다.와 연결된.

   • SIPGetHeader 동작: X-헤더에서 데이터를 읽습니다.

   • RunApp 동작: 통화가 연결되면 에서 연락처에 연결된 경우 등의 이벤트가 발생한 후 에이전트 화면에 나타나는 연락처에 대한 정보가 담긴 팝업 창입니다.화면 팝Agent으로 데이터를 표시합니다.

   • Snippet 작업: X-헤더의 데이터를 구문 분석하고 해당 데이터를 기반으로 호출을 라우팅합니다.

10. DTMF 톤을 보내려면 DTMF 버튼을 클릭할 때 guiSendDTMF(digit) 함수가 호출됩니다.

11. 구성을 테스트하여 통화를 성공적으로 시작하고 연결할 수 있는지 확인하세요.