Personnaliser les canaux de clavardage avec JavaScript

Vous pouvez personnaliser le clavardage en direct Les agents et les contacts interagissent en temps réel. et la Messagerie de clavardage Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse. avec JavaScript. NiCE CXone fournit des personnalisations par défaut et les appels d’API JavaScript correspondants. Vous devez inclure ces Appels API dans la balise de script qui ajoute le clavardage à votre site Web. Pour ajouter ces fonctionnalités, vous devez avoir accès au code de votre site Web. Cette page explique où ajouter le JavaScript et les lignes de code exactes à inclure. Vous devez également être familiarisé avec JavaScript ou le développement Web pour utiliser en toute confiance les informations contenues dans cette page.

Vous pouvez personnaliser les aspects suivants de vos canaux Divers moyens de communication vocale et numérique qui facilitent les interactions avec les clients dans un centre de contacts. de clavardage :

comportement du clavardage : Personnalisez le comportement de la fenêtre de clavardage. Cela inclut l'ouverture et la fermeture de la fenêtre de clavardage ou l'activation du mode jeu. Le mode jeu permet aux clients de jouer au jeu Snake en attendant un agent.
informations de clavardage : Personnalisez les informations affichées dans la fenêtre de clavardage. Cela inclut des éléments tels que le nom du client, l'image de l'agent ou l'état de l'activité.
champs, étiquettes et expressions : Définissez des champs personnalisés ou personnalisez les étiquettes de champ. Vous pouvez également configurer un texte alternatif pour les messages automatisés affichés aux contacts.
Apparence de la fenêtre de clavardage : Personnalisez l’apparence de la fenêtre de clavardage. Vous pouvez modifier des éléments tels que la taille et la position de la fenêtre sur la page Web.
CSS personnalisé : Définissez le CSS personnalisé pour la fenêtre de clavardage.
Actions proactives : Personnalisez l’expérience avec des actions proactives basées sur le comportement des clients.
Other functions: Other things you can configure include:
- Faire en sorte que l'environnement hôte soit à l'écoute de certains événements.
- intégration des canaux de clavardage numérique dans les applications iOS ou Android.
- Activation de l'authentification OAuth.

Actuellement, toutes les API JavaScript prennent en charge un chargeur Brand Embassy pour chaque appel. Si vous utilisez le clavardage NiCE CXone autonome sur votre site Web, tous ces appels prennent également en charge un nouveau chargeur NiCE CXone. À terme, toutes les API JavaScript pour le clavardage utiliseront le chargeur NiCE CXone au lieu de Brand Embassy.

La structure de l'appel JavaScript varie selon le chargeur que vous utilisez. Vous ne pouvez pas utiliser les deux structures en même temps. Utilisez Uniquement l'une ou l'autre selon le chargeur que vous utilisez.

Si vous utilisez NiCE CXone Guide pour mettre en œuvre le clavardage sur votre site Web, utilisez le chargeur NiCE CXone. Tous les appels de cette page ne sont pas pris en charge dans Guide, mais la documentation Guide répertorie tous les appels JavaScript pris en charge.

Si vous utilisez le chargeur NiCE CXone, que ce soit par le biais du clavardage numérique ou de Guide, structurez les appels comme suit :

cxone('chat','enableChatAlwaysOnline');

Si vous utilisez Guide pour mettre en œuvre le clavardage, vous devez également structurer les extraits de lancement par défaut comme suit :

cxone('guide','init',);

Si vous utilisez le chargeur Brand Embassy, structurez les appels comme suit (true/false est facultatif) :

brandembassy('enableChatAlwaysOnline',true);

Ajouter des appels JavaScript à un Canal de clavardage

Si vous ne l'avez pas encore fait, configurez un clavardage en direct ou un canal de messagerie de clavardage. Testez le canal pour vous assurer qu'il fonctionne avec les paramètres par défaut avant d'ajouter des personnalisations. Configurez les personnalisations de clavardage dans un environnement de test avant de les publier dans votre environnement de production. Cela aidera à minimiser les perturbations pour les visiteurs de votre site Web. Cela vous aidera également à vous assurer que vos personnalisations fonctionnent comme prévu.

Copiez le script et les Appels API exactement comme indiqué. Tout changement inattendu pourrait entraîner un dysfonctionnement de votre canal.

Cliquez sur le sélecteur d'applications et sélectionnez ACD.
Accédez à Digital > Points de contact Digital.
Sous Vos canaux, cliquez sur Script de site Web.
Copiez le code JavaScript de la page et collez-le dans un programme d’édition de texte tel que Bloc-Notes++. Assurez-vous d'inclure les balises <script> d'ouverture et de fermeture.
Dans Notepad++, juste au-dessus de la balise de fermeture </script> du code que vous avez collé, ajoutez les appels JavaScript que vous voulez utiliser. Dans l'image d'exemple suivante, le commentaire indique où ajouter les appels. Les appels pris en charge que vous pouvez utiliser sont décrits dans le reste de cette page.
Copy and paste the entire script, including the opening and closing <script> tags, into the header of a page of your website.
Visitez la page modifiée et envoyez des messages de clavardage de test pour vous assurer que vos personnalisations fonctionnent comme prévu.
Lorsqu’il a été entièrement testé et qu’il fonctionne comme prévu, copiez le script final dans l’en-tête de chaque page qui doit contenir le gadget logiciel de clavardage.

