Click-to-Call

Click-to-Call permet à vos contactsFermé The person interacting with an agent, IVR, or bot in your contact center. 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 Account Representative qui peut fournir des informations d’identification spécifiques.

Points à retenir sur Click-to-Call

  • Click-to-Call est pris en charge dans les navigateurs pour postes de travail. Il n'est actuellement pas pris en charge pour les mobiles.

  • Click-to-Call est actuellement pris en charge dans ces régions :

    • Canada

    • Allemagne

    • Japon

    • Royaume-Uni

    • États-Unis

  • Les informations clés sur le SDK Click-to-Call incluent :

  • 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 Mpower, l’appel est passé.

  • Le SDK fournit une option permettant de transmettre des données utilisateur, des métadonnées de site Web et des données de routage dans le cadre de la demande d'invitation SIP à l'aide d'en-têtes X. Vous devez configurer votre script Studio associé au Click-to-Call point de contactFermé The entry point that an inbound contact uses to initiate an interaction, such as a phone number or email address. pour obtenir la prise et l'utiliser selon vos besoins. Cela peut inclure l'affichage des données utilisateur dans une fenêtre contextuelle pour les agents ou l'utilisation des données de routage pour prendre des décisions de routage.

    Cette disposition est facultative et vous ne devez la configurer que si vous en avez besoin. Si vous n'en avez pas besoin, vous pouvez configurer la fonction makeCall() sans transmettre aucune donnée.

    La collecte et la transmission des données relèvent de votre responsabilité. Le SDK fournit uniquement le mécanisme de transmission des données. Il ne génère pas, ne valide pas et ne gère pas les données.

Prérequis d'intégration

Pour préparer l'intégration de Click-to-Call dans votre site, procédez comme suit :

  • Obtenez un identifiant client auprès de votre NICE Account Representative.

  • Travaillez avec votre NICE Account Representative pour fournir des numéros de téléphone spécifiques à 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 2 048 bits au format PKCS#1. La première est une clé privée que vous utilisez pour générer votre JWT ou JWT1. Le JWT doit être signé à l'aide de l'algorithme RS256. La seconde est une clé publique, que vous devez fournir à NICE. Lors de l’initialisation d’un appel téléphonique, le JWT1 doit être inclus dans la demande. CXone Mpower valide le JWT1 dans la demande entrante à l’aide de la clé entrante que vous avez fournie. Assurez-vous que le délai d’expiration du jeton JWT1 ne dépasse pas 20 secondes.

    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 contactFermé The entry point that an inbound contact uses to initiate an interaction, such as a phone number or email address. (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 Account Representative 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 agent application; par conséquent, le développement de l’interface est uniquement nécessaire pour le côté contact.

Configuration de CXone Mpower

Outre l’ajout de la fonctionnalité Click-to-Call à votre site Web, vous devez veiller à configurer vos composants de routage dans CXone Mpower. Votre administrateur CXone Mpower 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 Mpower, 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. 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.

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

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

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

    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. Configurez les ressources basées sur la localisation si vous souhaitez allouer les ressources les plus proches pour gérer les requêtes Click-to-Call. Pour ce faire, procédez comme suit dans clicktocall.js :

    1. Utilisez la fonction getAvailableLocations() pour renvoyer une liste d’emplacements où les ressources requises, telles que les contrôleurs de bordure de session (SBC), sont déployées. Ces emplacements aident à déterminer la meilleure ressource pour traiter les requêtes Click-to-Call.

    2. Intégrer la sélection d'emplacement dans l'interface utilisateur. Vous pouvez le faire de deux manières :

      • Contrôle sélectionnable par l'utilisateur : fournissez un élément sélectionnable, comme un menu déroulant ou un bouton radio, qui permet aux contacts de sélectionner leur emplacement le plus proche parmi les options fournies par la fonction getAvailableLocations().

      • Cartographie automatique : si le système peut déterminer l'emplacement du contact, mappez-le à l'un des emplacements exposés par la fonction getAvailableLocations() et transmettez-le à la fonction makeCall().

    3. Configurer l'emplacement par défaut. Pour ce faire, définissez la variable defaultLocation sur l’emplacement à partir duquel vos contacts appellent le plus souvent. L'emplacement par défaut doit être l'un des emplacements renvoyés par la fonction getAvailableLocations().

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

  8. Ajoutez la méthode makeCall(contactAddress, [location], [userData], [routingData]) au bouton Click-to-Call. Les paramètres location, userData et routingData sont facultatifs.

    Les paramètres userData et routingData transmettent des données utilisateur et de routage à utiliser dans les décisions de routage ou à afficher dans Agent. Cela se fait dans le cadre de la demande d’invitation SIP à l’aide d’en-têtes X. Vous pouvez ensuite traiter les données dans le script Studio utilisé pour le point de contact.

    • userData: Affiche les informations relatives à l'utilisateur.

    • routingData: Affiche les données utilisées pour les décisions de routage.

    Ces paramètres doivent être fournis sous forme d’objets contenant des paires clé-valeur. Le SDK convertit les deux objets en chaînes à l'aide de JSON.stringify() et les transmet sous forme d'en-têtes X dans la demande d'invitation SIP :

    • X-user-data : Contient l'objet userData.

    • X-routing-data : Contient l'objet routingData.

    userData et routingData sont des objets distincts pour faciliter la séparation des données si nécessaire. Cependant, vous pouvez transmettre toutes les données requises dans un seul des paramètres si vous préférez. Vous pouvez également transmettre toutes les données dans un seul en-tête X si votre script Studio est configuré en conséquence.

    En raison des limitations sur la taille des données qui peuvent être transmises dans les en-têtes X, la longueur des caractères de chaque objet userData et routingData ne doit pas dépasser 1 000 caractères (1 Ko) après la conversion de chaîne.

    Reportez-vous aux exemples suivants pour le configurer pour votre cas d’utilisation particulier :

    • Sans passer aucun paramètre :

      makeCall(contactAddress);

    • Passage uniquement location :

      makeCall(contactAddress, "US");

    • Passage de location, userData et routingData :

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

    • Passage uniquement userData :

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

  9. Si vous avez configuré la méthode makeCall() pour utiliser les objets userData ou routingData, vous devez traiter les données d'en-tête X dans le script Studio associé au Click-to-Call point de contactFermé The entry point that an inbound contact uses to initiate an interaction, such as a phone number or email address. à l'aide de ces actions :

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

  11. Testez votre configuration pour vous assurer qu'elle peut initier et acheminer les appels avec succès.