Configuration Interface de clavardage client

Créer un Profil de Clavardage

Vous pouvez créer plusieurs profils de clavardage pour une expérience extra-personnalisée, cependant, vous n'avez besoin d'en créer qu'un pour configurer le interface de clavardage client. Décidez si vous souhaitez utiliser un profil de clavardage V1 ou V2, puis suivez la tâche de corrélation ci-dessous.

Créer un profil de clavardage V1

Autorisations requises : Création de profils de clavardage

1. Cliquez sur le sélecteur d’applications et sélectionnez ACD.
2. Accédez à Paramètres des contacts > Profils de clavardage.
3. Localisez le profil de clavardage que vous souhaitez modifier et cliquez dessus pour l'ouvrir.
4. Cliquez sur Modifier.
5. Entrez le Nom de profil.
6. Pour Interface, sélectionnez V1 ASPX dans la liste déroulante. Une fois que vous avez enregistré un profil, vous ne pouvez plus modifier ce champ.
7. Configurez le Schéma de couleur.
   En savoir plus sur les schémas de couleurs

   Champ	Détails
   Schéma de couleur	Le schéma de couleurs du système utilisé.  Vous pouvez utiliser l'un des modèles suivants tel quel ou le modifier pour répondre aux besoins de votre entreprise. Par défaut — Gris avec bleu et blanc. Palette de couleurs 1 — Bleu avec blanc. Palette de couleurs 2 — Orange avec jaune et blanc. Palette de couleurs 3 — Rouge avec du gris et du blanc.

8. Configurez les paramètres de style pour la fenêtre de clavardage en utilisant l'Aperçu pour afficher vos mises à jour.
   En savoir plus sur l'image du logo

   Champ	Détails
   Image logo	Vous ne pouvez pas ajouter de logo à un profil de clavardage existant. Si vous créez un profil de clavardage sans logo et que vous décidez ultérieurement d'inclure un logo dans l'interface de clavardage avec les clients, vous devez créer un nouveau profil de clavardage et l'attribuer au point d'accès approprié.

9. Configurez les paramètres des boîtes de dialogue de clavardage en utilisant l'Aperçu pour afficher vos mises à jour. Vous pouvez modifier la couleur d'arrière-plan et la couleur de police pour les boîtes de dialogue d'agent et de contact, mais uniquement la couleur de police pour les messages système. Les messages système sont généralement pilotés par Studio des actions comme Quemsg et apparaissent dans l'interface de clavardage sans conteneur.
10. Configurez les paramètres des indicateurs et des messages d'état du clavardage à l'aide de l'Aperçu pour afficher vos mises à jour.
11. Cliquer sur Terminé.

Créer un profil de clavardage V2

Autorisations requises : Création de profils de clavardage

1. Cliquez sur le sélecteur d’applications et sélectionnez ACD.
2. Accédez à Paramètres des contacts > Profils de clavardage.
3. Pour créer un profil, cliquez sur Créer Nouveau.
4. Entrez un Nom de profil.
5. Pour l'Interface, sélectionnez V2 (HTML5). Une fois que vous avez enregistré un profil, vous ne pouvez plus modifier ce champ.
6. Configurez les champs d'apparence selon vos besoins, en utilisant l'Aperçu pour afficher vos mises à jour.
   Afficher l’image

   
7. Si vous le souhaitez, activez et configurez un formulaire de pré-clavardage.
   Afficher l’image

   
   1. Cochez la case Activer le formulaire de pré-clavardage .
   2. Modifiez le Message de Bienvenue, au besoin.
   3. Configurez les champs selon vos besoins en sélectionnant Ajouter le champ.

   Les contenus soumis à l’aide de ce formulaire sont transmis à l’action Commencer de votre script de routage en tant que paramètres commençant par l’entrée P0.

8. Si vous le souhaitez, activez et configurez la fenêtre File d'Attente.
   Voir l'image

   
   1. Cochez la case Activer la File d'Attente.
   2. Entrez un Message en attente. Si le script Studio associé à ce profil utilise l'action Quemsg pour informer les clients de leur place dans la file d'attente, ce message alterne avec le message que vous configurez ici.
   3. Si vous le souhaitez, modifiez la couleur de l'arrière-plan et le ton du texte.

   4. Si vous souhaitez , ajouter un logo en cochant la case Logo puis effectuez l’une des opérations suivantes :

      • Si vous avez déjà téléversé le logo CXone pour une autre fin, sélectionnez Sélectionner Existant. Cliquez sur Parcourir et localisez l'image dans la fenêtre Sélectionner Fichier. Cliquez sur l’image pour la sélectionner. Cliquez sur OK.
      • Si vous souhaitez téléverser un nouveau logo, sélectionnez Charger Nouveau. Cliquez sur Choisir un fichier et localisez l’image que vous souhaitez téléverser. Cliquez sur l’image pour la sélectionner. Cliquez sur Ouvrir.

   5. Si vous souhaitez , ajouter un logo en cochant la case Image de premier plan, puis effectuez l’une des opérations suivantes :

      • Si vous avez déjà téléversé l’image CXone pour une autre fin, sélectionnez Sélectionner Existant. Cliquez sur Parcourir et localisez l'image dans la fenêtre Sélectionner Fichier. Cliquez sur l’image pour la sélectionner. Cliquez sur OK.
      • Si vous souhaitez téléverser une nouvelle image, sélectionnez Téléverser Nouveau. Cliquez sur Choisir un fichier et localisez l’image que vous souhaitez téléverser. Cliquez sur l’image pour la sélectionner. Cliquez sur Ouvrir.

   Vous devez dimensionner votre logo ou image avant de le téléverser à CXone. Sinon, le logo ou l'image du héros est étiré pour s'adapter à la taille maximale spécifiée. Les logos et les images doivent être de type SVG ou PNG.

