Click-to-Call

Click-to-Call permet à vos contactsFermé La personne qui interagit avec un agent, un IVR ou un robot dans votre centre d’appels. d’appeler un agent en chair et en os en un seul clic. À partir d’un bouton sur votre site Web, les visiteurs peuvent lancer un appel direct à un agent. Cela peut vous aider à réduire ou à éliminer :

  • Étapes supplémentaires lors de la connexion à une équipe de vente ou de soutien.

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

Click-to-Call fonctionne grâce à une trousse de développement logiciel (SDK) écrite en JavaScript. Pour le configurer, vous devez travailler avec un développeur pour implémenter la trousse SDK sur votre site Web. Vous devez également travailler avec un Représentant de compte qui peut fournir des informations d'identification spécifiques.

Faits saillants concernant Click-to-Call

  • Click-to-Call est pris en charge par les navigateurs de bureau. Il n'est actuellement pas pris en charge pour les appareils 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 :

  • La trousse SDK consiste en un seul fichier clicktocall.js. Elle doit être incluse ou référencée sur chaque page Web où vous souhaitez que le bouton Click-to-Call s’affiche. Vous devez également 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 de la trousse SDK, qui lance un appel WebRTC. Si la demande d’appel est authentifiée par CXone Mpower, l’appel est passé.

  • Le SDK fournit une option pour 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é Le point d’entrée qu’un contact entrant utilise pour lancer une interaction, tel qu’un numéro de téléphone ou une adresse courriel. pour obtenir les données et les 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 seulement le mécanisme de transmission des données. Il ne génère, ne valide ni ne gère les données.

  • Pour les mises à jour du SDK Click-to-Call :

    • Les modifications, y compris les améliorations, les nouvelles fonctionnalités et les mises à jour de compatibilité, ne sont pas effectuées selon un horaire fixe.

    • Le SDK est fourni sous la forme d’un seul fichier JavaScript. Lorsqu’une mise à jour est disponible, NiCE vous fournit la dernière version. Vous devez ensuite remplacer le fichier existant dans votre implémentation.

    • Le SDK maintient la rétrocompatibilité afin que les versions existantes continuent de fonctionner sans interruption. Toutefois, en cas de modification importante, vous pourriez être amené à faire une mise à jour vers la dernière version.

Prérequis d’intégration

Pour préparer l'intégration de Click-to-Call dans votre site, vous devez :

  • Obtenez un identifiant client de votre NiCE Représentant de compte.

  • Travaillez avec votre NiCE Représentant de compte pour fournir des numéros de téléphone spécifiques à Click-to-Call.

  • Mettez en œuvre une API POST sur votre propre serveur. Cette API doit générer un jeton JWT pour l’authentification. Cela permet de valider la légitimité des demandes d’appels entrants.

    L’authentificationClick-to-Call utilise un jeton JWT. Vous devez générer une paire de clés asymétriques RSA d’une taille de 2 048 bits. La première est une clé privée que vous utilisez pour générer votre JWT (JWT1). Le JWT doit être signé à l’aide de l’algorithme RS256. La deuxième est une clé publique, que vous devez fournir à NiCE.

    Vous pouvez générer la paire de clés requise au format PEM à l’aide de ces commandes OpenSSL :

    # Generate a 2048-bit RSA private key in PEM format
openssl genpkey -algorithm RSA -out private.pem -pkeyopt rsa_keygen_bits:2048
# Extract the corresponding public key in PEM format
openssl rsa -pubout -in private.pem -out public.pem

    Lorsque vous lancez un appel téléphonique, vous devez inclure le jeton JWT1 dans la demande. CXone Mpower valide le jeton JWT1 dans la requête entrante avec la clé publique que vous avez fournie. Assurez-vous que le délai d'expiration du jeton JWT1 n'excède pas 20 secondes.

    Vous devez générer le jeton JWT1 avec une API POST. Vous devez mettre en œuvre cette API sur votre propre serveur. La trousse SDK s’attend à ce que cette API accepte le point d’accèsFermé Le point d’entrée qu’un contact entrant utilise pour lancer une interaction, tel qu’un numéro de téléphone ou une adresse courriel. (adresse de contact) et l’ID client dans le corps de la demande. Il doit renvoyer le jeton JWT avec ContactAddress et ClientId comme revendications.

    Vous trouverez des exemples de code dans le répertoire IntegrationHelpers/Templates de la trousse SDK. Ils sont écrits au format .NET et Java. Ils fournissent un exemple de référence pour la mise en œuvre de l’API POST requise.

    Exemple de terminal API :

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

    Exemple d’URL de terminal pour l’API de 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 pour l’authentification.

  • Tenez compte de la conception de votre interface utilisateur. Vous devez développer votre propre interface utilisateur pour le côté contact de l’appel, y compris les boutons pour les commandes d’appel comme la mise en sourdine ou la fin de l’appel. La trousse SDK comprend des exemples de composants React et Angular que vos développeurs peuvent utiliser à titre de référence et d’inspiration. Le côté agent de l’appel est géré dans leur application d’agent, le développement de l’interface utilisateur n’est donc nécessaire que pour le côté contact.

