Guide-Chat mit APIs anpassen
Sie können das Erscheinungsbild und Verhalten des mit Guide implementierten Chats anpassen, indem Sie diese chatbezogenen APIs verwenden.
API-Aufrufe für Chatverhalten
Mit den Aufrufen in diesem Abschnitt können Sie das Verhalten des Guide-Chatfensters ändern.
Autorisierungscode festlegen
Legt einen Autorisierungscode für den OAuth-Ablauf fest. OAuth ist ein Authentifizierungsprotokoll. Es ermöglicht, dass eine Anwendung in Ihrem Auftrag mit einer anderen interagiert, ohne dass Sie Ihre Kennwörter preisgeben müssen. Es muss vor der Chatinitialisierung aufgerufen werden.
cxone('chat','setAuthorizationCode', 'authorization_code');
Anpassen der automatisierten Erstkontaktnachricht
Wenn ein Chat in Guide beginnt, wird ein neuer Fall Das vollständige Gespräch mit einem Agenten über einen Kanal. Eine Interaktion kann zum Beispiel ein Anruf, eine E-Mail, ein Chat oder eine Unterhaltung in den sozialen Medien sein. erstellt und der Warteschlange hinzugefügt, wenn die erste Nachricht der Chatsitzung gesendet wird. Zu Beginn des Chats wird im Namen des Besuchers eine versteckte, automatische Nachricht gesendet. Dadurch wird die Wartezeit der Besucher auf einen Agenten verkürzt. Obwohl diese erste Nachricht für den Kontakt nicht sichtbar ist, kann der Agent sie sehen.
Die Standardnachricht ist der Text auf der Schaltfläche, auf die der Kunde klickt, um das Gespräch zu beginnen. Sie können den Text der ersten, automatischen Nachricht auf drei Arten anpassen:
-
Überschreiben des Standardtextes der Schaltfläche.
cxone('chat','sendFirstMessageAutomatically', 'Hello');
-
Dynamische Änderung der Erstnachricht.
cxone('chat','setFirstAutomatedMessageContent', 'Hello, I have a question');
-
Ändern des Nachrichtentextes auf der Seite "Übersetzungen".
Machen Sie die erste automatisierte Nachricht für Ihre Kontakte sichtbar
Wenn Sie möchten, dass der Besucher die erste automatische Nachricht sehen kann, fügen Sie Ihrem Skript diesen Aufruf hinzu:
cxone('chat','hideFirstSentMessage', false);
Fallerstellung verzögern
Guide erstellt einen neuen Fall und fügt ihn der Warteschlange hinzu, wenn die erste Nachricht der Chatsitzung gesendet wird. Zu Beginn des Chats wird im Namen des Besuchers eine versteckte, automatische Nachricht gesendet. Dadurch wird die Wartezeit der Besucher auf einen Agenten verkürzt. Chatsitzungen beginnen, wenn ein Besucher auf das Chatsymbol klickt, um ein Gespräch anzufangen. Obwohl die erste Nachricht für den Besucher nicht sichtbar ist, kann der Agent sie sehen.
Sie können Guide so konfigurieren, dass auf die tatsächliche erste Nachricht des Kontakts gewartet wird, bevor ein Fall erstellt wird. Verwenden Sie dazu diesen Aufruf:
cxone('chat','sendFirstMessageAutomatically', false);
Spielmodus aktivieren
Ermöglicht es Besuchern, das Spiel Snake zu spielen, während sie auf einen Agenten warten.
cxone('chat','allowGameMode');
Automatische Zufriedenheitsumfrage
Eine Zufriedenheitsumfrage kann automatisch erkannt und in einem Pop-up angezeigt werden. Mit dieser Option aktivieren oder deaktivieren Sie die automatische Erkennung und Anzeige.
cxone('chat','automatedSatisfactionSurveyModal', 'false');
API-Aufrufe für Chatinformationen
Mit diesen Anrufen können Sie die Informationen, die Besuchern während einer Chatsitzung zur Verfügung stehen, individuell anpassen.
Kunden-ID abrufen
Gibt die eindeutige Kennung des chattenden Besuchers zurück.
cxone('chat','getCustomerIdentityId');
Kunden-ID festlegen
Legt eine eindeutige Kennung für den chattenden Besucher fest.
cxone('chat','setCustomerId', 'customer_id');
Warteschleifenzähler ausblenden
Der Warteschleifenzähler zeigt einem Besucher an, wann ein Agent für ihn da sein wird. Dies basiert auf seiner Position in der Warteschlange des Agenten. Sie können den Warteschleifenzähler ausblenden, nachdem der Besucher erfolgreich zu einem Agenten geroutet wurde. So können Agenten Kundenkarten aus ihrem Eingang entfernen, ohne dass Besucher dies bemerken.
cxone('chat','hideQueueCounterAfterAssignment');
Aktivitätsstatus festlegen
Ändert die Nachricht in der Aktivitätsleiste. So können Sie beispielsweise Ihre Antwortzeit für eine Chatsitzung Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten mitteilen. Dies könnte hilfreich sein, da es sich bei Chatnachrichten um eine asynchrone Form des Chats handelt, so dass die Besucher möglicherweise warten müssen, bis sie von einem Agenten hören.
cxone('chat','setStatusMessage', 'We typically reply within 3 hours.');
Bild des Agenten festlegen
Ändert dynamisch das im Chatfenster angezeigte Agentenbild. Standardmäßig verwendet Guide das Bild im Profil des Agenten. Wenn Sie diesen Aufruf in Ihr Skript einfügen, wird das Bild verwendet, das durch die URL im Codeschnipsel angegeben ist. Ersetzen Sie die Beispiel-URL durch die URL des Bildes, das Sie für den Chat verwenden möchten.
cxone('chat','setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');
Kundenname festlegen
Der Kundenname ist ein Feld im vor dem Kontakt anzuzeigenden Umfrageformular, das Besucher ausfüllen müssen, bevor sie mit einem Agenten in einem Chatnachrichten-Kanal Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten chatten. Dieser API-Aufruf füllt das Feld dynamisch aus.
cxone('chat','setCustomerName', 'Elizabeth');
Datumsformat festlegen
Legt das absolute Datumsformat (01/01/2022) oder das relative Datumsformat (heute, Montag) fest.
cxone('chat','setDateFormat', 'date_format');
Gebietsschema festlegen
Legt das Gebietsschema für Übersetzungen im Chatfenster fest.
cxone('chat','setLocale', 'locale');
Fallinformationen anzeigen
Nur für Chat-Nachrichten Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten-Kanäle. Zeigt dem Besucher Informationen zum Fall an.
cxone('chat','showCaseInfo');
Schaltfläche "Transkript senden" ein-/ausblenden
Wenn Sie die Schaltfläche Transkript senden sichtbar machen, müssen Sie den Chatkanal so konfigurieren, dass Besucher das Chatprotokoll an sich selbst senden können. Konfigurieren Sie diese Option für Chatnachrichten oder Live-Chat.
cxone('chat','showSendTranscript');
cxone('chat','hideSendTranscript');
Systemmeldungen anzeigen/ausblenden
Blendet Systemmeldungen wie den Agentenzuweisungsverlauf ein oder aus.
cxone('chat','showSystemMessages');
cxone('chat','hideSystemMessages');
Nutzungsbedingungen
Ermöglicht Ihnen, Besuchern im Chatfenster ein Dokument mit den Nutzungsbedingungen zur Verfügung zu stellen. Diese Funktion fügt dem Fenster eine Schaltfläche hinzu. Sie können die Beschriftung und den Stil der Schaltfläche anpassen und festlegen, was passiert, wenn Besucher darauf klicken. Die On-Click-Aktion kann die Nutzungsbedingungen als internes Fenster oder externen Link anzeigen.
Ein internes Fenster:
cxone('chat','showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');
Ein externer Link:
cxone('chat','showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');
So deaktivieren Sie die Funktion:
cxone('chat','hideTermsOfUse');
Benutzerdefinierte Felder, Bezeichnungen und Phrasen
Benutzerdefinierte Felder erstellen und befüllen
Die benutzerdefinierten Felder, die Sie für diesen Aufruf verwenden können, sind die gleichen wie die, die Sie in Kundenkarte verwenden können. Wenn Sie diese Aufrufe vor dem Öffnen eines Chatfensters verwenden, werden die Felder im vor dem Kontakt anzuzeigenden Formular mit den im API-Aufruf enthaltenen Daten ausgefüllt.
So definieren Sie den Wert eines benutzerdefinierten Feldes für einen Fall:
cxone('chat','setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');
So definieren Sie den Wert eines benutzerdefinierten Feldes für eine Kundenkarte:
cxone('chat','setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');
Bezeichnungen und Phrasen anpassen
Sie können viele der Label und Phrasen, die in Guide-Chatkanälen verwendet werden, anpassen und die Anpassungen definieren. Wenn Sie die Phrasen oder Bildschirmbezeichnungen dynamisch ändern müssen, verwenden Sie diese API-Aufrufe.
So ändern Sie eine einzelne Nachricht oder eine Bezeichnung:
cxone('chat','setTranslation', 'key', 'your translation');
So ändern Sie mehrere Meldungen oder Bezeichnungen:
cxone('chat','setTranslations', {key1: 'your custom label', key2: 'your custom message'});
Geschweifte Klammern kennzeichnen Variablen, die das System durch die tatsächlichen Daten ersetzt. Zum Beispiel wird {caseNumber} durch die Fallnummer der Chatsitzung des Kontakts ersetzt.
|
Default label/Message |
---|---|
allAgentsForQueueAreBusy | Alle unsere Mitarbeiter, die für Ihre Warteschlange zuständig sind, sind derzeit beschäftigt. Es {queue, plural,one {ist} other {sind}} <strong>{queue, number}</strong> {queue, plural, one {Person} other {Personen}} vor Ihnen in der Warteschleife. |
beginButton |
Chat starten! |
cancel | Abbrechen |
caseNumber | Fall #{caseNumber} |
change | Ändern |
chattedWith | Sie hatten gerade einen Chat mit |
commonErrorText | Es ist ein unerwarteter Fehler aufgetreten. Bitte versuchen Sie es später erneut. |
done | Fertig |
dragAndDropDropzone | Ziehen Sie Dateien hierher, um sie zu senden |
dragAndDropDropzoneRejected | Datei kann nicht hochgeladen werden :( |
EmailLabel | |
endChat | Chat beenden |
endChatTitle | Möchten Sie diese Unterhaltung wirklich beenden? |
endGame | Spiel beenden |
ending | Chat wird beendet ... |
fileSendingFailed | Senden der Datei fehlgeschlagen |
getTranscriptDescription | Senden Sie ein Protokoll dieses Gesprächs an die folgende E-Mail-Adresse: |
getTranscriptLink | Chat-Transkript abrufen |
invalidToken | Ungültiges Token |
ipAddressBlocked | IP-Adresse ist gesperrt |
loading | Wird geladen... |
loadPreviousButton | Vorherige Gespräche laden |
messageLabel | Nachricht |
networkErrorText | Es ist ein Netzwerkfehler aufgetreten. Versuchen Sie es noch einmal. |
newCase | Neuer Fall |
noAgentOnlineForQueue | Für Ihre Warteschlange ist derzeit kein Agent verfügbar. |
offline | Offline |
offlineFormDesc | Wir sind zur Zeit nicht verfügbar |
offlineFormSuccessMsgHead | Vielen Dank! |
offlineFormSuccessMsgSub | Ihre E-Mail wurde erfolgreich gesendet. Wir melden uns in Kürze bei Ihnen. |
online | Online |
onlineFormText | Um einen Chat zu beginnen, teilen Sie uns bitte Ihren Namen mit. Einer unserer Mitarbeiter wird Ihnen sofort weiterhelfen. |
pleaseSelect | Bitte auswählen... |
poweredBy | Unterstützt von |
preparingSession | Sitzung vorbereiten... |
replyBoxPlaceholder | Schreiben Sie hier, drücken Sie <enter> zum Senden |
retry | Erneut versuchen |
sendFileTextSize | Bitte laden Sie Dateien hoch, die kleiner sind als {filesize} |
sendFileTextSupportedFormat | unterstützte Formate. |
sendFileTextSupportedFormatDesc | Bilder, Videos, {fileFormats} |
sendMessageButton | Nachricht senden |
sendNewEmail | Neue E-Mail senden |
sendTranscript | Protokoll senden |
snakeWaiting | Sie sind {queue} in der Warteschlange. |
startChatInPopup | Fragen Sie uns! |
startNewChat | Neuen Chat starten |
statusReconnecting | Versuche zu verbinden... |
surveySuccesfullySent | Vielen Dank für Ihr Feedback! |
systemChattingWith | Sie sind jetzt im Chat mit {name} |
topic | Thema |
transciptSentFailed | Senden fehlgeschlagen. |
transciptSuccesfullySent | Protokoll erfolgreich gesendet! |
tryAgainButton | Versuchen Sie es erneut |
unexpectedError | Unerwarteter Fehler. |
validationInvalidEmail | E-Mail-Adresse ist ungültig |
validationMandatory | Dieses Feld ist ein Pflichtfeld |
validationShorterName | Bitte verwenden Sie einen kürzeren Namen |
validationShortMessage | Ihre Nachricht zu zu kurz |
waiting | Warten ... |
waitingDescription | Einer unserer Agenten wird sich in Kürze mit Ihnen in Verbindung setzen. |
waitingFooter | Drücken Sie die <Leertaste>, um die Wartezeit zu verkürzen. |
waitingForAgent | Warten auf den Agenten ... |
waitingInQueue | Ich warte auf einen Agenten. Sie sind {queue} in der Warteschlange. |
weAreOffline | Wir sind derzeit offline. |
weAreOnline | Wir sind online |
yourNameLabel | Ihre Name |
API-Aufrufe für das Erscheinungsbild des Chatfensters
Sie können das Aussehen des Guide-Chatfensters ändern.
Zugewiesenen Agenten ausblenden
cxone('chat','hideAssignedAgent');
Kopfzeile ausblenden
cxone('chat','hideHeader');
Kunden-Avatar anzeigen
cxone('chat','showCustomerAvatar');
Schaltfläche "Senden" anzeigen
cxone('chat','showSendButton');
Zeichenbegrenzung für das Antwortfeld festlegen
cxone('chat','setReplyBoxLimit', '280');
Benutzerdefiniertes CSS mit Datenauswahlen
Sie können das Erscheinungsbild von Chatfenstern mit benutzerdefiniertem CSS unter Verwendung von Datenselektoren in Ihren API-Aufrufen anpassen. Mit Datenselektoren können Sie den Teil des Chat-Fensters angeben, auf den Sie das benutzerdefinierte CSS anwenden möchten. Definieren Sie den Datenselektor mit dem Attribut data-selector. Geben Sie den Namen der Komponente des Chat-Fensters an, die Sie ändern möchten.
Um benutzerdefiniertes CSS mit Datenauswahlen hinzuzufügen, verwenden Sie diesen API-Aufruf als Referenz:
cxone('chat','setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');
-
ACTIVITY_BAR
-
AGENT_MESSAGE
-
AGENT_MESSAGE_BUBBLE
-
AVATAR
-
CONTENT
-
CUSTOMER_MESSAGE
-
CUSTOMER_MESSAGE_BUBBLE
-
DELIMITER
-
DROPDOWN_MENU
-
HEADER
-
INPUT
-
IS_TYPING
-
MESSENGER
-
POPUP
-
PRECONTACT_SURVEY
-
PRECONTACT_SURVEY_DESCRIPTION
-
PRIMARY_BUTTON
-
REPLY_BOX
-
SECONDARY_BUTTON
-
SEND_BUTTON
-
TEXTAREA
-
TEXT_BUTTON
-
WIDGET
-
WINDOW
Wenden Sie benutzerdefinierte CSS-Komponenten nur mit dem Attribut data-selector an. Wenden Sie sie nicht auf Klassenauswahlen oder andere Teile des JavaScript-Codes an, wie in diesem Beispiel:
.Widget__Widget___1qQCf { background: red; }
Integration mit Anwendungen von Drittanbietern
Mit den Aufrufen in diesem Abschnitt können Sie Push-Benachrichtigungen erhalten, wenn bestimmte Chatereignisse auftreten.
Erkennen aktiver Themen im Chat-Fenster
cxone('chat','getOngoingThreads');
Erkennen von laufenden Kontakten im Chat-Fenster
cxone('chat','getOngoingContact');
Push-Benachrichtigung für bestimmte Chat-Ereignisse erhalten
Verwenden Sie eine der folgenden Eingaben, um "event" in den folgenden Beispielen zu ersetzen.
-
CaseToRoutingQueueAssignmentChanged
-
PageViewCreated
-
MessageCreated
-
MessageDeliveredToUser
-
MessageDeliveredToEndUser
-
MessageSeenByUser
-
MessageSeenByEndUser
-
MessageReadChanged
-
MessageAddedIntoCase
-
CaseInboxAssigneeChanged
-
CaseCreated
-
CaseStatusChanged
-
SenderTypingStarted
-
SenderTypingEnded
-
MessageNoteCreated
-
ContactRecipientsChanged
Um eine Benachrichtigung für ein Chat-Ereignis zu erhalten:
cxone('chat','onPushUpdate', 'event', callback);
Um eine Benachrichtigung für mehr als ein Chat-Ereignis zu erhalten:
cxone('chat','onPushUpdate', ['event', 'event', 'event'], callback);
Um eine Benachrichtigung für alle Chat-Ereignisse zu erhalten:
cxone('chat','onAnyPushUpdate', callback);