Personnaliser les canaux de chat en utilisant JavaScript

Vous pouvez personnaliser le live chat Les agents et les contacts interagissent en temps réel. et la chat messaging 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 leurs Appels API correspondants JavaScript. Vous devez inclure ces Appels API dans la balise de script qui ajoute le chat à 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 code 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 chat :

Comportement de chat : personnalisez la façon dont la fenêtre de discussion se comporte. Cela inclut l'ouverture et la fermeture de la fenêtre de discussion ou l'activation du mode jeu. Le mode jeu permet aux clients de jouer au jeu Snake pendant leur attente d'un Agent.
Informations de chat : Personnalisez les informations affichées dans la fenêtre de chat. Celles-ci comprennent des éléments tels que le nom du client, l'image de l'Agent ou le statut d'activité.
Champs, libellés et phrases personnalisés : définissez les champs personnalisés ou personnalisez les étiquettes de champ. Vous pouvez également configurer texte alternatif pour les messages automatisés affichés aux contacts.
Apparence de la fenêtre de chat : personnalisez l'aspect de la fenêtre de chat.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 code CSS personnalisé pour la fenêtre de discussion.
Actions proactives : personnalisez l'expérience grâce à des actions proactives créées à partir des comportements observés de l'utilisateur.
Other functions: Other things you can configure include:
- Que l'environnement hôte soit à l'écoute de certains événements.
- Intégration des canaux de clavardage numérique dans les applis 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 chat NiCE CXone sur votre site Web, tous ces appels prennent également en charge un nouveau chargeur NiCE CXone. À terme, toutes les API JavaScript pour le chat utiliseront le chargeur NiCE CXone au lieu de Brand Embassy.

La structure de l’appel JavaScript peut varier selon le chargeur utilisé. Vous ne pouvez pas afficher les deux structures en même temps. Utilisez Uniquement l’une ou l’autre selon le chargeur utilisé.

Si vous utilisez NiCE CXone Guide pour mettre en œuvre le chat 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 dans le cadre du chat numérique ou de Guide, structurez les appels de la façon suivante :

cxone('chat','enableChatAlwaysOnline');

Si vous utilisez Guide pour mettre en œuvre le chat, 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 en option) :

brandembassy('enableChatAlwaysOnline',true);

Ajouter des Appels JavaScript à un Canal de chat

Si vous ne l'avez pas encore fait, configurez un canal de live chat ou de chat messaging. 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 chat 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 d'API exactement comme indiqué. Tout changement inattendu pourrait entraîner un dysfonctionnement de votre chaîne.

Cliquez sur le sélecteur d'applications et sélectionnez ACD.
Accédez à Digital > Points de Contact Digital.
Dans la section Vos canaux, cliquez sur Script du site Web.
Copiez le code JavaScript de la page et collez-le dans un programme d'édition de texte tel que Notepad++. Veillez à inclure les balises d'ouverture et de fermeture <script>.
Dans Notepad++, juste au-dessus de la balise fermante </script> du code que vous avez collé, ajoutez les appels JavaScript que vous souhaitez utiliser. Dans l'illustration suivante, le commentaire indique où ajouter des appels. Les appels pris en charge que vous pouvez utiliser sont décrits dans le reste de cette page.
Copiez et collez l'intégralité du script, y compris les balises <script> d'ouverture et de fermeture, dans l'en-tête d'une page de votre site Web.
Ouvrez la page modifiée et envoyez des messages de chat de test pour vous assurer que vos personnalisations fonctionnent comme prévu.
Une fois qu'elles ont été testées et fonctionnent comme prévu, copiez le script final dans l'en-tête de chaque page devant comporter le widget de chat.

Comportement du Chat JavaScript Appels

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

Ouvrir la fenêtre de Conversation

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


cxone('chat', 'openChatWindow');

Fermer la fenêtre de conversation

Ferme la fenêtre de chat automatiquement. Le comportement par défaut est que les fenêtres de chat se ferment lorsqu'un contact clique sur l'icône de chat.


cxone('chat', 'hideChatWindow');

Chat toujours En ligne

Affiche la fenêtre de chat comme si des agents étaient disponibles, y compris lorsqu'aucun agent n'est en ligne.


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

Persistance des Champs personnalisés du chat précédent

