Configuration Interface de clavardage client

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

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

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 customer chat interface. 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

  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. Cliquer surModifier.
  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.
  8. Configurez les paramètres de style pour la fenêtre de clavardage en utilisant l'Aperçu pour afficher vos mises à jour.
  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

  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.
  7. Si vous le souhaitez, activez et configurez un formulaire de pré-clavardage.
    1. Cochez la case Activer le formulaire de pré-clavardage.
    2. Modifiez le message de bienvenue selon vos besoins.
    3. Configurez les champs selon vos besoins en sélectionnant Ajouter un champ.

    Le contenu soumis à l'aide de ce formulaire est transmis à l'action Begin 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.
    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 le souhaitez, ajoutez un logo en sélectionnant Logo case à cocher, puis effectuez l'une des opérations suivantes:

      • Si vous avez déjà téléversé 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éverser un nouveau logo, 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.

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

      • Si vous avez déjà téléversé 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é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

  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 contactPoint 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 :

    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>Clavardage en direct</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 :

    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 Customer chat interface à 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.