Appels JavaScript de Comportement du clavardage

Les appels de cette section vous permettent de modifier le comportement des fenêtres de clavardage.

Ouvrir la fenêtre de clavardage

Ouvre une fenêtre de clavardage automatiquement. Le comportement par défaut est que les fenêtres de clavardage s'ouvrent lorsqu'un contact clique sur l'icône de clavardage.



cxone('chat', 'openChatWindow');

Fermer la fenêtre de clavardage

Ferme automatiquement une fenêtre de clavardage. Par défaut, les fenêtres de clavardage se ferment lorsqu’un contact clique sur l’icône de clavardage.



cxone('chat', 'hideChatWindow');

Clavardage toujours en ligne

Affiche la fenêtre de clavardage comme s’il y avait des agents disponibles, même si aucun agent n’est en ligne.



cxone('chat', 'chat','enableChatAlwaysOnline');

Persistance des Champs personnalisés de la session de clavardage précédente

Vous pouvez choisir si vous voulez que les champs personnalisés persistent ou soient purgés du stockage local après que l’interaction a été initiée. Cela vous permet de sélectionner quels champs personnalisés continuent d'apparaître dans toutes les interactions avec un contact. Le 'field_id' fait référence à la valeur du Ident champ lors de la création d'un champ personnalisé.

cxone('chat','enablePrecontactSurveyFieldAutoFill'('field id');

Envoyer des données postback à partir de Adaptive Card

Studio actions et les robots peuvent envoyer des Adaptive Cards aux contacts par clavardage. Pour que le clavardage numérique envoie des données postback à Studio ou à un robot, vous devez activer un gestionnaire. Un gestionnaire de Adaptive Card fonctionne au sein du robot ou de l’action Studio pour gérer les engagements avec les Adaptive Cards et y répondre. Le gestionnaire s’active lorsqu’un utilisateur interagit avec les composants d’une Adaptive Card, par exemple en cliquant sur un bouton ou en sélectionnant une option dans une liste déroulante. Le gestionnaire déchiffre la saisie de l’utilisateur et détermine la réponse appropriée ou l’action à entreprendre. Ajoutez la commande de gestionnaire par défaut et la commande d’envoi de message, afin que Studio ou les robots puissent répondre en conséquence ou stocker les données de Adaptive Card à des fins de rapports. Vous pouvez également remplacer le gestionnaire par défaut par une commande de gestionnaire personnalisée.

Voir l'exemple



<script>

	(function (i, s, o, r, g, v, a, m) {

	g = v ? g + '?v=' + v : g; i['CXoneDfo'] = r;

	i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}; i[r].l = +new Date(); i[r].u = g;

	a = s.createElement(o); m = s.getElementsByTagName(o)[0]; a.async = true;

	a.src = g + '?' + Math.round(Date.now() / 1000 / 3600); m.parentNode.insertBefore(a, m);

	})(window, document, 'script', 'cxone', 'https://web-modules-de-na1.staging.niceincontact.com/loader/1/loader.js');



	cxone('guide', 'init',  '1032');

	cxone('guide', 'init', 1032, 'chat_5184dc2e-0c75-4265-8a2b-4221c5aebfe1');

    

	cxone('chat', ‘adaptiveCardOnExecuteAction’, 'button1Submit', (action, chatSdkInstance) => {

		let messageContent = {

			type: "TEXT",

			payload: {

				text: action.title

			},

			postback: action.id

		}

      

		chatSdkInstance.sendMessage(messageContent)

	});

</script>

Ajoutez une commande de gestionnaire par défaut des Adaptive Card :



adaptiveCardOnExecuteAction(actionId: string, callback: (action: node_modules/adaptivecards/src/card-elements.ts::Action) => void)

Commande d’envoi de message :



 sendMessage(messageContent: MessageContent)

Créer une commande de gestionnaire personnalisée :



{

	"acType": "Action.Execute", // type of action Action.Execute or Action.Submit

	"acVerb": "null|string", // only if `verb` is provided in the Action

	"acActionId": "null|string" // only if id is provided in the Action

	"acData": { // `data` are provided in Action

		"firstName": "Ichabod",

		"lastName": "Crane",

		"_messageText": "Did you fall asleep again?"

	}

}

Voir un exemple de message entrant



{

	...,

	"messageContent": {

		"type": "TEXT",

		"payload": {

			"text": "Submitted something for you", // use Action.Title if _messageText is not provided (in case Action.Title is not provided, send Action.type)

		},

		"postback": "{\"acType\":\"Action.Execute\",\"acData\":{\"firstName\":\"John\",\"lastName\":\"Doe\",\"_messageText\":\"Submitted something for you\"}}"

	}

							}

}

Voir un exemple de message sortant



{

	"thread": {

		"idOnExternalPlatform": "788a67af-263d-48b1-b67e-8675309"

	},

	"messageContent": {

		"type": "ADAPTIVE_CARD",

		"payload": {

			"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

			"type": "AdaptiveCard",

			"version": "1.4",

			"body": [

				{

					"type": "TextBlock",

					"text": "Present a form and submit it back to the originator"

				},

				{

					"type": "Input.Text",

					"id": "firstName",

					"label": "What is your first name?"

				},

				{

					"type": "Input.Text",

					"id": "lastName",

					"label": "What is your last name?"

				}

			],

			"actions": [

				{

					"type": "Action.Execute",

					"title": "Fire!",

					"data": {

						"_messageText": "Submitted something for you"

					}

				}

			]

		}

	}

}

