InstallerInterface de chat client

Interface de chat client doit être activée par votre gestionnaire de compte avant de commencer à l’utiliser. Ce client de chat n’est qu’un élément du canal de chat. Configurer le chat pour votre centre de contact est un processus en plusieurs étapes.

Ces tâches ne sont nécessaires que si vous souhaitez déployer une expérience de discussion personnalisée. Choisissez si vous souhaitez utiliser un profil V1 ou V2. Vous n'avez pas besoin des deux.

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.
  8. Configurez les paramètres de style de la fenêtre de discussion en utilisant la zone Aperçu pour afficher vos mises à jour.
  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.
  7. Si vous le souhaitez, activez et configurez un formulaire de pré-discussion.
    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.
    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 sur OK.
      • 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 sur OK.
      • 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:

    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:

    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.