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.

Click-to-Call wird auf Desktop-Browsern unterstützt.

Details zum Click-to-Call-SDK

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 authentifiziert wird, wird der Anruf getätigt.

Voraussetzungen für die Integration

Als Vorbereitung der Integration von Click-to-Call auf Ihrer Website durch Ihre Entwickler müssen Sie Folgendes tun:

  • Client-ID von Ihrem Kundenbetreuer erhalten.

  • Mit Ihrem Kundenbetreuer bei der Bereitstellung der für Click-to-Call spezifischen Telefonnummern zusammenarbeiten.

  • 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 asymmetrische RSA-Schlüssel mit einer Größe von 2048 Bits im PKCS#1-Format erzeugen. Der erste ist ein privater Schlüssel, den Sie zum Erzeugen Ihres JWT oder JWT1 verwenden. Der zweite ist ein öffentlicher Schlüssel, den Sie NICENICE angeben. Beim Initiieren eines Telefonanrufs müssen Sie das JWT1 in die Anforderung einschließen. CXone validiert das JWT1 in der eingehenden Anforderung mit dem von Ihnen angegebenen öffentlichen Schlüssel.

    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 Setup

Neben dem Hinzufügen der Click-to-Call-Funktionalität zu Ihrer Website müssen Sie auch sicherstellen, dass Ihre Routingkomponenten in CXone eingerichtet sind. Ihr CXone-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-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. Aktualisieren Sie die getJWT2TokenURL-Variable mit dem folgenden API-Endpunkt. CXone verwendet dies zum Validieren Ihres JWT:

    let getJWT2TokenURL = 'https://api-na1.niceincontact.com/ClickToCall/GetJWT2Token';

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

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

  6. Fügen Sie der Click-to-Call-Schaltfläche die makeCall(contactAddress)-Methode hinzu.

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

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

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

  10. Sie müssen umfangreiche Tests durchführen, um sicherzustellen, dass Sie Anrufe erfolgreich initiieren und routen können.