Click-to-Call

Mit Click-to-Call können Ihre KontakteClosed Die Person, die mit einem Agenten, IVR oder Bot in Ihrem Contact Center interagiert. mit einem einzigen Klick einen Live-Agenten anrufen. Von einer Schaltfläche auf Ihrer Website aus können Besucher direkt einen Agenten anrufen. Dies kann Ihnen helfen, Folgendes zu vermeiden oder zu verringern:

  • Zusätzliche Schritte beim Verbinden mit dem Vertriebs- oder Supportteam.

  • Fixkosten wie Gebühren für Servicenummern oder Mobilfunkzuschläge.

Click-to-Call funktioniert über ein in JavaScript geschriebenes Software Development Kit (SDK). Um es einzurichten, muss ein Entwickler das SDK in Ihrer Website implementieren. Sie müssen außerdem mit einem Kundenbetreuer zusammenarbeiten, der Ihnen bestimmte Anmeldeinformationen geben kann.

Wichtige Fakten über Click-to-Call

  • Click-to-Call wird auf Desktop-Browsern unterstützt. Es wird derzeit nicht für Mobilgeräte unterstützt.

  • Click-to-Call wird derzeit in diesen Regionen unterstützt:

    • Kanada

    • Deutschland

    • Japan

    • Großbritannien

    • US

  • Wichtige Informationen zum Click-to-Call SDK umfassen:

  • Das SDK besteht aus einer einzigen clicktocall.js-Datei. Diese muss auf jeder Website, auf der die Click-to-Call-Schaltfläche angezeigt werden soll, eingeschlossen oder referenziert werden. Sie müssen außerdem Ihre eigenen UI-Komponenten implementieren, wie die Click-to-Call-Schaltfläche und Anrufsteuerungen. Die Click-to-Call-Schaltfläche muss die makeCall-Funktion im SDK aufrufen, die wiederum einen WebRTC-Anruf initiiert. Wenn die Anrufanforderung durch CXone Mpower authentifiziert wird, wird der Anruf getätigt.

  • Das SDK bietet die Möglichkeit, Benutzerdaten, Website-Metadaten und Routing-Daten als Teil der SIP-Einladungsanforderung mithilfe von X-Headern zu übergeben. Sie müssen Ihr Studio Skript, das mit dem Click-to-Call KontaktpunktClosed Der Eintrittspunkt, den ein eingehender Kontakt verwendet, um eine Interaktion zu initiieren, wie z. B. Telefonnummer oder E-Mail-Adresse. verknüpft ist, so konfigurieren, dass es die Aufnahme erhält und nach Bedarf verwenden kann. Hierzu kann beispielsweise die Anzeige von Benutzerdaten in einem Popup-Fenster für Agenten oder die Verwendung der Routing-Daten zum Treffen von Routing-Entscheidungen gehören.

    Diese Bestimmung ist optional und Sie sollten sie nur einrichten, wenn Sie sie benötigen. Wenn Sie es nicht benötigen, können Sie die Funktion makeCall() auch ohne Datenübergabe einrichten.

    Das Erfassen und Weitergeben von Daten liegt in Ihrer Verantwortung. Das SDK stellt lediglich den Mechanismus zur Datenübertragung bereit. Es generiert, validiert oder verwaltet die Daten nicht.

Voraussetzungen für die Integration

Führen Sie zur Vorbereitung der Integration von Click-to-Call in Ihre Site die folgenden Schritte aus:

  • Erhalten Sie eine Client-ID von Ihrem NICE Kundenbetreuer.

  • Arbeiten Sie mit Ihrem NICE Kundenbetreuer zusammen, um Telefonnummern speziell für Click-to-Call bereitzustellen.

  • Eine POST-API auf Ihrem eigenen Server implementieren. Diese API muss ein JWT-Token für die Authentifizierung erzeugen. Dieses validiert die Legitimität eingehender Anrufanforderungen.

    Click-to-Call-Authentifizierung verwendet ein JWT. Sie müssen ein Paar asymmetrischer RSA-Schlüssel mit einer Größe von 2.048 Bit im PKCS#1-Format generieren. Der erste ist ein privater Schlüssel, den Sie zum Generieren Ihres JWT oder JWT1 verwenden. Das JWT muss mit dem RS256-Algorithmus signiert werden. Der zweite ist ein öffentlicher Schlüssel, den Sie NICE mitteilen müssen. Beim Initiieren eines Telefonanrufs müssen Sie das JWT1 in die Anforderung einschließen. CXone Mpower validiert das JWT1 in der eingehenden Anforderung mit dem von Ihnen angegebenen öffentlichen Schlüssel. Stellen Sie sicher, dass die Ablaufzeit des JWT1-Tokens 20 Sekunden nicht überschreitet.

    Sie müssen das JWT1 mit einer POST-API erzeugen. Sie müssen diese API auf Ihrem eigenen Server implementieren. Das SDK erwartet diese API, um die KontaktstelleClosed Der Eintrittspunkt, den ein eingehender Kontakt verwendet, um eine Interaktion zu initiieren, wie z. B. Telefonnummer oder E-Mail-Adresse. (Kontaktadresse) und Client-ID im Anforderungstext zu akzeptieren. Es sollte das JWT-Token mit ContactAddress und ClientId als Ansprüche zurückgeben.

    Sie können Beispielcode-Snippets im IntegrationHelpers/Templates-Verzeichnis des SDK-Pakets finden. Diese sind in .NET und Java geschrieben. Sie veranschaulichen, wie asymmetrische Schlüssel für die Authentifizierung und die POST-API, die Sie implementieren müssen, erzeugt werden.

    Beispiel API-Endpunkt:

    POST /generate-jwt1-token