Vous pouvez choisir si les champs personnalisés doivent être persistants ou supprimés définitivement du stockage local une fois l’interaction en cours. Cela permet de sélectionner les champs personnalisés qui continuent à s’afficher lors de chaque interaction avec un contact. Le 'field_id' fait référence à la valeur du Ident champ lorsque créer un champ personnalisé.

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

Envoi de données postback à partir de Adaptive Card

Studio actions et bots peuvent envoyer des Adaptive Card aux contacts par chat. Pour que le chat numérique envoie des données postback à Studio ou un robot, vous devez activer un gestionnaire. Un gestionnaire de Adaptive Card fonctionne dans le robot ou l’action Studio pour gérer les engagements avec Adaptive Cards et y répondre. Le gestionnaire est activé lorsqu’un utilisateur interagit avec des composants sur une Adaptive Card, notamment en cas de clic sur un bouton ou de sélection d’une option dans un menu déroulant. Le gestionnaire déchiffre l’entrée de l’utilisateur et détermine la réponse la mieux adaptée ou l’action à exécuter. Ajoutez la commande de gestionnaire par défaut et envoyez la commande de message, de sorte que Studio ou les robots puissent répondre en conséquence ou stocker les données de la Adaptive Card en prévision des rapports. Vous pouvez également remplacer le gestionnaire par défaut par une commande de gestionnaire personnalisé.

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 la commande du gestionnaire par défaut de Adaptive Card :


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

Commande envoyer le message :


 sendMessage(messageContent: MessageContent)

Créer une commande de gestionnaire personnalisé :


{
	"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. Elle vous permet de laisser une application interagir avec une autre en votre nom sans exposer de mots DE passe. Doit être appelé avant l'initialisation du chat.


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 session de messagerie instantanée Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse. ou de chat 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 cas et l'ajoute à la file d'attente lorsque le premier message de la session de chat est envoyé. Un message masqué et automatisé est envoyé au nom du client lorsque la session de chat 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 chat démarrent lorsqu'un contact clique sur l'icône de chat pour commencer une conversation ou lorsque la fenêtre de chat s'ouvre pour les sessions de chat démarrées automatiquement. Bien que le message initial soit caché au client, l'agent peut le voir.

Vous pouvez personnaliser le texte du message initial masqué.

Le démarrage automatique d'une session de chat ignore le formulaire d'enquête avant 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 le carte client. Vous pouvez également configurer l'authentification client à l'aide d'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é dans Digital Experience (DX). Pour les sessions de chat en direct, si aucun agent n'est disponible, la fenêtre de chat affiche un message En attente d'un agent disponible.

Pour démarrer automatiquement une session de chat, 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');

Activation de sessions de chat concurrentes

Vous pouvez autoriser les contacts à ouvrir plusieurs sessions de chat 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 chat dans un nouvel onglet ou une nouvelle fenêtre de navigateur.

Préciser comment les données de chat sont stockées en utilisant 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 chat 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 de chat sont identiques dans 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 : Les sessionId et customerId sont uniquement utilisés dans la mémoire de l'application de chat. Les données ne sont pas conservées dans le navigateur. L'actualisation du navigateur supprime tout l'historique. Cela permet d'avoir multiple sessions de chat simultanées lorsqu'elles sont ouvertes dans plusieurs onglets de navigateur ou plusieurs fenêtres de navigateur.

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

Si vous utilisez storageType: 'local' et que vous souhaitez malgré tout éliminer l’historique de conversation, vous pouvez créer un écouteur d’événement qui supprime customerId après la fin du chat.


cxone('chat', 
	'init',
	'MY_BRAND_ID_123',
	'MY_CHANNEL_ID_321',
	undefined,
	{
		storageType: 'session',
	},
);

Éliminer l'historique des conversations

Supprime l'historique de la conversation à la fin d'une session de chat. Cela peut être utile si vous utilisez l’option par défaut de stockage du chat, à savoir le stockage local. Cette option de stockage conserve les données après la fermeture des instances du navigateur. Dans ce cas, vous pouvez supprimer spécifiquement l'historique des conversations en effaçant le customerID du stockage local. L'exemple suivant crée un écouteur d'événement pour écouter l'événement caseStatusChanged issu du chat. Il indique que la session de chat est terminée. Par la suite, la commande removeItem est appelée, 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 figurant sur le 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 de 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);

Délai de 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 en attendant un Agent.


cxone('chat', 'allowGameMode');

Sondage de satisfaction automatisé

