Customer Chat Interface einrichten

Ein Chatprofil erstellen

Sie können mehrere Chat-Profile erstellen, um das Erlebnis noch individueller zu gestalten, aber Sie müssen nur eines erstellen, um die Kunden-Chat-Benutzeroberfläche einzurichten. Entscheiden Sie, ob Sie ein V1- oder V2-Chat-Profil verwenden möchten, und befolgen Sie dann die entsprechende Aufgabe unten.

V1-Chat-Profil erstellen

Erforderliche Berechtigungen: Chatprofile – Erstellen

1. Klicken Sie auf den App-Selector und wählen SieACD.
2. Gehen Sie zu Kontakteinstellungen > Chat-Profile.
3. Wählen Sie das Chatprofil aus, das Sie bearbeiten möchten, und klicken Sie darauf, um es zu öffnen.
4. Auf Bearbeiten klicken.
5. Geben Sie die Profilname.
6. Zum Schnittstelle, wählen V1 ASPX aus dem Dropdown. Nachdem Sie ein Profil gespeichert haben, können Sie dieses Feld nicht mehr bearbeiten.
7. Konfigurieren Sie die Farbschema.
   Erfahren Sie mehr über die Farbschemata

   Feld	Details
   Farbschema	Das verwendete Systemfarbschema. Sie können einer der folgenden Vorlagen in der vorliegenden Form verwenden oder diese an die Anforderungen Ihres Unternehmens anpassen. Standard — Grau mit Blau und Weiß. Farbschema 1 — Blau mit Weiß. Farbschema 2 — Orange mit Gelb und Weiß. Farbschema 3 — Rot mit Grau und Weiß.

8. Konfigurieren Sie die Stileinstellungen für das Chat-Fenster mithilfe von Vorschau Bereich, um Ihre Updates anzuzeigen.
   Erfahren Sie mehr über das Logo

   Feld	Einzelheiten
   Logo Bild	Sie können einem vorhandenen Chat-Profil kein Logo hinzufügen. Erstellen Sie ein Chatprofil ohne Logo und Sie möchten später in der Kundenchat-Benutzeroberfläche ein Logo hinzufügen, müssen Sie ein neues Chatprofil erstellen und der entsprechenden Kontaktstelle zuordnen.

9. Konfigurieren Sie die Einstellungen für die Chat-Dialoge mithilfe von Vorschau Bereich, um Ihre Updates anzuzeigen. Sie können die Hintergrundfarbe und die Schriftfarbe für Agenten- und Kontaktdialoge ändern, jedoch nur die Schriftfarbe für Systemmeldungen. Systemnachrichten werden normalerweise von gesteuert Studio Aktionen wie QUEMSG und erscheinen in der Chat-Oberfläche ohne Container.
10. Konfigurieren Sie die Einstellungen für die Chat-Statusanzeigen und -Nachrichten mithilfe von Vorschau Bereich, um Ihre Updates anzuzeigen.
11. Auf Fertig klicken.

Erstellen Sie ein V2-Chat-Profil

Erforderliche Berechtigungen: Chatprofile – Erstellen

1. Klicken Sie auf den App-Selector und wählen SieACD.
2. Gehen Sie zu Kontakteinstellungen > Chat-Profile.
3. Klicken Sie auf Neu, um ein neues Profil zu erstellen.
4. Geben Sie einen Profilnamen ein.
5. Für die Benutzeroberfläche, wählen Sie V2 (HTML5). Nachdem Sie ein Profil gespeichert haben, können Sie dieses Feld nicht mehr bearbeiten.
6. Konfigurieren Sie die Felder "Darstellung" nach Bedarf mithilfe von Vorschau um Ihre Updates anzuzeigen.
   Bild anzeigen

   
