Personnaliser les fenêtres contextuelles de chat proactif

Pop-ups personnalisables pour que Chat proactif offrent plus de flexibilité et d'options que les pop-ups basiques. Ces options contextuelles sont disponibles pour les canaux Le moyen utilisé par les contacts pour interagir avec les agents ou les robots. Le canal peut être vocal, e-mail, chat, réseaux sociaux, etc. Chat en direct Les agents et les contacts interagissent en temps réel et Messagerie de chat Chat asynchrone dans lequel les contacts envoient un message de chat à tout moment et attendent une réponse. Vous pouvez spécifier:

• Sur quelle page de votre site Web apparaît la fenêtre contextuelle.
• Lorsque la fenêtre contextuelle apparaît. Vous pouvez configurer certains événements qui déclenchent l'affichage d'une fenêtre contextuelle. Les événements peuvent inclure des éléments tels qu'un visiteur d'une page Web passant un certain temps sur une page ou ayant un certain nombre d'articles dans son panier.
• À quoi ressemble la fenêtre contextuelle. Il existe de nombreuses options pour personnaliser l'apparence des fenêtres contextuelles avancées, notamment la couleur du texte, la couleur de la bordure, les images de bordure et l'emplacement des fenêtres contextuelles.

Applications Tag Manager

Pour utiliser des pop-ups personnalisables, votre site Web doit avoir une application de gérant d'étiquette Un extrait de code placé dans le code HTML d'un site Web, qui est utilisé par les applications Tag Manager. C'est différent des balises de code HTML ou des balises dans les contextes de médias sociaux.. Les gestionnaires de balises sont des applications qui peuvent «surveiller» les visiteurs du site Web et déclencher une action en réponse. Dans le cas de Digital Experience, l'application de gestionnaire de balises déclenche une fenêtre contextuelle pour un visiteur.  Vous pouvez utiliser Google Tag Manager ou un autre gestionnaire de balises, tel que Tealium.

Dans le gestionnaire de balises, vous définissez les événements et les conditions dans lesquels vous souhaitez que les fenêtres contextuelles apparaissent aux visiteurs du site Web. Les conditions vous permettent d'être très précis sur le moment où la fenêtre contextuelle apparaît. Par exemple, si vous définissez l'événement comme le visiteur faisant défiler une page vers le bas, vous ne voudrez peut-être pas que la fenêtre contextuelle apparaisse à chaque visiteur qui défile sur la page. Vous souhaiterez peut-être que la fenêtre contextuelle n'apparaisse qu'aux visiteurs qui font défiler plus de la moitié de la page. Vous pouvez définir cela comme condition de l'événement de défilement de page.

Dans Digital Experience, créez un travail d'automatisation de flux de travail avec un déclencheur qui lie le travail à l'événement du gestionnaire de balises que vous avez défini. Le travail est l'endroit où vous pouvez personnaliser l'apparence de la fenêtre contextuelle.

Voici ce qui se passe lorsqu'un internaute se trouve sur une page Web pour laquelle vous avez associé une fenêtre contextuelle :

1. Un visiteur du site Web effectue une action qui remplit les conditions que vous avez définies dans le gestionnaire de balises.
2. Les contacts du gestionnaire d'étiquettes Digital Experience passant par API Les API vous permettent d'automatiser certaines fonctionnalités en connectant votreCXone système avec d'autres logiciels utilisés par votre organisation..
3. Le travail d'automatisation du flux de travail lié à l'événement du gestionnaire de balises qui a été déclenché s'exécute et affiche la fenêtre contextuelle du visiteur sur la page Web qu'il visite.

Configuration requise pour les fenêtres contextuelles avancées

Pour utiliser les fenêtres contextuelles de Proactive Chat avancées, vous devez disposer des éléments suivants:

• Un site Web pour votre organisation : le site Web doit avoir un script pour votre application de gestionnaire de balise Un extrait de code placé dans le code HTML d'un site Web, qui est utilisé par les applications Tag Manager. C'est différent des balises de code HTML ou des balises dans les contextes de médias sociaux. et un script de widget de chat numérique.
• Un compte pour votre application de gestion de balises : vous pouvez utiliser Google Tag Manager ou une autre application de gestion de balises, telle que Tealium.
• Routage Le système utilise des files d'attente de routage pour déterminer vers quels agents acheminer les requêtes. 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. numérique : le routage dans Digital Experience doit être configuré pour le chat en direct ou la messagerie instantanée si nécessaire.
• Fenêtres contextuelles avancées activées : contactez votre Représentant de compte CXone pour activer cette fonctionnalité dans votre organisation.