Une enquête de satisfaction peut être automatiquement détectée et affichée dans une fenêtre contextuelle. Cela permet de contrôler l'automatisation des enquêtes de satisfaction.


cxone('chat', 'automatedSatisfactionSurveyModal', 'true');
cxone('chat', 'automatedSatisfactionSurveyModal', 'false');
//if not defined, the default is 'true'

Informations de Chat JavaScript Appels

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

Obtenir l'ID d'identité du Client

Renvoie l'identificateur unique du client dans le chat.


cxone('chat', 'getCustomerIdentityId');

Masquer le formulaire de Sondage précontact

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


cxone('chat', 'hidePreSurvey');

Masquer le Nombre de contacts en attente

Le nombre de contacts en attente permet à un contact de savoir dans combien de temps un Agent pourra l'aider, en fonction de sa position dans la file d'attente de l'Agent. Vous pouvez masquer le compteur de file d'attente dès que le contact a été transféré à un agent. Cela permet aux agents de supprimer des cartes clients de leur boîte de réception sans que les contacts s'en aperçoivent.


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

Muet pour l'audio des notifications de chat

Permet de désactiver le son de Notification de chat. Le son de Notification de chat est activé par défaut. Ce paramètre doit être configuré indépendamment des autres paramètres de son du chat. Vous pouvez modifier la valeur à 'false' pour réactiver le son de Notification de chat.


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

Ignorer les traductions de la Langue du navigateur

Remplace les paramètres de langue du navigateur de l'utilisateur ou un locale personnalisé 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 pouvez l'utiliser pour communiquer votre temps de réponse pour une session de messagerie instantanée.Cela peut être utile car la messagerie instantanée est une forme de discussion 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 discussion. Par défaut, Digital Experience (DX) utilise l'image présente 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. Remplacez l'exemple d'URL par l'URL de l'image que vous souhaitez que le chat utilise.


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

Définir l'Id client

Définit un identificateur unique pour le client participant au chat.


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

Définir le Nom du client

Nom du client est un champ du formulaire de sondage préalable au contact, que les contacts doivent remplir avant de discuter avec un Agent sur un canal de messagerie de chat 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 date

