Personnaliser les canaux de clavardage à l’aide de JavaScript
Vous pouvez personnaliser le clavardage en direct Les agents et les contacts interagissent en temps réel et la messagerie par clavardage Clavardage asynchrone dans lequel les contacts envoient un message de clavardage à tout moment et attendent une réponse avec JavaScript. 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.
The Jungle, une filiale de Classics, Inc., gère une boutique de cadeaux dans le cadre de son site Web. L’administrateur, Mowgli Kipling, a configuré les appels d’API suivants pour aider ses agents de clavardage à travailler avec les clients des boutiques de cadeaux :
- Les variables de visiteur personnalisées collectent des informations sur les couleurs des éléments que le contact consulte lorsqu’il se trouve sur les pages de la boutique de cadeaux. Ces informations sont ensuite disponibles pour l’agent lorsque le contact initie une conversation.
- Les événements de visiteurs personnalisés sont enregistrés pour chaque produit sur lequel un contact clique. Après cinq clics sur le produit et aucun clic sur le bouton Acheter, un message proactif contextuel « Vous avez du mal à vous décider? » propose au contact un clavardage.
Vous pouvez personnaliser les aspects suivants de vos canaux Un moyen pour les contacts d’interagir avec des agents ou des bots. Un canal peut être la voix, la messagerie électronique, le clavardage, les médias sociaux, etc. 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.
- Autres fonctions : Les autres éléments que vous pouvez configurer incluent :
- Faire en sorte que l’environnement hôte écoute certains événements.
- Intégrer les canaux de clavardage numériques 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 CXone autonome sur votre site Web, tous ces appels prennent également en charge un nouveau chargeur CXone. À terme, toutes les API JavaScript pour le clavardage utiliseront le chargeur CXone au lieu du chargeur Brand Embassy.
La structure de l’appel JavaScript est différente selon le chargeur que vous utilisez. Vous ne pouvez pas utiliser les deux structures en même temps. N’utilisez que l’une ou l’autre en fonction du chargeur que vous utilisez.
Si vous utilisez CXone Guide pour mettre en œuvre le clavardage sur votre site Web, utilisez le chargeur CXone. Tous les appels figurant sur cette page ne sont pas pris en charge par Guide, mais la documentation CXone Guide énumère tous les appels JavaScript pris en charge.
Si vous utilisez le chargeur 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 le chargeur Brand Embassy, structurez les appels comme suit :
brandembassy('enableChatAlwaysOnline');
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 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 à Numérique > Points d’accès numériques.
- 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++. Veillez à inclure les balises <script> d’ouverture et de fermeture.
-
Dans Bloc-Notes++, juste au-dessus de la balise </script> de fermeture du code que vous avez collé, ajoutez les appels JavaScript que vous souhaitez utiliser. Dans l’exemple d’image ci-dessous, 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.
-
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.
brandembassy('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.
brandembassy('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.
brandembassy('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 les champs personnalisés qui continueront d’apparaître dans toutes les interactions avec un contact. field_id fait référence à la valeur du champ Ident lors de la création d’un champ personnalisé.
cxone('chat','enablePrecontactSurveyFieldAutoFill'('field id');
Envoyer des données postback à partir de Carte adaptative
Les actions Studio et les robots peuvent envoyer des Carte adaptatives à des contacts via le clavardage. Pour que le clavardage numérique envoie des données postback à Studio ou à un robot, vous devez activer un gestionnaire. Un gestionnaire de Carte adaptative fonctionne au sein du robot ou de l’action Studio pour gérer les engagements avec les Carte adaptatives et y répondre. Le gestionnaire s’active lorsqu’un utilisateur interagit avec les composants d’une Carte adaptative, 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 la Carte adaptative à des fins de rapports. Vous pouvez également remplacer le gestionnaire par défaut par une commande de gestionnaire personnalisée.
<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('init', '1032');
cxone('chat', '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 Carte adaptative :
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": "John",
"lastName": "Doe",
"_messageText": "Submitted something for you"
}
}
{
...,
"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\"}}"
}
}
}
{
"thread": {
"idOnExternalPlatform": "788a67af-263d-48b1-b67e-eb75838c6509"
},
"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. Il vous permet de laisser une application interagir avec une autre en votre nom sans divulguer vos mots de passe. Il doit être appelé avant l’initialisation du clavardage.
brandembassy('setAuthorizationCode', 'authorization_code');
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 de 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 en cours. Utilisez cet appel sur les pages à faible trafic de votre site Web pour éviter de submerger vos agents de contacts.
Digital Experience crée un nouveau cas et l'ajoute à la file d'attente lorsque le premier message de la session de clavardage est envoyé. Un message masqué et automatisé 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é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 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 client à l’aide d’une intégration OAuth.
Le routage des cas démarrés automatiquement se produit en fonction des files d’attente de routage Le système utilise des files d’attente de routage pour déterminer les agents vers lesquels acheminer les cas. Votre administrateur système crée des files d’attente de routage afin que certains cas soient acheminés vers des agents ayant une expertise dans ce type de cas. configurées dans Digital Experience. 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é :
brandembassy('openChatWindow');
brandembassy('autoStartSession');
Si vous ajoutez des appels supplémentaires au script,autoStartSession doit toujours être le dernier appel dans le script. Par exemple :
// set customer name (as this is required field)
brandembassy('setCustomerName', 'Elizabeth');
// open chat window so user can start to chat
brandembassy('openChatWindow');
// and finally start the new chat session (without the pre-chat form)
brandembassy('autoStartSession');
Autoriser les sessions de clavardage simultanées
Vous pouvez permettre à vos contacts de démarrer plusieurs sessions de clavardage dans le même navigateur. Si le contact est en train de clavarder dans un onglet du navigateur, cela lui permet de commencer un deuxième clavardage dans un nouvel onglet ou une nouvelle fenêtre du navigateur.
Pour activer ce comportement, vous devez spécifier comment les données du clavardage sont stockées. Deux options sont possibles :
-
localStorage : 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 simultanément dans différents onglets, elles sont toutes considérées comme une seule et même interaction. La conversation et l’expérience du clavardage sont les mêmes pour tous les onglets.
-
sessionStorage : Les données sont stockées pour l’onglet ou la fenêtre en question, puis effacées à la fermeture de l’onglet ou de la fenêtre. L’utilisateur peut créer plusieurs sessions de clavardage dans différents onglets ou fenêtres. La session de clavardage dans chaque onglet est considérée comme une interaction unique.
Pour permettre des sessions de clavardage simultanées, ajoutez la clé storageType avec la valeur sessionStorage, comme indiqué dans l’exemple suivant.
Si vous utilisez l’option localStorage et que vous souhaitez toujours purger l’historique des conversations, vous pouvez créer un écouteur d’événements qui supprime la valeur customerID à la fin du clavardage.
brandembassy( 'init', 'MY_BRAND_ID_123', 'MY_CHANNEL_ID_321', undefined, { storageType: 'sessionStorage', }, );
Purger 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. Ensuite, la commande removeItem est appelée, ce qui supprime la valeur customerID du stockage local du navigateur.
brandembassy('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
Digital Experience crée un nouveau cas et l'ajoute à la file d'attente lorsque le premier message de la session de clavardage est envoyé. Un message masqué et automatisé 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émarrées automatiquement. Bien que le message initial soit caché au client, l'agent peut le voir.
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.
brandembassy('sendFirstMessageAutomatically', 'Hello');
brandembassy('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 :
brandembassy('hideFirstSentMessage', false);
Retarder la création de cas
Digital Experience crée un nouveau cas et l'ajoute à la file d'attente lorsque le premier message de la session de clavardage est envoyé. Un message masqué et automatisé 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émarrées automatiquement. Bien que le message initial soit caché au client, l'agent peut le voir.
Vous pouvez configurer Digital Experience pour attendre le premier message réel du contact avant de créer une requête à l’aide de cet appel :
brandembassy('sendFirstMessageAutomatically', false);
Activer le mode jeu
Permet aux contacts de jouer au jeu Snake en attendant un agent.
brandembassy('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.
brandembassy('automatedSatisfactionSurveyModal', 'true');
brandembassy('automatedSatisfactionSurveyModal', 'false');
//if not defined, the default is 'true'
Appels JavaScript d’informations sur le clavardage
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.
brandembassy('getCustomerIdentityId');
Masquer le formulaire de sondage de 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 de 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.
brandembassy('hidePreSurvey');
Masquer le nombre de contacts en attente
Le nombre de contacts en 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 nombre de contacts en 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.
brandembassy('hideQueueCounterAfterAssignment');
brandembassy('hideAssignedAgent');
brandembassy('hideSystemMessages');
Désactiver le son des notifications du 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.
brandembassy('muteAudioNotification', 'true');
// OR
brandembassy('muteAudioNotification');
Remplacer les traductions linguistiques du navigateur
Remplace les paramètres linguistiques du navigateur de l’utilisateur ou les paramètres régionaux personnalisés par une traduction définie. Par exemple, vous pouvez faire en sorte que certains textes apparaissent toujours en anglais, quels que soient les paramètres linguistiques du navigateur d’un contact.
brandembassy('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 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.
brandembassy('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 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.
brandembassy('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.
brandembassy('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 de clavardage à tout moment et attendent une réponse. Cet appel remplit dynamiquement le champ.
brandembassy('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).
brandembassy('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.
brandembassy('setLocale', 'locale');
Afficher les informations sur le cas
Uniquement pour les canaux de messagerie de clavardage Clavardage asynchrone dans lequel les contacts envoient un message de clavardage à tout moment et attendent une réponse. Affiche les informations sur le cas au contact.
brandembassy('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.
brandembassy('hideSendTranscript');
brandembassy('showSendTranscript');
Afficher/masquer les messages système
Affiche ou masque les messages système comme l’historique d’affectation des agents.
brandembassy('chat','hideSystemMessages');
brandembassy('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
brandembassy('showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');
// External Link
brandembassy('showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');
// If you want to explicitely disable this feature, you can use
brandembassy('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, étiquettes et expressions personnalisés
Créer et remplir des champs personnalisés
Les champs personnalisés que vous pouvez utiliser avec cet appel sont les mêmes que ceux que vous pouvez utiliser dans carte clients. Si vous utilisez ces appels avant d’ouvrir une fenêtre de clavardage, les champs du formulaire de pré-contact sont préremplis avec les données que vous incluez dans l’appel JavaScript.
Pour définir la valeur d’un champ personnalisé de cas :
brandembassy('setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');
Pour définir la valeur d’un champ personnalisé carte client :
brandembassy('setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');
Personnaliser les étiquettes et les phrases de clavardage
Vous pouvez personnaliser de nombreuses étiquettes et phrases utilisées par les canaux de clavardage numériques, ainsi que définir les personnalisations. Si vous devez modifier dynamiquement les phrases ou les étiquettes d’écran, utilisez ces appels JavaScript.
Pour modifier un seul message ou étiquette :
brandembassy('setTranslation', 'key', 'your translation');
Pour modifier plusieurs messages ou étiquettes :
brandembassy('setTranslations', {
key1: 'your custom label',
key2: 'your custom message'
});
Les accolades indiquent les variables que le système remplace par des données réelles. Par exemple, {caseNumber} est remplacé par le numéro de cas 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 y a {queue, plural, one {is} other {are}} <strong>{queue, number}</strong> {queue, plural, one {person} autre(s) {people}} dans vous dans la file. |
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 plus tard. |
terminé | Terminé |
dragAndDropDropzone | Faites glisser et déposez les fichiers ici, pour les envoyer |
dragAndDropDropzoneRejected | Impossible de téléverser le fichier :( |
EmailLabel | Courriel |
endChat | Terminer le clavardage |
endChatTitle | Voulez-vous vraiment 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 en cours... |
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 dès que possible. |
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 | Optimisé par |
preparingSession | Préparation de la séance... |
replyBoxPlaceholder | Écrivez ici, appuyez sur<enter> pour envoyer |
réessayer | 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 nouveau courriel |
sendTranscript | Envoyer la transcription |
snakeWaiting | Vous êtes {file d’attente} dans la file d’attente. |
startChatInPopup | Demandez nous! |
startNewChat | Démarrer une nouvelle conversation |
statusReconnecting | Essayant de se connecter... |
surveySuccesfullySent | Merci pour vos commentaires! |
systemChattingWith | Vous discutez maintenant avec {name} |
sujet | Sujet |
transciptSentFailed | L’envoi a échoué. |
transciptSuccesfullySent | Transcription envoyée avec succès! |
tryAgainButton | Réessayer |
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 |
attendre | Attendre... |
waitingDescription | Un de nos agents sera avec vous sous peu. |
waitingFooter | Appuyez sur <spacebar> pour raccourcir l’attente. |
waitingForAgent | En attente de l’agent... |
waitingInQueue | En attente d’agent. Vous êtes {file d’attente} dans la 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.
brandembassy('chat', 'setCustomTranslations', {
myCustomFieldATranslationKey: "Custom field value A",
myCustomFieldBTranslationKey: "Custom field value B",
});
Appels d’apparence de la fenêtre de clavardage
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.
brandembassy('enableCloseIcon', true);
Masquer l’agent affecté
brandembassy('hideAssignedAgent');
Masquer l’en-tête
brandembassy('hideHeader');
Masquer les fenêtres contextuelles
brandembassy('hidePopups');
Afficher l’avatar du client
brandembassy('showCustomerAvatar');
Afficher le bouton d’envoi
brandembassy('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.
brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');
Mode d’affichage complet
brandembassy('setFullDisplay');
// OR
brandembassy('chat','setWindowWidth', '100%');
brandembassy('chat','setWindowHeight', '100%');
Position et décalage
Le setPositionX définit le côté gauche ou droit de l’écran comme position de départ. Les appels setOffsetX et setOffsetY définissent de combien de pixels la fenêtre de clavardage est décalée horizontalement et verticalement par rapport au point de départ, respectivement.
// set horizontal starting position
brandembassy('setPositionX', 'right');
// set horizontal and vertical offset
brandembassy('setOffsetX', '40'); // default = 20
brandembassy('setOffsetY', '40'); // default = 20
Définir la limite de caractères pour la boîte de réponse
brandembassy('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. Spécifiez 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 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 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 toutes les feuilles de style CSS en un seul appel JavaScript. Si vous utilisez le même appel JavaScript plusieurs fois, le dernier appel JavaScript remplacera tous les appels CSS précédents. Vous pouvez également personnaliser la feuille CSS pour le clavardage directement dans CXone.
Pour ajouter des feuilles de style CSS personnalisées avec des sélecteurs de données, utilisez l’appel JavaScript comme référence :
brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important}
[data-selector="CONTENT"] {background: green !important}`);
- ACTIVITY_BAR
- AGENT_MESSAGE
- AGENT_MESSAGE_BUBBLE
- AVATAR
- CONTENT
- CUSTOMER_MESSAGE
- CUSTOMER_MESSAGE_BUBBLE
- DELIMITER
- DROPDOWN_MENU
- HEADER
- INPUT
- IS_TYPING
- MESSENGER
- POPUP
- PRECONTACT_SURVEY
- PRECONTACT_SURVEY_DESCRIPTION
- PRIMARY_BUTTON
- REPLY_BOX
- SECONDARY_BUTTON
- SEND_BUTTON
- TEXTAREA
- TEXT_BUTTON
- GADGET LOGICIEL
- WINDOW
Appliquez des composants CSS personnalisés à l’aide de l’attribut sélecteur de données (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; }
brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');
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.
brandembassy('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 CXone Mobile SDK, event_type est remplacé par custom_event_type.
brandembassy('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.
brandembassy('setVisitorVariable', 'variable_identifier', 'variable_value');
Stocker la conversation
Stocke le comportement du client en tant que conversion à des fins de création de rapports.
brandembassy('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é en version contrôlée (CR). Si vous ne faites pas partie du groupe CR et souhaitez plus d’informations, contactez votre Représentant de compte CXone.
Vous pouvez marquer les contacts qui ont certains comportements sur votre site Web. Cette fonctionnalité utilise les balises de Digital Experience et nécessite Guide.
Pour ajouter une balise à un contact :
brandembassy('assignTag', 'tagID');
Pour supprimer une balise d’un contact :
brandembassy('removeTag', 'tagID');
Intégration avec des applications tierces
Les appels de cette section vous permettent de recevoir des notifications push lorsque certains événements de clavardage se produisent.
Reconnaître les fils actifs dans la fenêtre de clavardage
brandembassy('getOngoingThreads');
Reconnaître le contact en cours dans la fenêtre de clavardage
brandembassy('getOngoingContact')
Recevoir une notification push pour des événements de clavardage spécifiques
Utilisez l’une des entrées suivantes pour remplacer "événement" dans les exemples ci-dessous.
-
CaseToRoutingQueueAssignmentChanged
-
PageViewCreated
-
MessageCreated
-
MessageDeliveredToUser
-
MessageDeliveredToEndUser
-
MessageSeenByUser
-
MessageSeenByEndUser
-
MessageReadChangedMessageReadChanged
-
MessageAddedIntoCaseMessageAddedIntoCase
-
CaseInboxAssigneeChanged
-
CaseCreated
-
CaseStatusChanged
-
SenderTypingStarted
-
SenderTypingEnded
-
MessageNoteCreated
-
ContactRecipientsChanged
Pour recevoir une notification pour un événement de clavardage :
brandembassy('onPushUpdate', 'event', callback);
Pour recevoir une notification pour plusieurs événements de clavardage :
brandembassy('onPushUpdate', ['event', 'event', 'event'], callback);
Pour recevoir une notification pour tous les événements de clavardage :
brandembassy('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’aspect 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
brandembassy(‘init’, BRAND_HASH);
// hiding unwanted UI elements
brandembassy('hideHeader');
brandembassy('hidePopups');
// stretching livechat to full width and height
brandembassy('setFullDisplay');
// Customer's name
brandembassy('setCustomerName', 'CUSTOMER_NAME');
// Other optional Custom Fields
brandembassy('setCustomField', 'CUSTOM_FIELD_IDENT', 'CUSTOM_FIELD_VALUE');
// Start Chat
brandembassy('openChatWindow');
brandembassy('autoStartSession');
</script>