InstallerInterface de chat client

Créer un Profil de Chat

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

Créer un profil de chat V1

Autorisations requises : Profils de chat - Créer

1. Cliquez sur le sélecteur d'applications et sélectionnezACD.
2. Allez à Paramètres de contact > Profils de chat.
3. Localisez le profil de chat que vous souhaitez modifier et cliquez dessus pour l'ouvrir.
4. Cliquez sur Éditer.
5. Entrez le Nom de profil.
6. Pour l'Interface, sélectionnezASPX V1 dans la liste déroulante. Une fois que vous avez enregistré un profil, vous ne pouvez plus modifier ce champ.
7. Configurer le Schéma de couleur.
   En savoir plus sur les jeux de couleurs

   Champ	Détails
   Schéma de couleur	Le jeu 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. Défaut - Gris avec du bleu et du blanc. Modèle de couleurs 1 - Bleu avec du blanc. Modèle de couleurs 2 - Orange avec du jaune et du blanc. Modèle de couleurs 3 - Rouge avec du gris et du blanc.

8. Configurez les paramètres de style de la fenêtre de discussion en utilisant la zone 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 chat existant. Si vous créez un profil de chat sans logo et que vous décidez ultérieurement d'inclure un logo dans l'interface de chat avec les clients, vous devez créer un nouveau profil de chat et l'attribuer au point de contact approprié.

9. Configurez les paramètres des boîtes de dialogue de discussion en utilisant la zone Aperçu pour afficher vos mises à jour. Vous pouvez modifier la couleur d'arrière-plan et la couleur de police des boîtes de dialogue d'agent et de contact, mais uniquement la couleur de police des 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 chat sans conteneur.
10. Configurez les paramètres des indicateurs et des messages d'état du chat à l'aide de la zone Aperçu pour afficher vos mises à jour.
11. Cliquez sur Terminé.

Créer un profil de chat V2

Autorisations requises : Profils de chat - Créer

1. Cliquez sur le sélecteur d'applications et sélectionnezACD.
2. Allez à Paramètres de contact > Profils de chat.
3. Pour créer un profil, cliquez sur Créer un nouveau.
4. Entrez un Nom de profil.
5. Pour Interface, sélectionnezV2 (HTML5). Une fois que vous avez enregistré un profil, vous ne pouvez plus modifier ce champ.
6. Configurez les champs Apparence selon vos besoins, en utilisant l'Aperçu pour afficher vos mises à jour.
   Voir l'image

   
7. Si vous le souhaitez, activez et configurez un formulaire de pré-discussion.
   Voir l'image

   
   1. Sélectionnez la case à cocher Activer le formulaire de pré-discussion.
   2. Modifiez le Message de bienvenue comme requis.
   3. Configurez les champs selon vos besoins en sélectionnant Ajouter le champ.

   Le contenu soumis à l'aide de ce formulaire est transféré à 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 en attente.
   Voir l'image

   
   1. Sélectionnez la case à cocher Activer la file d'attente.
   2. Entrez un Message en attente. Si le Studio script associé à ce profil utilise l'action Quemsg pour indiquer aux clients 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 le souhaitez, ajoutez un logo en sélectionnant la case à cocherLogo, puis effectuez l'une des opérations suivantes:

      • Si vous avez déjà téléchargé le logo sur CXone dans un autre but, 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 surOK.
      • Si vous souhaitez télécharger un nouveau logo, sélectionnez Télécharger nouveau. Cliquez sur Choisir un fichier et localisez l’image que vous souhaitez charger. Cliquez sur l'image pour la sélectionner. Cliquez sur Ouvrir.

   5. Si vous le souhaitez, ajoutez une image plus grande en sélectionnant la case à cocher Image de héros, puis effectuez l'une des opérations suivantes:

      • Si vous avez déjà téléchargé l'image sur CXone dans un autre but, 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 surOK.
      • Si vous souhaitez télécharger une nouvelle image, sélectionnez Télécharger nouveau. Cliquez sur Choisir un fichier et localisez l’image que vous souhaitez charger. Cliquez sur l'image pour la sélectionner. Cliquez sur Ouvrir.

   Vous devez dimensionner votre logo ou image avant de le télécharger sur CXoneSinon, 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 des fichiers de type SVG ou PNG.

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

Ajouter un point de contact à un profil de chat

Autorisations requises : Profils de chat - Modifier

1. Cliquez sur le sélecteur d'applications et sélectionnezACD.
2. Allez à Paramètres de contact > Profils de chat.
3. Localisez le profil de chat que vous souhaitez attribuer aux points de contact et cliquez pour l'ouvrir.
4. Cliquez sur la languette Points de contact.
5. Dans le tableau Ajouter des points de contact, cochez les cases correspondant aux points de contact auxquels vous souhaitez attribuer le profil de chat. Si vous souhaitez attribuer ce profil à tous les points de contact, ignorez cette étape.
6. Cliquez sur Ajouter des points de contact. Pour attribuer le profil de chat à tous les points de contact de chat actifs, cliquez surTout ajouter.

Incorporer et personnaliser Live Chat V2 (HTML5) dans une page Web

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

6. Si vous souhaitez remplacer l'icône de chat 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 chat en direct par défaut

   

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

      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. Ajouter la .badge2 classe au CSS de votre site Web et stylisez les effets de badge sur le bouton de chat en direct personnalisé comme vous le souhaitez.

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

      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 Studio script au moment de l'exécution. Il peut envoyer un maximum de 10 paramètres de requête personnalisés, y compris des champs de formulaire pré-chat.

   4. Ajoutez le bouton personnalisé avec HTML, juste après la </script> étiquette. Le lien doit inclure onclick="icPatronChat.setStateWindowToggle()". Consultez 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 chat en direct sur votre site Web lorsqu'un contact l'ouvre, procédez comme suit pour le script que vous avez collé sur votre site Web:

   Afficher la taille de la fenêtre de chat en direct par défaut

   

   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. Mettez les paramètres top et left au nombre de pixels à partir du haut et du côté gauche de la fenêtre du navigateur, vous voulez que le coin supérieur gauche de la fenêtre de discussion soit positionné sur votre site Web.
   3. Mettez les paramètres height et width au 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 </script> étiquette*.

      icPatronChat.setDimension(dimensions);

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

Ajouter un onglet Interface de chat client contextuel vers une page Web

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

1. Cliquez sur le sélecteur d'applications et sélectionnezACD.
2. Allez à Paramètres de contact > Profils de chat.
3. Sélectionnez un point de contact existant ou créer un nouveau point de contact.
4. Copiez l’URL du Point de Contact.

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 Studio script au moment de l'exécution. Vous pouvez en inclure jusqu'à 10.