Définir le code d’autorisation

Définit un code d’autorisation pour un flux OAuth. OAuth est un protocole d’authentification. Cela vous permet de laisser une application interagir avec une autre en votre nom sans exposer les mots de passe. Il doit être appelé avant l’initialisation du clavardage.



cxone('chat', 'setAuthorizationCode', 'authorization_code');

Définir les Champs préremplis du Sondage pré-contact

Allows previously-entered custom field values to appear as an auto-fill option in later fields or interactions. Specific IDs inform the chat window which custom field values to save. When a contact begins a new conversation, these custom fields from previous conversations are automatically available. This helps save time if a contact needs to enter the same information in a new chat session that they've entered in a previous chat session, such as an email address. If there are multiple fields you want to appear as autofill options, include them all in the same API call.



cxone('chat', setPrecontactSurveyPrefilledFields', ['fieldIdent1', 'fieldIdent2']);

Démarrage automatique d'une nouvelle Session de clavardage

Crée une nouvelle messagerie de clavardage Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse. ou une session de clavardage en direct Les agents et les contacts interagissent en temps réel. si aucune n'est actuellement en cours. Utilisez cet appel sur les pages à faible trafic de votre site Web pour éviter de submerger vos agents de contacts.

Digital Experience (DX) crée un nouveau dossier et l'ajoute à la file d'attente lorsque le premier message de la session de clavardage est envoyé. Un message automatisé masqué est envoyé au nom du client lorsque la session de clavardage démarre. Cela réduit le temps d'attente des contacts pour un agent en démarrant le processus plus tôt. Les Sessions de clavardage démarrent lorsqu'un contact clique sur l'icône de clavardage pour commencer une Conversation ou lorsque la fenêtre de clavardage s'ouvre pour les sessions de clavardage à démarrage automatique. Bien que le message initial soit masqué pour le client, l'Agent peut le voir.

Vous pouvez personnaliser le texte du message initial masqué.

Le démarrage automatique d'une session de clavardage ignore le formulaire de sondage pré-contact. Pour cette raison, vous devez utiliser d'autres méthodes pour collecter des informations sur les contacts. Par exemple, vous pouvez demander aux agents de saisir manuellement les informations dans la carte client. Vous pouvez également configurer l'authentification du client en utilisant une intégration OAuth.

Routing pour les cas démarrés automatiquement se produit selon les files d’attente de routage Déterminent vers quels agents acheminer les dossiers numériques, à l’aide de critères tels que l’expertise de l’agent dans ce type de dossier. configurées dans Digital Experience (DX). Pour les sessions de clavardage en direct, si aucun agent n’est disponible, la fenêtre de clavardage affiche un message En attente d’un agent disponible.

Pour démarrer automatiquement une session de clavardage, utilisez ces appels dans l'ordre indiqué :



cxone('chat', 'openChatWindow');



cxone('chat', 'autoStartSession');

Si vous ajoutez des appels supplémentaires au script, autoStartSession doit toujours être le dernier appel du script. Par exemple :



// set customer name (as this is required field)

cxone('chat', 'setCustomerName', 'Elizabeth');



// open chat window so user can start to chat

cxone('chat', 'openChatWindow');



// and finally start the new chat session (without the pre-chat form)

cxone('chat', 'autoStartSession');

Activer les Sessions de clavardage simultanées

Vous pouvez permettre aux contacts de démarrer plusieurs sessions de clavardage dans le même navigateur. Si un contact est déjà dans un clavardage actif dans un onglet de navigateur, il peut démarrer un deuxième clavardage dans un nouvel onglet ou une nouvelle fenêtre de navigateur.

Précisez comment les données de clavardage sont stockées en utilisant l’une des options suivantes :

local : les données persistent dans le navigateur après la fermeture de l’onglet ou de la fenêtre. Il s’agit de la méthode de stockage par défaut. Si plusieurs sessions de clavardage sont ouvertes dans différents onglets en même temps, elles sont toutes considérées comme la même interaction. La conversation et l’expérience du clavardage sont les mêmes pour tous les onglets.
session : les données sont stockées pour chaque onglet ou fenêtre individuel et sont effacées à la fermeture de l’onglet ou de la fenêtre. Cela permet aux utilisateurs de démarrer plusieurs sessions de clavardage dans différents onglets ou fenêtres. Chaque session de clavardage est traitée comme une interaction distincte.
inMemory : sessionId et customerId sont uniquement utilisés dans la mémoire de l’application de clavardage. Les données ne persistent pas dans le navigateur. L’actualisation du navigateur supprime tout l’historique. Cela permet plusieurs sessions de clavardage simultanées lorsqu’elles sont ouvertes dans plusieurs onglets ou fenêtres de navigateur.

Pour activer les sessions de clavardage simultanées, ajoutez la clé storageType avec une valeur de session ou inMemory.

Si vous utilisez storageType: 'local' et que vous souhaitez tout de même éliminer l’historique des conversations, vous pouvez créer un écouteur d’événements qui supprime customerId après la fin du clavardage.



cxone('chat', 

	'init',

	'MY_BRAND_ID_123',

	'MY_CHANNEL_ID_321',

	undefined,

	{

		storageType: 'session',

	},

);

Éliminer l’historique des conversations

Supprime l’historique des conversations après la fin d’une conversation par clavardage. Cela peut être utile si vous utilisez l’option de stockage par défaut du clavardage, à savoir le stockage local. Cette option de stockage conserve les données même après la fermeture des instances du navigateur. Dans ce cas, vous pouvez supprimer spécifiquement l’historique des conversations en effaçant la valeur customerID du stockage local. L’exemple suivant crée un écouteur d’événements pour écouter l’événement caseStatusChanged du clavardage. Ceci indique que la session de clavardage est terminée. Par la suite, la commande removeItem est appelée, ce qui supprime customerID du stockage local du navigateur.



cxone('chat', 'onPushUpdate', ['CaseStatusChanged'], pushUpdatePayload => { 

	if (typeof pushUpdatePayload === 'undefined' || typeof pushUpdatePayload.data === 'undefined') { 

		return; 

	}  

	const { status } = pushUpdatePayload.data.case || {};   

	if (typeof status === 'undefined') { 

		return; 

	}   

	// When a previous case has been closed, this will set the custom fields again. 

	if (status === 'closed') { 

		localStorage.removeItem('_BECustomerID') 

		); 

	} 

});

