Click-to-Call

Click-to-Call permet à vos contactsClosed La personne interagissant avec un agent, un serveur vocal interactif (IVR), ou robot dans votre centre de contact. de joindre un agent humain en un seul clic. À partir de ce bouton sur votre site, les visiteurs peuvent lancer un appel direct à un agent. Cela peut vous aider à réduire ou éliminer ce qui suit :

  • Étapes supplémentaires pour joindre une équipe commerciale ou d’assistance.

  • Les frais généraux, tels que les frais de numéro de service et les surcharges sur appareils mobiles.

Click-to-Call fonctionne par le biais d’un kit de développement logiciel (ou SDK) écrit en JavaScript. Pour le configurer, vous devez demander à un développeur d’implémenter le SDK sur votre site Web. Vous devez également travailler avec un Représentant de compte qui peut fournir des informations d’identification spécifiques.

Click-to-Call est pris en charge dans les navigateurs pour postes de travail.

Détails du SDK Click-to-Call

Le SDK comprend un seul fichier clicktocall.js. Il doit impérativement est inclus ou référencé sur chaque page Web où vous souhaitez afficher le bouton Click-to-Call. Vous devez aussi implémenter vos propres composants d’interface utilisateur, comme le bouton Click-to-Call et les commandes d’appel. Le bouton Click-to-Call doit invoquer la fonction makeCall du SDK, qui initie un appel WebRTC. Si la demande d’appel est authentifiée par CXone, l’appel est passé.

Prérequis d'intégration

Avant que vos développeurs intègrent Click-to-Call à votre site, vous devez effectuer les tâches suivantes :

  • Obtenir un ID de client auprès de votre Représentant de compte.

  • Collaborer avec votre Représentant de compte afin de provisionner des numéros de téléphone particuliers pour Click-to-Call.

  • Implémenter une API POST sur votre propre serveur. Cette API doit générer un jeton JWT pour l’authentification. Ce jeton valide la légitimité des demandes d’appel.

    L’authentification dans Click-to-Call repose sur un jeton JWT. Vous devez générer une paire de clés asymétriques RSA d’une taille de 2048 bits, au format PKCS#1. La première est une clé privée qui vous sert à générer votre JWT, ou JWT1. La seconde est une clé publique, que vous devez fournir à NICENICE. Lors de l’initialisation d’un appel téléphonique, le JWT1 doit être inclus dans la demande. CXone valide le JWT1 dans la demande entrante à l’aide de la clé entrante que vous avez fournie.

    Vous devez générer le JWT1 avec une API POST. Vous devez implémenter cette API sur votre propre serveur. Le SDK attend cette API pour accepter le point de contactClosed Le point d'entrée qu'un contact entrant utilise pour initier une interaction, tel qu'un numéro de téléphone ou une adresse e-mail. (adresse de contact) et l’ID de client figurant dans le corps de la demande. Il doit alors renvoyer le jeton JTW avec les réclamations ContactAddress et ClientId.

    Vous pouvez trouver des exemples de snippets de code dans le répertoire IntegrationHelpers/Templates du package SDK. Ils sont rédigés en .NET et Java. Ils montrent comment générer les clés asymétriques pour l’authentification et illustrent l’API POST que vous devez implémenter.

    Exemple de terminaison d’API :

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

    Exemple d’URL de terminaison de l’API pour le jeton JWT1 :

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

  • Fournissez la clé publique à votre Représentant de compte aux fins d’authentification.

  • Réfléchissez à la conception de votre interface utilisateur. Vous devez développer votre propre interface du côté contact de l’appel, notamment les boutons des commandes d’appel, pour couper le son ou terminer l’appel, par exemple. Le SDK inclut les exemples de composants React et Angular que les développeurs peuvent utiliser comme référence. Le côté agent de l’appel est traité par leur application d’agent; par conséquent, le développement de l’interface est uniquement nécessaire pour le côté contact.

Configuration de CXone

Outre l’ajout de la fonctionnalité Click-to-Call à votre site Web, vous devez veiller à configurer vos composants de routage dans CXone. Votre administrateur CXone peut configurer les composants nécessaires.

Veillez à avoir les éléments suivants :

  • Une compétence ACD d’appel vocal entrant créée et affectée aux agents nécessaires.

  • Des points de contact (POC) configurés pour les appels vocaux. Il doit s’agit des POC de téléphone pour chaque numéro d’appel Click-to-Call. Le développeur qui implémente Click-to-Call sur votre site doit s’en servir pour contactAddress dans le fichier JavaScript.

  • Un script Studio pour acheminer les appels à un agent.

Selon votre configuration de CXone, il est possible que vous puissiez utiliser des composants de routage existants ; sinon, vous devez en créer et en configurer de nouveaux.

Intégration du SDK

Veillez à accomplir ou préparer les éléments indiqués dans la section des prérequis.

  1. Incorporez le fichier clicktocall.js dans votre page Web selon vos besoins.

  2. Dans le fichier clicktocall.js, définissez l’URL de terminaison de votre API POST.

    let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';

  3. Mettez à jour la variable getJWT2TokenURL avec la terminaison d’API suivante. CXone s’en sert pour valider votre JWT :

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

  4. Ajoutez les composants d’interface utilisateur suivants à votre site Web. Veillez à attribuer à chaque composant un identifiant unique. Le package SDK inclut des exemples pour les composants d’interface utilisateur React et Angular. Vous les trouverez dans le répertoire IntegrationHelpers/UIComponents.

    • Bouton pour lancer l’appel vocal.

    • Bouton pour raccrocher ou déconnecter l’appel.

    • Bouton pour couper ou rétablir le son de l’appel.

    • Bouton pour afficher un clavier destiné aux entrées DTMF.

    • Une balise <div> pour afficher les touches du clavier.

    • Un libellé pour indiquer que l’appel a abouti ou afficher les messages d’erreur.

    • Une balise <audio> pour lires des sons, comme les tonalités de numérotation ou de connexion de l’appel.

  5. Mettez à jour le fichier clicktocall.js avec les références des composants d’interface utilisateur que vous venez d’ajouter.

    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. Ajoutez la méthode makeCall(contactAddress) au bouton Click-to-Call.

  7. Pour envoyer des tonalités DTMF, appelez la fonction guiSendDTMF(digit) lorsque l’utilisateur clique sur un bouton DTMF.

  8. Définissez vos préférences dans la section des configurations du fichier clicktocall.js. Cette section contient plusieurs variables de configuration qui contrôlent certains types de comportements.

    • Définissez le nombre de tentatives avec retryCount. En cas de déconnexion de l’appel, il s’agit du nombre de tentatives de reconnexion qui seront effectuées par le système. La valeur par défaut est 3.

    • Définissez la valeur POCREnvironmentXHeaderValue sur PROD.

    • Définissez les paramètres de configuration du serveur téléphonique dans phoneServerConfig et 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

  9. Si vous souhaitez personnaliser les notifications côté contact concernant les appels qui échouent ou sont déconnectés, modifiez les chaînes de texte des variables suivantes dans clicktocall.js.

    • callFailedToConnectErrorMessage

    • uiErrorMessage

    • contactSupportTeamMessage

  10. Veillez à effectuer suffisamment de tests pour être sûr que le lancement des appels et leur acheminement fonctionnent.