Configuration CXone Mpower

En plus d’ajouter la fonctionnalité Click-to-Call à votre site Web, vous devez également vous assurer que vos composants de routage sont configurés dans CXone Mpower. Votre administrateur CXone Mpower peut configurer les composants nécessaires.

Assurez-vous de disposer de ce qui suit :

  • Une compétence de voix entrante ACD créée avec les agents nécessaires qui lui sont assignés.

  • Des points d’accès (PDA) établis pour les appels vocaux. Il doit s’agir de PDA téléphoniques pour chaque numéro de téléphone Click-to-Call. Le développeur qui implémente Click-to-Call sur votre site doit l’utiliser pour contactAddress dans le fichier JavaScript.

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

En fonction de votre configuration CXone Mpower, vous pourrez peut-être utiliser des composants de routage existants, ou vous devrez peut-être créer et configurer de nouveaux composants.

Intégration de la trousse SDK

Assurez-vous d’avoir complété ou préparé les éléments nécessaires dans la section des conditions préalables.

  1. Incorporez le fichier clicktocall.js dans votre page Web comme bon vous semble.

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

    let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';

  3. Ajoutez les composants d’interface utilisateur suivants à votre site Web. Veillez à donner à chaque composant un identifiant unique. La trousse SDK comprend des exemples de composants d’interface utilisateur dans React et Angular. Vous les trouverez dans le répertoire IntegrationHelpers/UIComponents.

    • Bouton pour démarrer l’appel vocal.

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

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

    • Bouton pour afficher un clavier pour les entrées DTMF.

    • Un <div> pour afficher les touches du clavier.

    • Une étiquette pour afficher les messages de réussite ou d'erreur d'appel.

    • Une balise <audio> pour jouer certains sons comme les tonalités de composition ou les sons de connexion d’appel.

  4. Mettez à jour le fichier clicktocall.js avec les références des composants de l’interface utilisateur que vous avez ajoutés à l’étape précédente.

    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. Il s’agit d’une section contenant plusieurs variables de configuration qui contrôlent certains types de comportement.

    • Réglez le nombre de nouvelles tentatives avec retryCount. Si un appel se déconnecte, il s’agit du nombre de fois que le système tente de reconnecter l’appel. La valeur par défaut est 3.

    • Définissez la valeur de 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 relatives aux appels qui échouent ou qui se déconnectent, modifiez les chaînes de texte dans les 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 retourner une liste d’emplacements où les ressources requises, comme 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().

      • Mappage 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 passez-le à la fonction makeCall().

    3. Configurer l'emplacement par défaut. Pour ce faire, définissez la variable defaultLocation à l’emplacement à partir duquel vos contacts appellent le plus souvent. L'emplacement par défaut doit être l'un des emplacements retourné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, vous pouvez donc séparer les données si nécessaire. Cependant, vous pouvez passer toutes les données requises dans un seul des paramètres si vous préférez. Vous pouvez aussi passer 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.

    Consultez les exemples suivants pour le configurer pour votre cas d’utilisation particulier :

    • Sans passer aucun paramètre :

      makeCall(contactAddress);

    • Passage seulement location :

      makeCall(contactAddress, "US");

    • Passage de location, userData et routingData :

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

    • Passage seulement 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é Le point d’entrée qu’un contact entrant utilise pour lancer une interaction, tel qu’un numéro de téléphone ou une adresse courriel. à l'aide de ces actions :

  10. Pour envoyer des tonalités DTMF, appelez la fonction guiSendDTMF(digit) lorsque vous cliquez sur un bouton DTMF.

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