Personnaliser le message de contact automatisé initial

Le message par défaut est le texte du bouton sur lequel le client clique pour démarrer la conversation. Vous pouvez personnaliser le texte du message initial automatisé de trois manières :

Remplacez le texte du bouton par défaut.



cxone('chat', 'sendFirstMessageAutomatically', 'Hello');

Modifiez le message initial de manière dynamique.



cxone('chat', 'setFirstAutomatedMessageContent', 'Hello, I have a question');

Modifiez le texte du message sur la page Traductions.

Rendre le message automatisé initial visible pour les contacts

Si vous souhaitez que le contact puisse voir le message automatisé initial, ajoutez cet appel à votre script :



cxone('chat', 'hideFirstSentMessage', false);

Retarder la création de cas

Vous pouvez configurer Digital Experience (DX) pour attendre le premier message réel du contact avant de créer une requête à l'aide de cet appel :



cxone('chat', 'sendFirstMessageAutomatically', false);

Activer le mode jeu

Permet aux contacts de jouer au jeu Snake pendant qu'ils attendent un agent.



cxone('chat', 'allowGameMode');

Sondage de satisfaction automatisé

Un sondage de satisfaction peut être automatiquement détecté et affiché dans une fenêtre contextuelle. Cela permet de le détecter et de l’afficher ou non.



cxone('chat', 'automatedSatisfactionSurveyModal', 'true');

cxone('chat', 'automatedSatisfactionSurveyModal', 'false');

//if not defined, the default is 'true'

Informations sur le clavardage JavaScript appels

Ces appels vous permettent de personnaliser les informations disponibles pour les contacts lors d'une session de clavardage.

Obtenir l'ID d'identité du Client

Renvoie l'identifiant unique du client dans le clavardage.



cxone('chat', 'getCustomerIdentityId');

Masquer le formulaire de Sondage pré-contact

Le formulaire de sondage pré-contact apparaît au début d'une session de messagerie de clavardage Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Il recueille des informations sur le contact, telles que son nom. Si vous le souhaitez, vous pouvez masquer le formulaire de sondage pré-contact et faire apparaître la fenêtre de clavardage dès qu'un contact démarre une session de messagerie de clavardage.



cxone('chat', 'hidePreSurvey');

Masquer le nombre de contacts en attente

Le compteur de file d’attente indique à un contact combien de temps un agent peut l’aider en fonction du nombre de personnes dans la file d’attente de l’agent. Vous pouvez masquer le compteur de file d'attente une fois que le contact a été acheminé avec succès vers un agent. Cela permet aux agents de supprimer des cartes client de leur boîte de réception sans que les contacts ne s’en aperçoivent.



cxone('chat', 'hideQueueCounterAfterAssignment');

cxone('chat', 'hideAssignedAgent');

cxone('chat', 'hideSystemMessages');

Muet – Notification sonore de clavardage

Permet de désactiver le son des notifications de clavardage. Le son des notifications de clavardage est activé par défaut. Ce paramètre doit être configuré indépendamment des autres paramètres sonores du clavardage. Vous pouvez remplacer la valeur par faux pour réactiver le son des notifications de clavardage.



cxone('chat', 'muteAudioNotification', 'true');

// OR

cxone('chat', 'muteAudioNotification');

Remplacer les traductions linguistiques du navigateur

Remplace les paramètres de langue du navigateur de l'utilisateur ou une locale personnalisée par une traduction définie. Par exemple, vous pouvez vous assurer qu'un certain texte s'affiche toujours en anglais, indépendamment des paramètres de langue du navigateur d'un contact.



cxone('guide', 'init', 'brandId', 123, 'locale');

Définir l'État de l'Activité

Modifie le message dans la barre d'activité. Par exemple, vous pourriez l'utiliser pour communiquer votre temps de réponse pour une session de messagerie de clavardage. Cela peut être utile car la messagerie de clavardage est une forme de clavardage asynchrone, de sorte que les contacts peuvent devoir attendre d'avoir des nouvelles d'un agent.



