Click-to-Call

Click-to-Call permet à vos contactsClosed 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.

Click-to-Call est pris en charge par les navigateurs de bureau.

Détails de la trousse SDK Click-to-Call

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

Prérequis d’intégration

Pour préparer vos développeurs à intégrer Click-to-Call à votre site, vous devez effectuer les opérations suivantes :

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

  • Travaillez avec votre Représentant de compte pour fournir des numéros de téléphone spécifiques pour 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 au format PKCS#1. La première est une clé privée que vous utilisez pour générer votre jeton JWT, ou JWT1. La seconde est une clé publique, que vous devez fournir à NICENICE. 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.

    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èsClosed 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 montrent comment générer les clés asymétriques pour l’authentification et l’API POST que vous devez implémenter.

    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. Mettez à jour la variable getJWT2TokenURL avec le terminal API suivant. CXone Mpower l’utilise pour valider votre jeton JWT :

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

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

    • Étiquette permettant d’afficher les messages de réussite ou d’erreur de l’appel.

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

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

  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 vous cliquez sur un bouton DTMF.

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

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

  10. Veillez à effectuer de nombreux tests pour vous assurer que vous pouvez lancer et acheminer correctement des appels.