Préparation du gestionnaire de balises

Vous devez configurer votre application de gestion d'étiquettes Un extrait de code placé dans le code HTML d'un site Web, qui est utilisé par les applications Tag Manager. C'est différent des balises de code HTML ou des balises dans les contextes de médias sociaux. pour surveiller les événements et les conditions qui doivent provoquer l’affichage de pop-ups numériques sur votre site Web. Dans le gestionnaire de balises, vous devez configurer:

• Événement déclencheur : occurrence que le déclencheur « surveille » lorsque les internautes naviguent sur votre site Web.  Les gestionnaires de balises offrent une grande variété d'options pour les événements qu'un déclencheur peut surveiller. Par exemple, vous pouvez choisir d'afficher une certaine page Web, de cliquer sur certains liens, de faire défiler jusqu'à certaines parties d'une page ou le temps passé sur une page.
• Conditions de déclenchement : des informations spécifiques sur l'événement déclencheur. Ces détails aident le gestionnaire de balises à décider sur quelles occurrences il doit agir. Par exemple, vous pouvez spécifier jusqu'où une personne doit faire défiler la page, les liens spécifiques sur lesquels un visiteur doit cliquer ou le temps qu'il doit passer sur la page.
• Balise : la balise contient des informations sur ce que le gestionnaire de balises doit faire lorsque l'événement déclencheur se produit et que les conditions sont remplies. Pour les Digital Experience fenêtres contextuelles Proactive Chat, vous utiliserez une balise HTML personnalisée contenant un extrait de code de script permettant à l'application de gestionnaire de balises de communiquer avec Digital Experience. Le code à utiliser dans le code HTML personnalisé est:

où [TRIGGER ID] est le numéro d'identification du déclencheur d'automatisation du flux de travail que vous créez. Vous pouvez trouver l'ID dans l'URL du déclencheur lorsque vous l'affichez en mode édition dans Digital Experience.

Création d'un travail de fenêtre contextuelle d'automatisation du flux de travail

Suivez ces étapes pour ce travail, afin de personnaliser une fenêtre de discussion contextuelle basée sur un modèle.

1. Cliquez sur le sélecteur d'applications et sélectionnezACD.

2. Aller àDigital >Emplois Automatisation.

3. Cliquez surAjouter.
4. Entrez un Nom qui décrit ce que fait le travail.
5. Dans la liste déroulante Action, sélectionnez Zone contextuelle de chat.
6. Saisissez un Nom de zone contextuelle.
7. Sélectionnez le Modèle que vous souhaitez utiliser pour la mise en page de la boîte contextuelle. Des exemples de chaque modèle apparaissent sous la liste déroulante Modèle.

8. Dans la section Contenu, configurez le texte et l'image utilisés dans la fenêtre contextuelle. Les champs de texte permettent de saisir du texte seul, tandis que les champs personnalisables permettent de saisir des entrées mises en forme. L'utilisation de champs personnalisables permet de personnaliser l'expérience de vos clients.

   Exemple d'entrée de texte seul

   Cher client, nous vous proposons une remise spéciale de 5 %.

   Exemple d'entrée dans un champ personnalisable

   Cher {{customer.firstName}}, nous vous proposons une remise spéciale de {{customer.customField.discountValue}}.

   Si vous utilisez des champs personnalisables, il est recommandé d'utiliser une valeur de repli au cas où le champ personnalisable ne fonctionnerait pas. Pour ce faire, ajoutez une ligne au texte au format suivant :

   {{fallbackMessage|Dear customer, we would like to offer you a special discount of 5%.}}

   Tout texte placé après le | est traité comme un message de repli.