cxone('chat', 'setStatusMessage', 'We typically reply within 3 hours.');

Définir l'image de l'agent

Modifie dynamiquement l'image de l'agent affichée dans la fenêtre de clavardage. Par défaut, Digital Experience (DX) utilise l'image dans le profil de l'agent. Lorsque vous incluez cet appel dans votre script, il utilise l'image spécifiée par l'URL dans l'extrait de code (snippet). Remplacez l'exemple d'URL par l'URL de l'image que vous souhaitez que le clavardage utilise.



cxone('chat', 'setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');

Définir l'ID du Client

Définit l'identifiant unique du client dans le clavardage.



cxone('chat', 'setCustomerId', 'customer_id');

Définir le nom du Client

Le Nom du client est un champ du formulaire de sondage pré-contact, que les contacts doivent remplir avant de clavarder avec un agent sur un canal de messagerie de clavardage Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Cet appel remplit dynamiquement le champ.



cxone('chat', 'setCustomerName', 'Elizabeth');

Définir le Format de dates

Peut être configuré pour utiliser le format de date absolu (12/03/2035) ou le format de date relatif (aujourd’hui, lundi).



cxone('chat', 'setDateFormat', 'date_format');

// date_format can be 'absolute' or 'relative'

Définir paramètres régionaux

Définit les paramètres régionaux pour les traductions dans la fenêtre de clavardage.



cxone('chat', 'setLocale', 'locale');

Afficher les Informations sur le cas

Uniquement pour les canaux de clavardage Messagerie Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Affiche les informations du dossier au contact.



cxone('chat', 'showCaseInfo');

Afficher/Masquer le bouton Envoyer la transcription

Si vous rendez visible le bouton Envoyer la transcription, vous devez configurer le canal de clavardage pour permettre aux contacts de s’envoyer la transcription du clavardage. Configurez cette option pour la messagerie de clavardage ou le clavardage en direct.



cxone('chat', 'hideSendTranscript');

cxone('chat', 'showSendTranscript');

Afficher/Masquer les messages Système

Affiche ou masque les messages système comme l'historique d'affectation des agents.



cxone('chat', 'chat','hideSystemMessages');

cxone('chat', 'showSystemMessages');

Conditions d'utilisation

Vous pouvez mettre un document de conditions d'utilisation à la disposition des contacts depuis la fenêtre de clavardage. Cette fonction ajoute un bouton à la fenêtre. Vous pouvez personnaliser l'étiquette et le style du bouton, ainsi que ce qui se passe lorsque les contacts cliquent dessus. L'action au clic peut afficher les conditions d'utilisation comme :

Une fenêtre interne
Un lien externe



// Internal Modal Window

cxone('chat', 'showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');



// External Link

cxone('chat', 'showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');



// If you want to explicitely disable this feature, you can use

cxone('chat', 'hideTermsOfUse');

Pour personnaliser l’apparence du bouton ou de la fenêtre interne, utilisez les appels de l’API CSS décrits sur cette page.

Champs personnalisés, Étiquettes et Phrases

Créer et Remplir des Champs personnalisés

Avant d’utiliser les Appels API de champ personnalisé ci-dessous, vous devez d’abord créer le champ personnalisé dans NiCE CXone. Créez le champ personnalisé pour un Customer Card ou un Contact, selon le type de champ personnalisé que vous souhaitez remplir via l’API.

La valeur ident que vous assignez au champ personnalisé lors de sa création est la même valeur que vous référencerez dans l’Appel API. Si le champ personnalisé n’existe pas dans la plateforme, l’Appel API n’aura aucun effet.

Pour obtenir des instructions étape par étape sur la création de champs personnalisés, consultez Gérer les Champs personnalisés.

Utilisez l’API JavaScript CXone Digital Chat pour capturer les données de votre Page Web et les stocker comme valeur de champ personnalisé. Cela vous permet de transmettre automatiquement des informations contextuelles, telles que la Page sur laquelle se trouve le visiteur, son id de compte, ou toute autre donnée pertinente directement dans NiCE CXone lorsqu’une interaction de clavardage commence.

Il existe deux méthodes API disponibles, selon l’endroit où vous souhaitez stocker les données du champ personnalisé :

setContactCustomField — Stocke la valeur du champ personnalisé sur le Contact, qui représente une seule interaction ou conversation. Utilisez cette méthode lorsque les données sont spécifiques à cette session de clavardage particulière. Par exemple, l’url de la page où le clavardage a été initié, un produit sélectionné ou un numéro de référence de formulaire.
Lorsque vous utilisez setCaseCustomField, il se peut que vous voyiez un avertissement d’obsolescence dans la console du navigateur suggérant d’utiliser setContactCustomField à la place.

setCustomerCustomField — Stocke la valeur du champ personnalisé sur le Customer Card, qui représente le profil du Client à travers toutes les interactions. Utilisez cette méthode lorsque les données sont liées au client lui-même. Par exemple, son identifiant de compte, son niveau d’adhésion ou sa langue préférée.

Vue d’ensemble de l’implémentation

Le tableau suivant résume les méthodes API disponibles pour définir les valeurs des champs personnalisés. Consultez les exemples de code détaillés sous le tableau pour obtenir des conseils d’implémentation.