Peut être défini de façon à utiliser un format de date absolue (03/12/2035) ou relatif (aujourd'hui, Lundi).


cxone('chat', 'setDateFormat', 'date_format');
// date_format can be 'absolute' or 'relative'

Définir les paramètres régionaux

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


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

Afficher les Informations sur le cas

Uniquement pour les canaux de chat messaging Clavardage asynchrone dans lequel les contacts envoient un message clavardage à tout moment et attendent une réponse.. Affiche les informations sur le cas au contact.


cxone('chat', 'showCaseInfo');

Afficher/Masquer le bouton Envoyer la transcription

Si vous rendez le bouton Envoyer transcription visible, vous devez configurer le canal de chat pour permettre aux contacts de s'envoyer la transcription du chat à eux-mêmes.Configurez cette option pour la messagerie instantanée ou le chat en direct.


cxone('chat', 'hideSendTranscript');
cxone('chat', 'showSendTranscript');

Afficher/Masquer les messages Système

Affiche ou masque les messages système, tels que l'historique d'affectation d'un agent.


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 discussion. 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'aspect du bouton ou de la fenêtre interne, utilisez les appels d'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 attribuez 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 Chat CXone Digital pour capturer des données depuis votre page Web et les stocker en tant que 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 chat commence.

Il existe deux méthodes API disponibles, en fonction de l'emplacement où vous souhaitez stocker les données du champ personnalisé :

setContactCustomField — Stocke la valeur du champ personnalisé sur le Contact, qui représente une interaction ou une conversation unique. Utilisez cette option lorsque les données sont spécifiques à cette session de clavardage particulière. Par exemple, l'URL de la page à partir de laquelle le chat a été lancé, un produit sélectionné ou un numéro de référence de formulaire.
Lorsque vous utilisez setCaseCustomField, il est possible que vous voyiez un avertissement de dépréciation dans la console du navigateur vous suggérant d'utiliser setContactCustomField à la place.

setCustomerCustomField — Stocke la valeur du champ personnalisé sur Customer Card, qui représente le profil du contact dans toutes les interactions. Utilisez cette fonction lorsque les données sont liées au client lui-même. Par exemple, son ID 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 de champ personnalisé. Reportez-vous aux exemples de code détaillés sous le tableau pour obtenir des conseils sur l'implémentation.

example	Méthode API	description
Définir un champ personnalisé contact unique	`setContactCustomField`	Pour renseigner un champ Cas à la fois.
Définir plusieurs champs personnalisés de contact à la fois	`setContactCustomFields`	Mise à jour en masse efficace de plusieurs champs de cas.
Définir un seul champ personnalisé 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 statique à évaluer	`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 de champ personnalisé peuvent être définies de deux manières :

Statistique — 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, comme pour indiquer sur quelle page se trouve le widget de chat.

Pour définir la valeur du champ personnalisé du contact unique

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

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

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 que 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);
```
Voir l'image

Si vous utilisez un formulaire précontact pour recueillir des informations auprès des visiteurs avant le début du chat, il n'est pas nécessaire d'utiliser ces méthodes API pour capturer les mêmes données. Les champs du formulaire précontact sont automatiquement sauvegardés dans le dossier et dans la fiche client selon la configuration.

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

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 script où le Guide widget est intégré sur 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 sur l'emplacement où placer les appels de personnalisation, voir Personnaliser Guide à l'aide de JavaScript.

Personnaliser les Étiquettes et les Phrases du Chat

Vous pouvez personnaliser de nombreux libellés et phrases que les canaux chat numériques utilisent, ainsi que définir les personnalisations. Si vous devez modifier dynamiquement les phrases ou les libellés d'écran, utilisez les appels JavaScript suivants.

Pour modifier un seul message ou libellé :


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

Pour modifier plusieurs messages ou libellés :


cxone('chat', 'setTranslations', {
   key1: 'your custom label',
   key2: 'your custom message'
});

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

Les accolades entourent 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.
commencerBouton	Commencez le chat !
Annuler	Annuler
numéro de dossier	Cas #{caseNumber}
Monnaie	Modifier
bavardé avec	Vous venez de discuter avec
CommonErrorText	Une erreur inattendue s'est produite. Veuillez réessayer ultérieurement.
Terminé	Terminé
dragAndDropDropzone	Faire glisser & abandonner les fichiers ici, pour les envoyer
dragAndDropDropzoneRejeté	Impossible de télécharger le fichier :(
E-mailLibellé	Courriel
finChat	Quitter la conversation
finChatTitre	Êtes-vous sûr de vouloir mettre fin à cette conversation ?
fin du jeu	Fin du jeu
fin	Fin de la discussion...
Échec de l'envoi du fichier	L'envoi du fichier a échoué
getTranscriptDescription	Envoyez la transcription de cette conversation à l'adresse e-mail suivante :
getTranscriptLink	Obtenir la transcription du clavardage
jeton invalide	Jeton invalide
ipAdresseBloqué	L'adresse IP est bloquée
Chargement en cours	Chargement en cours...
loadPrécédentBouton	Charger les conversations précédentes
messageLibellé	Message
networkErrorText	Une erreur réseau s'est produite. réessayez.
nouveau cas	Nouveau cas
noAgentOnlineForQueue	Aucun agent n'est disponible pour votre file d'attente pour le moment.
Hors ligne	Hors ligne
offlineFormDesc	Me n'est pas disponible pour le moment
offlineFormSuccessMsgHead	Merci!
offlineFormSuccessMsgSub	Votre e-mail a bien été envoyé. Nous vous répondrons prochainement.
En ligne	En ligne
en ligneFormulaireTexte	Pour démarrer une discussion, veuillez nous indiquer votre nom. Un de nos agents commencera à vous aider immédiatement.
Veuillez sélectionner	Veuillez sélectionner...
Alimenté par	Alimenté par
préparationSession	Séance de préparation...
replyBoxPlaceholder	Écrivez ici, appuyez sur <entrée> pour envoyer
Réessayez	Nouvelle tentative
envoyerTailleTexteFichier	Veuillez télécharger des fichiers plus petits que {filesize}
sendFileTextFormat pris en charge	formats pris en charge.
sendFileTextSupportedFormatDesc	Images, vidéos, {fileFormats}
sendMessageButton	Envoyer le message
envoyerNouveauEmail	Envoyer un nouvel e-mail
envoyer la transcription	Envoyer la transcription
serpentEn attente	Vous êtes {queue} en file d’attente.
startChatInPopup	Demandez nous!
startNewChat	Démarrer une nouvelle conversation
statutReconnexion	Essayant de se connecter...
sondageEnvoyé avec succès	Merci pour vos commentaires !
systèmeDiscuterAvec	Vous discutez maintenant avec {name}
Sujet	Sujet
TransciperEnvoyéÉchec	Echec de l'envoi.
transciperEnvoyé avec succès	Transcription envoyée avec succès !
TryAgainBouton	Réessayez
Erreur inattendue	Erreur inattendue.
validationInvalidEmail	L'adresse courriel n'est pas valide.
validationObligatoire	Ce champ est obligatoire
validationNom plus court	Veuillez utiliser un nom plus court
validationShortMessage	Votre message est trop court
En attente	En attente...
en attenteDescription	Un de nos agents vous parlera sous peu.
en attentePied de page	Appuyez sur <spacebar> pour réduire le temps en attente.
waitingForAgent	En attente de l'agent...
En attente dans la file d'attente	En attente de l'agent. Vous êtes {queue} en file d’attente.
votreÉtiquetteNom	Votre nom

Traduire les Champs personnalisés

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


cxone('chat', 'chat', 'setCustomTranslations', {
    myCustomFieldATranslationKey: "Custom field value A",
    myCustomFieldBTranslationKey: "Custom field value B",
});

Appels d'apparence de la fenêtre de chat

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

Icône Fermer le chat

Lorsque cette valeur est définie sur vrai, une icône X s’affiche sur la fenêtre à la place de l’option Quitter la conversation 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 pop-ups


cxone('chat', 'hidePopups');

Afficher l'avatar du Client


cxone('chat', 'showCustomerAvatar');

Afficher le bouton Envoyer


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

Taille

Personnalise la largeur et la hauteur de la fenêtre de discussion. 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 plein écran


cxone('chat', 'setFullDisplay');
// OR
cxone('chat', 'chat','setWindowWidth', '100%');
cxone('chat', 'chat','setWindowHeight', '100%');

Position et Décalage

Le setPositionX appel définit le côté gauche ou droit de l'écran comme position de départ. Les appels setOffsetX et setOffsetY définissent le nombre de pixels dont la fenêtre de chat est décalée horizontalement et verticalement par rapport au point de départ, respectivement.


// 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 chat en ajoutant votre propre CSS. Précisez la partie de la fenêtre de chat que vous souhaitez styliser avec un attribut data-selector. Le menu déroulant ci-dessous contient une liste de tous les composants que vous pouvez sélectionner avec l'attribut data-selector. Les sélecteurs de données vous permettent de spécifier la partie de la fenêtre de discussion à laquelle vous souhaitez appliquer le CSS personnalisé. Après le data-selector, ajoutez votre style entre accolades. Si vous souhaitez appliquer un style à plusieurs éléments, vous devez ajouter tous vos calques CSS dans un seul appel JavaScript. Si vous utilisez le même appel JavaScript plusieurs fois, le dernier appel JavaScript remplace tous les calques CSS précédents. Vous pouvez également personnaliser le CSS pour le chat directement dans NiCE CXone.

Pour ajouter du code 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 les composants CSS personnalisés en utilisant uniquement l'attribut data-selector. Ne l’appliquez pas aux sélecteurs de classes 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 de contacter les clients par chat en fonction de leur comportement.

Exécuter le Déclencheur

Démarre le déclencheur Workflow Automation défini par le trigger_id.


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

Définir un Événement propre au visiteur

Stocke le comportement utilisateur défini (l’événement) pour la génération de rapports. Lorsque cet appel est utilisé avec le Mobile SDK, event_type est remplacé par custom_event_type.


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

Définir la Variable Visiteur

Stocke les informations définies par l'utilisateur pour la génération de rapports.


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

Stocker les conversions

Stocke le comportement de l'utilisateur en tant que conversion pour la génération de rapports.


cxone('chat', 'storeConversion', 'conversion_type', 'conversion_value', 'conversion_date'); 
// conversion_date is optional, default is now

Balises Visiteur Web

Le contenu de cette section concerne un produit ou une fonctionnalité faisant partie d'un programme de version préliminaire publique. Si vous ne participez pas à cette version préliminaire et souhaitez obtenir davantage d'informations, contactez votre représentant commercial.

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

Pour ajouter une balise à un contact :


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

Pour supprimer une balise pour un contact.


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

Intégration avec les Applications 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 plus que un événement 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 avec Android ou Applications 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 les JavaScript de cette Page pour modifier l'apparence et le comportement de la fonction de chat :


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