Content-Type: application/json
{
	"ContactAddress": "<CONTACT_ADDRESS>",
	"ClientId": "<CLIENT_ID>"
}
							
	// API response:
"GENERATED_JWT1_TOKEN"

    Beispiel JWT1-Token API-Endpunkt-URL:

    let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>'; //This is where you enter the URL for the POST API you implement.

  • Geben Sie den öffentlichen Schlüssel Ihrem Kundenbetreuer zur Authentifizierung an.

  • Überlegen Sie Ihr UI-Design. Sie müssen Ihre eigene UI für die Kontaktseite des Anrufs entwickeln, einschließlich Schaltflächen für Anrufsteuerungen wie Stummschalten oder Beenden des Anrufs. Das SDK enthält React- und Angular-Beispielkomponenten, die Ihre Entwickler als Referenz und zur Inspiration verwenden können. Die Agentenseite des Anrufs wird in ihrer Agent-Anwendung behandelt, daher ist die UI-Entwicklung nur für die Kontaktseite nötig.

CXone Mpower Setup

Neben dem Hinzufügen der Click-to-Call-Funktionalität zu Ihrer Website müssen Sie auch sicherstellen, dass Ihre Routingkomponenten in CXone Mpower eingerichtet sind. Ihr CXone Mpower-Administrator kann die nötigen Komponenten einrichten.

Sie müssen Folgendes haben:

  • Einen eingehenden Sprach-ACD Skill, der mit den nötigen zugewiesenen Agenten erstellt wurde.

  • Kontaktstelle (POC) eingerichtet für Sprachanrufe. Diese müssen Telefon-POCs für jede Click-to-Call-Telefonnummer sein. Der Entwickler, der Click-to-Call auf Ihrer Website implementiert, muss dies für contactAddress in der JavaScript-Datei verwenden.

  • Ein Studio-Skript zum Weiterleiten von Anrufen an einen Agenten.

Je nach Ihrer CXone Mpower-Konfiguration können Sie in der Lage sein, vorhandene Routingkomponenten zu verwenden, oder Sie müssen neue erstellen und einrichten.

SDK-Integration