7. Wenn Sie ein Pre-Chat-Formular aktivieren und konfigurieren möchten.
   Bild anzeigen

   
   1. Markieren Sie das Kontrollkästchen Pre-Chat-Formular aktivieren.
   2. Bearbeiten Sie die Begrüßungsnachricht nach Bedarf.
   3. Konfigurieren Sie die Felder nach Bedarf, indem Sie Feld hinzufügen auswählen.

   Inhalte, die über dieses Formular übermittelt werden, werden als Parameter an die Begin-Aktion Ihres Routing-Skripts übergeben, beginnend mit dem Eintrag P0.

8. Aktivieren und konfigurieren Sie das Warteschlangenfenster nach Bedarf.
   Bild anzeigen

   
   1. Markieren Sie das Kontrollkästchen Warteschlange aktivieren.
   2. Geben Sie eine Wartenachricht ein. Verwendet das diesem Profil zugeordnete Skript Studio script die Aktion QUEMSG, um Kunden über ihre Position in der Warteschleife zu informieren, wechseln die hier konfigurierte Nachricht mit dieser Nachricht ab.
   3. Wenn Sie möchten, ändern Sie die Farbe des Hintergrunds und den Ton des Textes.

   4. Wenn Sie möchten, fügen Sie ein Logo hinzu, indem Sie das Kontrollkästchen Logo auswählen und dann einen der folgenden Schritte ausführen:

      • Falls Sie das Logo bereits für einen anderen Zweck zu CXone hochgeladen haben, wählen Sie Vorhandenes auswählen. Klicken Sie auf Durchsuchen und wählen Sie im Fenster Datei auswählen das Bild aus. Klicken Sie auf das Bild, um es auszuwählen. Auf OK klicken.
      • Wenn Sie ein neues Logo hochladen möchten, wählen Sie Neues hochladen. Klicken Sie auf Datei auswählen und wählen Sie das Bild aus, das Sie hochladen möchten. Klicken Sie auf das Bild, um es auszuwählen. Klicken Sie auf Öffnen.

   5. Wenn Sie möchten, fügen Sie ein größeres Bild hinzu, indem Sie das Kontrollkästchen Heldenbild markieren und dann einen der folgenden Schritte ausführen:

      • Wenn Sie das Bild für einen anderen Zweck bereits zu CXone hochgeladen haben, wählen Sie Vorhandenes auswählen. Klicken Sie auf Durchsuchen und wählen Sie im Fenster Datei auswählen das Bild aus. Klicken Sie auf das Bild, um es auszuwählen. Auf OK klicken.
      • Wenn Sie ein neues Bild hochladen möchten, wählen Sie Neu hochladen. Klicken Sie auf Datei auswählen und wählen Sie das Bild aus, das Sie hochladen möchten. Klicken Sie auf das Bild, um es auszuwählen. Klicken Sie auf Öffnen.

   Sie sollten die Größe Ihres Logos oder Bildes vor dem Hochladen auf ändern CXoneAndernfalls wird das Logo oder das Heldenbild auf die angegebene maximale Größe gestreckt. Logos und Bilder müssen SVG- oder PNG-Dateitypen sein.

9. Wenn Sie ein Profil erstellen, klicken Sie auf Speichern.

Dem Chatprofil eine Kontaktstelle zuordnen

Erforderliche Berechtigungen: Chatprofile – Bearbeiten

1. Klicken Sie auf den App-Selector und wählen SieACD.
2. Gehen Sie zu Kontakteinstellungen > Chat-Profile.
3. Suchen Sie das Chat-Profil, das Sie Kontaktpunkten zuweisen möchten, und klicken Sie, um es zu öffnen.
4. Klicken Sie auf die Registerkarte Kontaktstellen.
5. Markieren Sie in der Tabelle Kontaktstellen hinzufügen die Kontrollkästchen der Kontaktstellen, denen Sie das Chatprofil zuordnen möchten. Möchten Sie dieses Profil allen Kontaktstellen zuordnen, überspringen Sie diesen Schritt.
6. Klicken Sie auf Kontaktstelle hinzufügen. Um das Chatprofil allen aktiven Kontaktstellen zuzuordnen, klicken Sie auf Alle hinzufügen.