Exemple	Méthode API	la description
Définir un seul champ personnalisé de Contact	`setContactCustomField`	Pour renseigner un champ de Cas à la fois.
Définir plusieurs champs personnalisés de Contact à la fois	`setContactCustomFields`	Mise à jour groupée efficace de plusieurs champs de Cas.
Définir un seul champ personnalisé de Customer Card	`setCustomerCustomField`	Pour les champs de profil Customer Card.
Définir plusieurs champs personnalisés Customer Card à la fois	`setCustomerCustomFields`	Mise à jour groupée de plusieurs champs Customer Card.
Exemple de valeur statique	`setContactCustomField`	Valeur codée en dur, par exemple `'Contact Us Page'`.
Exemple de valeur dynamique	`setContactCustomField`	Valeur dynamique, par exemple `window.location.href`.

Les valeurs des champs personnalisés peuvent être définies de deux façons :

Statique — La valeur est codée en dur directement dans l'Appel API. Cela est utile lorsque la valeur est toujours la même pour une page donnée, par exemple pour indiquer sur quelle page se trouve le widget de clavardage.

Pour définir la valeur d'un champ personnalisé contact unique

cxone('chat','setContactCustomField', 'pagesource', 'Contact Us Page');

Pour définir la valeur de plus qu'un champ personnalisé contact unique

cxone('chat','setContactCustomFields',

   {

   customFieldIdent: 'value',

   secondCustomFieldIdent: 'value'

   } 

   );

Pour définir la valeur d'un champ Customer Card unique

cxone('chat','setCustomerCustomField', 'email', 'leia@starwars.com');

Pour définir la valeur de plus qu'un champ Customer Card

cxone('chat','setCustomerCustomFields',

   {

   customFieldIdent: 'value',

   secondCustomFieldIdent: 'value'

   } 

   );

dynamique — La valeur est extraite de la page Web au moment de l'exécution à l'aide de JavaScript. Cela est utile lorsque la valeur varie selon le visiteur ou la session, par exemple pour capturer l'url de la page actuelle ou l'id d'un utilisateur connecté.
```
cxone('chat','setContactCustomField', 'currentPage', window.location.href);
```
Visualiser l’image

Si vous utilisez un formulaire de précontact pour recueillir des informations auprès des visiteurs avant le début du clavardage, vous n'avez pas besoin d'utiliser ces méthodes API pour capturer les mêmes données. Les champs du formulaire de précontact sont automatiquement sauvegardés dans le dossier et la Customer Card, tel que configuré.

Pour définir la valeur d'un champ personnalisé Customer Card :

