Configurer l'Interface de chat Client

Créer un Profil de Chat

Vous pouvez créer plusieurs profils de clavardage pour une expérience davantage personnalisée, cependant, vous devez en créer un uniquement pour configurer l'interface de clavardage client. Déterminez si vous souhaitez utiliser un profil de clavardage V1 ou V2, puis suivez la tâche correspondante ci-dessous.

Créer un Profil de chat V1

Autorisations requises : Profils de clavardage - Créer

1. Cliquez sur le sélecteur d'applications et sélectionnez ACD.
2. Accédez à Paramètres du contact > Profils de clavardage.
3. Localisez le profil de chat 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 le profil sauvegardé, vous ne pouvez plus modifier ce champ.
7. Configure the Color Scheme.
   Learn more about the color schemes

   Field	Details
   Color Scheme	The system color scheme in use. You can use one of the following templates as is, or modify it to meet your company's needs. Default: Gray with blue and white. Color Scheme 1: Blue with white. Color Scheme 2: Orange with yellow and white. Color Scheme 3: Red with gray and white.

8. Configurez les paramètres de style de la fenêtre de chat à l'aide de la zone Aperçu pour visualiser vos mises à jour.
   En savoir plus sur l'image du logo

   Champ	Détails
   Logo Image	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 client, vous devez créer un nouveau profil de chat et l'affecter au point de contact approprié.

9. Configurez les paramètres des boîtes de dialogue de chat en utilisant la zone Aperçu pour visualiser vos mises à jour. Vous pouvez modifier la couleur de fond et la couleur DE LA police pour les boîtes de dialogue des agents et des contacts, mais uniquement la couleur DE LA police pour les messages système. Les messages Système sont généralement déclenchés par des Studio actions telles que Quemsg et s'affichent dans l'interface de chat sans conteneur.
10. Configurez les paramètres des indicateurs d'état de chat et des messages, en utilisant la zone Aperçu pour afficher vos mises à jour.
11. Cliquez sur Terminé.

Créer un Profil de Chat V2

Autorisations requises : Profils de clavardage - Créer

1. Cliquez sur le sélecteur d'applications et sélectionnez ACD.
2. Accédez à Paramètres du contact > Profils de clavardage.
3. Pour créer un profil, cliquez sur Créer un nouveau.
4. Entrez un nom de Profil.
5. Pour Interface, sélectionnez V2 (HTML5). une fois le profil sauvegardé, 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.
7. If you want to, enable and configure a pre-chat form.
   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 un champ.

   Le contenu envoyé à l'aide de ce formulaire est transmis à l'action Begin de votre script de routage sous forme de paramètres commençant par l'entrée P0.

8. If you want to, enable and configure the Waiting Queue window.
   1. Sélectionnez la case à cocher Activer la file d'attente En attente.
   2. Entrez un Message En attente. Si le script Studio associé à ce profil utilise l'action Quemsg pour indiquer aux clients leur position dans la file d’attente, ce message alterne avec celui 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 à cocher Logo, puis effectuez l'une des opérations suivantes :

      • Si vous avez déjà téléchargé le logo vers NiCE CXone pour un autre usage, 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 charger un nouveau logo, sélectionnez Charger un 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à chargé l'image dans NiCE CXone pour un autre usage, 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 charger une nouvelle image, sélectionnez Charger une nouvelle image. 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 NiCE 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 au format SVG ou PNG.

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

Ajouter des Points de contact à un Profil de chat

Autorisations requises : Profils de clavardage - Modifier

1. Cliquez sur le sélecteur d'applications et sélectionnez ACD.
2. Accédez à Paramètres du contact > Profils de clavardage.
3. Localisez le profil de chat que vous souhaitez assigner 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, sélectionnez 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, sautez cette étape.
6. Cliquez sur ajouter des Points de contact. Pour attribuer le profil de clavardage à tous les points de contact de clavardage actif, cliquez sur ajouter tout.

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

1. Cliquez sur le sélecteur d'applications et sélectionnez ACD.
2. Accédez à Paramètres du contact > Point of 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 Section <body> 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 les éléments suivants au script, juste au-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 chat en direct personnalisé selon vos préférences.

   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 transmises 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 des champs de formulaire pré-chat.

   4. Ajoutez le bouton personnalisé avec HTML, juste après la balise </script>. 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. 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 auquel vous souhaitez que le coin supérieur gauche de la fenêtre de chat soit positionné sur votre site web.
   3. Définissez les paramètres height et width sur le nombre de pixels de hauteur et de largeur souhaité pour la fenêtre 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 d'interface de chat Client à 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électionnez ACD.
2. Accédez à Paramètres du contact > Profils de clavardage.
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 de caractères transmises au script Studio au moment de l'exécution. Vous pouvez en inclure jusqu'à 10.