9. Dans la section Appel à l'action, sélectionnez Activer dans le menu déroulant Afficher l'appel à l'action si le modèle que vous avez sélectionné prend en charge les appels à l'action et si vous souhaitez en inclure un dans cette fenêtre contextuelle. Entrez le Texte d'appel à l'action.
10. Dans la section Personnalisation du design, configurez la taille, l'arrière-plan, les bordures et le texte de la fenêtre contextuelle. Si vous incluez des couleurs, vous n'avez pas besoin d'inclure des balises CSS, telles que background-color.  Il vous suffit d'inclure le nom de la couleur, le numéro HEX (y compris le signe dièse (#)). Paramètre RVB ou autre méthode de définition des couleurs prise en charge par CSS.
11. Dans la section Position, sélectionnez l'emplacement sur la page dans le menu déroulant Position. Vous pouvez modifier davantage l'emplacement de la fenêtre contextuelle en saisissant un certain nombre de pixels dans les zones de texte Décalage X et Décalage Y.
12. Dans la section Transfert, sélectionnez jusqu'à trois champs personnalisables.
13. Cliquez sur Enregistrer.

Créer une tâche pour une fenêtre contextuelle HTML

Suivre ces étapes pour ce travail vous permet de créer votre propre fenêtre contextuelle sans être limité à un modèle. Vous pouvez ajouter d'autres éléments personnalisés tels que des boutons, des formulaires, des liens, etc.

1. Cliquez sur le sélecteur d'applications et sélectionnezACD.

2. Aller àDigital >Emplois Automatisation.

3. Cliquez surAjouter.
4. Entrez un Nom qui décrit ce que fait le travail.
5. Dans la liste déroulante Action, sélectionnez Code HTML de la zone contextuelle de chat.
6. Saisissez une valeur pour les options Nom de la zone contextuelle, Conception personnalisée, et JS personnalisé.
7. Dans la section Position, sélectionnez l'emplacement sur la page dans le menu déroulant Position. Vous pouvez modifier davantage l'emplacement de la fenêtre contextuelle en saisissant un certain nombre de pixels dans les zones de texte Décalage X et Décalage Y.
8. Cliquez sur Enregistrer.

Créer une tâche pour le message de bienvenue avec pop-up

Ce travail fonctionne légèrement différemment des autres. Avec ce travail, plutôt qu'un simple pop-up, une fenêtre de discussion s'ouvre et affiche un message de bienvenue.

1. Cliquez sur le sélecteur d'applications et sélectionnezACD.

2. Aller àDigital >Emplois Automatisation.

3. Cliquez surAjouter.
4. Entrez un Nom qui décrit ce que fait le travail.
5. Dans la liste déroulante Action, sélectionnez Message d'accueil du chat.
6. Saisissez le Nom du message d'accueil et le Corps du texte principal. Sélectionnez jusqu'à trois champs personnalisables.
7. Cliquez sur Enregistrer.

Créer un déclencheur d'automatisation de flux de travail

1. Cliquez sur le sélecteur d'applications et sélectionnezACD.

2. Aller àDigital >Déclencheurs d'automatisation.

3. Cliquez sur Ajouter un déclencheur.
4. Entrez un Nom pour le déclencheur.
5. Sélectionnez Déclenché par l'API comme l'Événement.
6. De la liste déroulante Type de données, sélectionnez Fenêtre de discussion.
7. Dans le champ Exécution retardée, entrez le nombre de secondes Engagement numérique doit attendre que l'événement sélectionné se produise avant d'activer la gâchette. Si vous voulez que cela se produise immédiatement, entrez0.
8. Si vous avez des dossiers qui organisent vos déclencheurs, vous pouvez sélectionner le dossier dans lequel placer ce déclencheur dans la liste déroulante.
9. Cliquez sur Enregistrer.

Ajout de conditions

1. Dans la page des détails, cliquez sur Ajouter une condition.
2. Utilisez la liste déroulante pour sélectionner la condition voulue. Consultez le tableau ci-dessous pour voir la liste des conditions disponibles pour ce que vous venez de créer.
3. Cliquez sur Sélectionner.
4. Certaines conditions nécessitent une configuration supplémentaire. Reportez-vous au tableau ci-dessous pour plus d'instructions.

Ajout d'un travail

1. Depuis la page des détails de ce déclencheur, cliquez sur Ajouter un travail existant.
2. Utilisez la liste déroulante pour sélectionner le travail. La liste déroulante affiche le Nom que vous avez donné au travail, mais pas l'Action de ce travail.
3. Cliquez surAjouter.
4. Cliquez sur Activer.

Lorsque votre déclencheur est configuré avec des conditions et des travaux, cliquez sur Activer. Assurez-vous ensuite que vous avez entièrement configuré votre gestionnaire de balises, y compris l'ajout du script à la balise HTML personnalisée.