Einbetten und Anpassen von Live-Chat V2 (HTML5) in eine Webseite

1. Klicken Sie auf den App-Selector und wählen SieACD.
2. Gehen Sie zu Kontakteinstellungen > Kontaktstelle.
3. Wählen Sie einen vorhandene erstellen Sie eine neue Kontaktstelle.
4. Kopieren Sie den Code unten auf der Seite.
5. Fügen Sie den kopierten Text am Ende des ein <body> Abschnitt Ihrer Webseite.

6. Wenn Sie das Standard-Live-Chat-Symbol ersetzen möchten, das auf Ihrer Website angezeigt wird, fügen Sie dem Skript, das Sie in Ihre Website eingefügt haben, Folgendes hinzu:

   Zeigen Sie das Standard-Live-Chat-Symbol an

   

   1. Fügen Sie dem Skript Folgendes direkt unter dem hinzu <script type ="text/javascript"> Linie:

      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. Ergänzen Sie die .badge2 Klassifizieren Sie das CSS Ihrer Website und gestalten Sie die Badge-Effekte auf der benutzerdefinierten Live-Chat-Schaltfläche nach Ihren Wünschen.

   3. Fügen Sie den folgenden hervorgehobenen Code dem icPatronChat.init Code-Block hinzu:

      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 ist ein Array von Zeichenfolgen, die an die übergeben werden Studio Skript zur Laufzeit. Es können maximal 10 benutzerdefinierte Abfrageparameter gesendet werden, einschließlich Formularfeldern vor dem Chat.

   4. Fügen Sie die benutzerdefinierte Schaltfläche mit HTML direkt nach dem Tag </script> hinzu. Der Link muss onclick="icPatronChat.setStateWindowToggle()" enthalten. Siehe folgendes Beispiel:

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

   5. Speichern Sie die Webseite und testen Sie sie. Nehmen Sie die erforderlichen Änderungen vor.

7. Wenn Sie die Größe und Position des Live-Chat-Fensters auf Ihrer Website anpassen möchten, wenn ein Kontakt es öffnet, gehen Sie wie folgt mit dem Skript vor, das Sie in Ihre Website eingefügt haben:

   Zeigen Sie die Standardgröße des Live-Chat-Fensters an

   

   1. Fügen Sie über der Zeile icPatronChat.init den folgenden Code-Block hinzu:

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

   2. Stellen Sie die top und left Einstellungen für die Anzahl der Pixel von der oberen und linken Seite des Browserfensters, damit die obere linke Ecke des Chat-Fensters auf Ihrer Website positioniert wird.
   3. Stellen Sie die height und width Einstellungen für die Anzahl der Pixel, die hoch und breit sein sollen, wenn das Fenster von einem Kontakt geöffnet wird.

   4. Fügen Sie die folgende Zeile direkt über dem hinzu </script> Etikett.

      icPatronChat.setDimension(dimensions);

   5. Speichern Sie die Webseite und testen Sie sie. Nehmen Sie die erforderlichen Änderungen vor.

Hinzufügen eines Kunden-Chat-Benutzeroberfläche Pop-out-Fensters zu einer Webseite

Diese Anweisungen funktionieren sowohl für V1 (ASPX) als auch für V2 (HTML5) Chat-Profile.

1. Klicken Sie auf den App-Selector und wählen SieACD.
2. Gehen Sie zu Kontakteinstellungen > Chat-Profile.
3. Wählen Sie einen vorhandene erstellen Sie eine neue Kontaktstelle.
4. Kopieren Sie die Kontaktstellen-URL.

5. Fügen Sie diese Codezeilen am Ende des Abschnitts <body> Ihrer Webseite hinzu. Ersetzen Sie den hervorgehobenen Text mit Ihrer 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>

   Die Parameter nach der URL sind ein Array von Zeichenfolgen, die an die übergeben werden Studio Skript zur Laufzeit. Sie können bis zu 10 einschließen.