cxone('chat','setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

Les champs personnalisés sont limités à 1024 caractères.

Ajoutez les Appels API du champ personnalisé au même bloc de script où le widget Guide est intégré dans votre page Web. Placez les Appels API juste au-dessus de la balise de fermeture </script>, après le code d'initialisation du widget. Par exemple :

<script>

   // CXone widget initialization code

   cxone('guide', 'init');

   // Add custom field API calls here

   cxone('chat', 'setCaseCustomField', 'pageSource', 'Contact Us Page');

   cxone('chat', 'setCustomerCustomField', 'accountTier', 'Premium');

   </script>

Pour obtenir des instructions détaillées sur l'intégration du widget et l'emplacement des appels de personnalisation, consultez Personnaliser Guide à l'aide de JavaScript.

Personnaliser les Étiquettes et les phrases de clavardage

Vous pouvez personnaliser plusieurs des étiquettes et des phrases utilisées par les canaux de clavardage numérique, ainsi que définir les personnalisations. Si vous devez modifier dynamiquement les phrases ou les étiquettes à l'écran, utilisez ces appels JavaScript.

Pour modifier un seul message ou étiquette :



cxone('chat', 'setTranslation', 'key', 'your translation');

Pour modifier plusieurs messages ou étiquettes :



cxone('chat', 'setTranslations', {

   key1: 'your custom label',

   key2: 'your custom message'

});

Cliquez pour visualiser les messages et les étiquettes que vous pouvez personnaliser.

Les accolades indiquent des variables que le système remplace par des données réelles. Par exemple, {caseNumber} est remplacé par le numéro de dossier de la session de clavardage du contact.

Clé	Étiquette/message par défaut
allAgentsForQueueAreBusy	Tous nos agents dédiés à votre file d'attente sont actuellement occupés. Il {queue, plural, one {y a} other {y a}} <strong>{queue, number}</strong> {queue, plural, one {personne} other {personnes}} devant vous dans la file d'attente.
beginButton	Commencez à clavarder !
cancel	Annuler
caseNumber	Cas #{caseNumber}
change	Changer
chattedWith	Vous venez de clavarder avec
CommonErrorText	Une erreur inattendue s'est produite. Veuillez réessayer ultérieurement.
Terminé	Terminé
dragAndDropDropzone	Faites glisser et déposez des fichiers ici pour les envoyer
dragAndDropDropzoneRejected	Impossible de téléverser le fichier :(
EmailLabel	Courriel
endChat	Mettre fin au clavardage
endChatTitle	Êtes-vous sûr de vouloir mettre fin à cette conversation ?
endGame	Fin du jeu
fin	Fin de la clavardage...
fileSendingFailed	L'envoi du fichier a échoué
getTranscriptDescription	Envoyez la transcription de cette conversation à l'adresse courriel suivante :
getTranscriptLink	Obtenir la transcription du clavardage
invalidToken	Jeton invalide
ipAddressBlocked	L'adresse IP est bloquée
Chargement en cours	Chargement ...
loadPreviousButton	Charger les conversations précédentes
messageLabel	Message
networkErrorText	Il y a eu une erreur de réseau. Veuillez réessayer.
newCase	Nouveau cas
noAgentOnlineForQueue	Aucun agent n'est disponible pour votre file d'attente pour le moment.
Hors ligne	Hors ligne
offlineFormDesc	Nous ne sommes pas disponibles pour le moment
offlineFormSuccessMsgHead	Merci!
offlineFormSuccessMsgSub	Votre courriel a été envoyé avec succès. Nous vous répondrons bientôt.
en ligne	En ligne
onlineFormText	Pour démarrer un clavardage, veuillez nous indiquer votre nom. Un de nos agents commencera à vous aider immédiatement.
pleaseSelect	Veuillez sélectionner...
poweredBy	Alimenté par
preparingSession	Séance de préparation...
replyBoxPlaceholder	Écrivez ici, appuyez sur <entrée> pour envoyer
Réessayez	Réessayer
sendFileTextSize	Veuillez téléverser des fichiers plus petits que {filesize}
sendFileTextSupportedFormat	formats pris en charge.
sendFileTextSupportedFormatDesc	Images, vidéos, {fileFormats}
sendMessageButton	Envoyer le message
sendNewEmail	Envoyer un nouveau courriel
sendTranscript	Envoyer la transcription
snakeWaiting	Vous êtes {queue} dans la file d'attente.
startChatInPopup	Demandez nous!
startNewChat	Démarrer un nouveau clavardage
statusReconnecting	Essayant de se connecter…
surveySuccesfullySent	Merci pour vos commentaires !
systemChattingWith	Vous discutez maintenant avec {name}
sujet	Sujet
transciptSentFailed	Échec de l'envoi.
transciptSuccesfullySent	Transcription envoyée avec succès !
tryAgainButton	Réessayez de nouveau
unexpectedError	Erreur inattendue.
validationInvalidEmail	L'adresse courriel n'est pas valide
validationMandatory	Ce champ est obligatoire
validationShorterName	Veuillez utiliser un nom plus court
validationShortMessage	Votre message est trop court
En attente	Attendre...
waitingDescription	Un de nos agents vous parlera sous peu.
waitingFooter	Appuyez sur <barre d'espacement> pour raccourcir l'attente.
waitingForAgent	En attente de l'agent...
waitingInQueue	En attente d'agent. Vous êtes {queue} en file d'attente.
yourNameLabel	Votre nom

Traduire les Champs personnalisés

Vous pouvez traduire les champs personnalisés affichés dans la fenêtre de clavardage.



cxone('chat', 'chat', 'setCustomTranslations', {

    myCustomFieldATranslationKey: "Custom field value A",

    myCustomFieldBTranslationKey: "Custom field value B",

});

Apparence de la fenêtre de clavardage – Appels

Vous pouvez modifier l'apparence de la fenêtre de clavardage.

Icône Fermer le clavardage

Lorsque cette option est vraie, une icône X est affichée sur la fenêtre au lieu de l’option Terminer le clavardage dans le menu des paramètres.



cxone('chat', 'enableCloseIcon', true);

Masquer l'Agent assigné



cxone('chat', 'hideAssignedAgent');

Masquer l'en-tête



cxone('chat', 'hideHeader');

Masquer les fenêtres contextuelles



cxone('chat', 'hidePopups');

Afficher l'avatar du Client



cxone('chat', 'showCustomerAvatar');

Afficher le bouton d'envoi



cxone('chat', 'chat','showSendButton');

Taille

Personnalise la largeur et la hauteur de la fenêtre de clavardage. Vous pouvez utiliser des unités absolues ou relatives prises en charge par la spécification CSS.



cxone('chat', 'setWindowWidth', '100%');

cxone('chat', 'setWindowHeight', '100%');

Mode d'affichage complet



cxone('chat', 'setFullDisplay');

// OR

cxone('chat', 'chat','setWindowWidth', '100%');

cxone('chat', 'chat','setWindowHeight', '100%');

Position et Décalage

L'appel setPositionX définit le côté gauche ou droit de l'écran comme position de départ. Les appels setOffsetX et setOffsetY définissent respectivement le nombre de pixels de décalage horizontal et vertical de la fenêtre de clavardage par rapport au point de départ.



// set horizontal starting position

cxone('chat', 'setPositionX', 'right');

													

// set horizontal and vertical offset

cxone('chat', 'setOffsetX', '40'); // default = 20

cxone('chat', 'setOffsetY', '40'); // default = 20

Définir la limite de caractères pour la boîte de réponse



cxone('chat', 'setReplyBoxLimit', '280'); // default = null

CSS personnalisé avec sélecteurs de données

Vous pouvez personnaliser l’apparence de la fenêtre de clavardage en ajoutant vos propres feuilles de style CSS. Précisez la partie de la fenêtre de clavardage que vous souhaitez styliser avec un attribut data-selector. La liste déroulante ci-dessous contient une liste de tous les composantes que vous pouvez sélectionner avec l’attribut data-selector. Les sélecteurs de données vous permettent de Préciser la partie de la fenêtre de clavardage à laquelle vous souhaitez appliquer le CSS personnalisé. Après data-selector, ajoutez votre style à l’intérieur d’accolades. Si vous souhaitez styliser plusieurs éléments, vous devez ajouter tout votre CSS en un seul appel JavaScript. Si vous utilisez le même appel JavaScript plusieurs fois, le dernier appel JavaScript remplacera tout le CSS précédent. Vous pouvez également personnaliser le CSS pour le clavardage directement dans NiCE CXone.

Pour ajouter du CSS personnalisé avec des sélecteurs de données, utilisez cet appel JavaScript comme référence :

cxone('chat', 'setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important} 

[data-selector="CONTENT"] {background: green !important}`);

Appliquez des composantes CSS personnalisées à l'aide de l'attribut data-selector uniquement. Ne l’appliquez pas aux sélecteurs de classe ou à d’autres parties du code JavaScript, comme dans cet exemple :

.Widget__Widget___1qQCf { background: red; }

Les composants de fenêtre peuvent être constitués de plusieurs blocs imbriqués. Les sélecteurs de composants répertoriés dans cette section nomment la racine de chaque composant. Si vous souhaitez appliquer le CSS à l'un des blocs imbriqués d'un composant, utilisez la console du développeur pour inspecter le composant afin de pouvoir sélectionner le bloc approprié.

Actions proactives

Les appels de cette section vous permettent d'engager de manière proactive les clients dans un clavardage en fonction de leur comportement.

Exécuter le déclencheur

Démarre le déclencheur d'automatisation du flux de travail défini par le trigger_id.



cxone('chat', 'executeTrigger', 'trigger_id');

Définir l’Événement du visiteur

Enregistre le comportement client défini (l’événement) à des fins de création de rapports. Lorsque cet appel est utilisé avec Mobile SDK, event_type est remplacé par custom_event_type.



cxone('chat', 'setVisitorEvent', 'event_type', 'custom_event_data');

Définir la variable du visiteur

Stocke les informations du client défini à des fins de création de rapports.



cxone('chat', 'setVisitorVariable', 'variable_identifier', 'variable_value');

Stocker Conversion

Stocke le comportement du client en tant que conversion à des fins de création de rapports.



cxone('chat', 'storeConversion', 'conversion_type', 'conversion_value', 'conversion_date'); 

// conversion_date is optional, default is now

Balises pour les visiteurs du site Web

Le contenu de cette section concerne un produit ou une fonctionnalité qui fait partie d'un programme de Public Preview. Si vous ne faites pas partie de cet aperçu et souhaitez obtenir plus d'informations, communiquez avec votre représentant de compte.

Vous pouvez marquer les contacts qui ont certains comportements sur votre site Web. Cette fonctionnalité utilise des balises de Digital Experience (DX) et nécessite Guide.

Pour ajouter une balise à un contact :



cxone('chat', 'assignTag', 'tagID');

Pour supprimer une balise d’un contact :



cxone('chat', 'removeTag', 'tagID');

Intégrer avec des Applications de Troisième partie

Les appels de cette section vous permettent de recevoir des notifications push lorsque certains événements de chat se produisent.

Reconnaître les discussions actives dans la fenêtre de discussion



cxone('chat', 'getOngoingThreads');

Reconnaître le contact en cours dans la fenêtre de chat



cxone('chat', 'getOngoingContact')

Recevoir une notification push pour des Événements de chat spécifiques

Pour recevoir une notification pour un événement de chat :



cxone('chat', 'onPushUpdate', 'event', callback);

Pour recevoir une notification pour plusieurs événements de chat :



cxone('chat', 'onPushUpdate', ['event', 'event', 'event'], callback);

Pour recevoir une notification pour tous les événements de chat :



cxone('chat', 'onAnyPushUpdate', callback);

intégration aux Applications Android ou iOS

Vous pouvez intégrer le clavardage numérique dans des applications Android ou iOS. L’application native doit utiliser WebView où le code d’initialisation JavaScript est ajouté. Cet exemple de code utilise le JavaScript de cette page pour modifier l'apparence et le comportement de la fonction de clavardage :



<script async type=”text/javascript”>

  (function(i,s,o,r,g,v,a,m){g=v?g+'?v='+v:g;i['BrandEmbassy']=r;

    i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};i[r].l=+new Date();

    a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;

    a.src=g+'?'+Math.round(Date.now()/1000/3600);m.parentNode.insertBefore(a,m)

  })(window,document,'script','brandembassy','https://livechat-static.brandembassy.com/3/chat.js');



  //init of Livechat

  cxone('chat', ‘init’, BRAND_HASH);



  // hiding unwanted UI elements

  cxone('chat', 'hideHeader');

  cxone('chat', 'hidePopups');

 

  // stretching livechat to full width and height

  cxone('chat', 'setFullDisplay');



  // Customer's name

  cxone('chat', 'setCustomerName', 'CUSTOMER_NAME');



  // Other optional Custom Fields

  cxone('chat', 'setCustomField', 'CUSTOM_FIELD_IDENT', 'CUSTOM_FIELD_VALUE');

    

  // Start Chat

  cxone('chat', 'openChatWindow');

  cxone('chat', 'autoStartSession');



</script>