Sie müssen die nötigen Elemente im Voraussetzungen-Abschnitt abgeschlossen oder vorbereitet haben.

  1. Beziehen Sie die clicktocall.js-Datei wie passend in Ihre Webseite ein.

  2. Stellen Sie in der clicktocall.js-Datei die API-Endpunkt-URL Ihrer POST-API ein.

    let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';

  3. Fügen Sie die folgenden UI-Komponenten zu Ihrer Website hinzu. Sie müssen jeder Komponente eine eindeutige Kennung geben. Das SDK-Paket beinhaltet UI-Beispielkomponenten in React und Angular. Sie finden diese im IntegrationHelpers/UIComponents-Verzeichnis.

    • Schaltfläche zum Starten des Sprachanrufs.

    • Schaltfläche zum Auflegen oder Trennen des Anrufs.

    • Schaltfläche zum Stummschalten oder zum Aufheben der Stummschaltung des Anruftons.

    • Schaltfläche zum Anzeigen eines Tastenfelds für DTMF-Eingaben.

    • Ein <div> zum Anzeigen der Tastenfeldtasten.

    • Bezeichnung zum Anzeigen eines erfolgreichen Anrufs oder von Fehlermeldungen.

    • Ein <audio>-Tag für die Wiedergabe bestimmter Töne wie Wähltöne oder Anrufverbindungstöne.

  4. Aktualisieren Sie die clicktocall.js-Datei mit Verweisen auf die UI-Komponenten, die Sie im vorherigen Schritt hinzugefügt haben.

    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. Richten Sie Ihre Präferenzen im Konfigurationen-Abschnitt der clicktocall.js-Datei ein. Dieser Abschnitt enthält mehrere Variablen, die bestimmte Verhaltensweisen steuern.

    • Stellen Sie die Zahl der erneuten Versuche mit retryCount ein. Dies gibt an, wie oft das System das erneute Verbinden des Anrufs versucht, wenn ein Anruf getrennt wird. Die Standardeinstellung ist 3.

    • Stellen Sie den POCREnvironmentXHeaderValue-Wert auf PROD ein.

    • Stellen Sie die Konfigurationseinstellungen für den Telefonserver in phoneServerConfig und clientId ein.

      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. Wenn Sie die Benachrichtigungen auf Kontaktseite in Bezug auf fehlgeschlagene oder getrennte Anrufe anpassen möchten, ändern Sie die Textstrings in den folgenden Variablen in 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. Konfigurieren Sie standortbasierte Ressourcen, wenn Sie die nächstgelegenen Ressourcen zur Bearbeitung von Click-to-Call-Anfragen zuweisen möchten. Gehen Sie hierzu in clicktocall.js wie folgt vor:

    1. Verwenden Sie die Funktion getAvailableLocations(), um eine Liste der Standorte zurückzugeben, an denen die erforderlichen Ressourcen, beispielsweise Session Border Controller (SBCs), bereitgestellt werden. Mithilfe dieser Standorte können Sie die beste Ressource für die Verarbeitung von Click-to-Call Anfragen ermitteln.

    2. Integrieren Sie die Standortauswahl in die Benutzeroberfläche. Hierzu haben Sie zwei Möglichkeiten:

      • Vom Benutzer auswählbares Steuerelement: Stellen Sie ein auswählbares Element bereit, beispielsweise ein Dropdown-Menü oder ein Optionsfeld, mit dem Kontakte aus den von der Funktion getAvailableLocations() bereitgestellten Optionen ihren nächstgelegenen Standort auswählen können.

      • Automatische Zuordnung: Wenn das System den Standort des Kontakts ermitteln kann, ordnen Sie ihn einem der von der Funktion getAvailableLocations() angezeigten Standorte zu und übergeben Sie ihn an die Funktion makeCall().

    3. Konfigurieren Sie den Standardspeicherort. Legen Sie dazu die Variable defaultLocation auf den Standort fest, von dem aus Ihre Kontakte am häufigsten anrufen. Der Standardstandort muss einer der von der Funktion getAvailableLocations() zurückgegebenen Standorte sein.

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

  8. Fügen Sie der Click-to-Call-Schaltfläche die makeCall(contactAddress, [location], [userData], [routingData])-Methode hinzu. Die Parameter location, userData und routingData sind optional.

    Die Parameter userData und routingData übergeben Benutzer- und Routingdaten zur Verwendung bei Routing-Entscheidungen oder zur Anzeige in Agent. Dies geschieht als Teil der SIP-Einladungsanforderung mithilfe von X-Headern. Anschließend können Sie die Daten im für den Ansprechpartner verwendeten Studio-Skript verarbeiten.

    • userData: Zeigt benutzerbezogene Informationen an.

    • routingData: Zeigt Daten an, die für Routing-Entscheidungen verwendet werden.

    Diese Parameter müssen als Objekte bereitgestellt werden, die Schlüssel-Wert-Paare enthalten. Das SDK konvertiert beide Objekte mit JSON.stringify() in Zeichenfolgen und überträgt sie als X-Header in der SIP-Einladungsanforderung:

    • X-user-data: Enthält das Objekt userData.

    • X-routing-data: Enthält das Objekt routingData.

    userData und routingData sind separate Objekte, damit Sie die Daten bei Bedarf bequem trennen können. Wenn Sie möchten, können Sie jedoch auch alle erforderlichen Daten in nur einem der Parameter übergeben. Sie können alle Daten auch innerhalb eines einzigen X-Headers übertragen, wenn Ihr Studio-Skript entsprechend konfiguriert ist.

    Aufgrund von Beschränkungen hinsichtlich der Datengröße, die in X-Headern übergeben werden kann, sollte die Zeichenlänge jedes userData- und routingData-Objekts nach der Zeichenfolgenkonvertierung 1.000 Zeichen (1 KB) nicht überschreiten.

    Beachten Sie die folgenden Beispiele, um es für Ihren speziellen Anwendungsfall zu konfigurieren:

    • Ohne Übergabe von Parametern:

      makeCall(contactAddress);

    • Nur location weitergeben:

      makeCall(contactAddress, "US");

    • Übergeben von location, userData und routingData:

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

    • Nur Passieren userData:

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

  9. Wenn Sie die Methode makeCall() so konfiguriert haben, dass die Objekte userData oder routingData verwendet werden, müssen Sie die X-Header-Daten im Skript Studio verarbeiten, das mit dem Click-to-Call KontaktpunktClosed Der Eintrittspunkt, den ein eingehender Kontakt verwendet, um eine Interaktion zu initiieren, wie z. B. Telefonnummer oder E-Mail-Adresse. verknüpft ist. Verwenden Sie dazu die folgenden Aktionen:

  10. Rufen Sie zum Senden von DTMF-Tönen die guiSendDTMF(digit)-Funktion auf, wenn eine DTMF-Schaltfläche angeklickt wird.

  11. Testen Sie Ihre Konfiguration, um sicherzustellen, dass Anrufe erfolgreich initiiert und weitergeleitet werden können.