9. Si vous créez un profil, cliquez sur Enregistrer.

Ajouter un Point d'accès à un Profil de Clavardage

Autorisations requises : Modification des profils de clavardage

1. Cliquez sur le sélecteur d’applications et sélectionnez ACD.
2. Accédez à Paramètres des contacts > Profils de clavardage.
3. Recherchez le profil de clavardage que vous souhaitez attribuer aux points d'accès et cliquez pour l'ouvrir.
4. Cliquez sur l'onglet Points d'accès.
5. Dans le tableau Ajouter des Points de Contact, cochez les cases correspondant aux points d'accès auxquels vous souhaitez assigner le profil de clavardage. Si vous souhaitez assigner ce profil à tous les points d'accès, ignorez cette étape.
6. Cliquez sur Ajouter des Points de Contact. Pour assigner le profil de clavardage à tous les points de clavardage actifs, cliquez sur Ajouter Tout.

Incorporer et personnaliser le clavardage en direct V2 (HTML5) dans une page Web

1. Cliquez sur le sélecteur d’applications et sélectionnez ACD.
2. Accédez à Paramètres de contact > Point d'accès.
3. Sélectionnez un point d'accès existant ou créer un nouveau point d'accès.
4. Copiez le code situé en bas de la page.
5. Collez le texte copié à la fin de la section <body> de votre page Web.

6. Si vous souhaitez remplacer l'icône de clavardage en direct par défaut qui apparaît sur votre site Web, ajoutez ce qui suit au script que vous avez collé sur votre site Web :

   Afficher l'icône de clavardage en direct par défaut

   

   1. Ajoutez ce qui suit au script, juste en dessous de la ligne <script type ="text/javascript"> :

      function showBadge( i) { var divBadge = document.getElementById("divBadge"); if(i>0) { divBadge.innerHTML=i; divBadge.style.display="block"; divBadge.classList.add('badge2'); } else if(i==0 && divBadge) { divBadge.style.display="none";} }

   2. Ajoutez la classe .badge2 au CSS de votre site Web et stylisez les effets de badge sur le bouton de clavarder en direct personnalisé comme vous le souhaitez.

   3. Ajoutez le code en surbrillance suivant au bloc de code icPatronChat.init :

      icPatronChat.init( { serverHost:'http://home-b2.incontact.com', bus_no:50, poc:'c7744b03-fe43-437f-a464-aec52e56f683', params:['FirstName','Last Name','first.last@company.com',555-555-5555], customChatButton: true }, showBadge); 
      

      params est un tableau de chaînes qui passe au script Studio au moment de l'exécution. Il peut envoyer un maximum de 10 paramètres de requête personnalisés, y compris les champs de formulaire pré-clavardage.

   4. Ajoutez le bouton personnalisé avec HTML, juste après la balise </script>. Le lien doit inclure onclick="icPatronChat.setStateWindowToggle()". Voir l'exemple suivant :

      <a class="button2" onclick="icPatronChat.setStateWindowToggle()"> <span>Live Chat</span><div id="divBadge" class="badge2"></div> </a>

   5. Enregistrez la page Web et testez-la. Apportez les modifications nécessaires.

7. Si vous souhaitez personnaliser la taille et la position de la fenêtre de clavardage en direct sur votre site Web lorsqu'un contact l'ouvre, procédez comme suit pour le script que vous avez collé dans votre site Web :

   Visualiser la taille par défaut de la fenêtre de clavardage en direct

   

   1. Au-dessus de la ligne icPatronChat.init, ajoutez le bloc de code suivant :

      var dimensions = {top:20,left:200,height:50,width:600};

   2. Définissez les paramètres top et left sur le nombre de pixels à partir du haut et du côté gauche de la fenêtre du navigateur pour que le coin supérieur gauche de la fenêtre de clavardage soit positionné sur votre site Web.
   3. Définissez les paramètres height et width sur le nombre de pixels de haut et de large que vous souhaitez que la fenêtre soit lorsqu'un contact l'ouvre.

   4. Ajoutez la ligne suivante juste au-dessus de la balise </script>.

      icPatronChat.setDimension(dimensions);

   5. Enregistrez la page Web et testez-la. Apportez les modifications nécessaires.

Ajouter une fenêtre contextuelle Interface de clavardage client à une page Web

Ces instructions fonctionnent pour les profils de clavardage V1 (ASPX) et V2 (HTML5).

1. Cliquez sur le sélecteur d’applications et sélectionnez ACD.
2. Accédez à Paramètres des contacts > Profils de clavardage.
3. Sélectionnez un point d'accès existant ou créer un nouveau point d'accès.
4. Copiez l’URL du Point d'accès.

5. Ajoutez ces lignes de code à la fin de la section <body> de votre page Web. Remplacez le texte en surbrillance par votre URL.

   <script type = "text/javascript"> var popupPatronChat = function() { var url = "https://home-c4.incontact.com/inContact/ChatClient/ChatClient.aspx?poc=815f0de7-f189-4f6a-b272-4ffbcf80c0b&&bu=50&P1=First Name&P2=Last Name&P3=first.last@company.com&P4=555-555-5555; window.open(url, 'icPatronChatWin', 'location=no,height=630,menubar=no,status-no,width=410', true); }; </script>

   Les paramètres après l'URL sont un tableau de chaînes qui passent au script Studio au moment de l'exécution. Vous pouvez en inclure jusqu'à 10.