Anpassen von Chat-Kanälen mithilfe von JavaScript
Sie können Live-Chat Agenten und Kontakte interagieren in Echtzeit und Chat-Messaging
Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten mit JavaScript anpassen. CXone bietet Standard-Anpassungen und die zugehörigen JavaScript API-Aufrufe. Sie müssen diese API-Aufrufe in das Skript-Tag einbeziehen, das den Chat zu Ihrer Website hinzufügt. Um diese Funktionen hinzuzufügen, benötigen Sie Zugriff auf den Code Ihrer Website. Diese Seite erklärt, wo Sie JavaScript hinzufügen, und gibt die genauen Codezeilen an, die einbezogen werden müssen. Sie sollten außerdem Kenntnisse in JavaScript oder Webentwicklung haben, um die Informationen auf dieser Seite sicher zu verwenden.
![Geschlossen](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
The Jungle, eine Tochtergesellschaft von Classics, Inc., betreibt einen Geschenkeladen als Teil seiner Website. Der Administrator, Mowgli Kipling, hat die folgenden API-Aufrufe eingerichtet, um seinen Chat-Agenten die Arbeit mit den Kunden des Geschenkeladens zu erleichtern:
- Eigene Besuchervariablen sammeln Informationen über die Farben der Artikel, die sich der Kontakt auf den Seiten des Geschenkeladens ansieht. Diese Informationen stehen dem Agenten dann zur Verfügung, wenn der Kontakt einen Chat initiiert.
- Eigene Besucherereignisse werden für jedes Produkt aufgezeichnet, auf das ein Kontakt klickt. Nach fünf Produktklicks und keinem Klick auf die Schaltfläche Kaufen wird ein proaktives "Probleme mit der Entscheidung?" Pop-up angezeitg, das dem Kontakt einen Chat anbietet.
Sie können die folgenden Aspekte Ihrer Chatkanäle Eine Möglichkeit für Kontakte, mit Agenten oder Bots zu interagieren. Kanäle sind zum Beispiel Sprache, E-Mail, Chat, Social Media usw. anpassen:
- Chatverhalten: Passen Sie an, wie sich das Chatfenster verhält. Dazu gehört das Öffnen und Schließen des Chat-Fensters oder das Aktivieren des Spielmodus. Im Spielmodus können Kunden das Spiel Snake spielen, während sie auf einen Agenten warten.
- Chatinformation: Passen Sie die im Chatfenster angezeigten Informationen an. Dazu gehören Dinge wie der Name des Kunden, das Bild des Agenten oder der Aktivitätsstatus.
- Benutzerdefinierte Felder, Bezeichnungen und Ausdrücke: Definieren Sie benutzerdefinierte Felder oder passen Sie Feldbezeichnungen an. Sie können auch einen Alternativtext für die automatischen Nachrichten konfigurieren, die den Kontakten angezeigt werden.
- Erscheinungsbild des Chatfensters: Passen Sie das Aussehen des Chatfensters an. Sie können z. B. die Größe und Position des Fensters auf der Webseite ändern.
- Benutzerdefiniertes CSS: Definieren Sie benutzerdefiniertes CSS für das Chatfenster.
- Proaktive Aktionen: Passen Sie das Kundenerlebnis mit proaktiven Aktionen an, die auf dem Kundenverhalten basieren.
- Andere Funktionen: Weitere Dinge, die Sie konfigurieren können, sind:
- Die Host-Umgebung wird auf bestimmte Ereignisse aufmerksam gemacht.
- Integration von digitalen Chatkanälen in iOS- oder Android-Apps.
- Aktivieren der OAuth-Authentifizierung.
Zurzeit unterstützen alle JavaScript-APIs einen Brand Embassy-Loader für jeden Aufruf. Wenn Sie eigenständigen CXone-Chat auf Ihrer Website verwenden, unterstützen alle diese Aufrufe auch einen neuen CXone-Loader. Schließlich werden alle JavaScript-APIs für Chat den CXone-Loader statt Brand Embassy verwenden.
Die Struktur des JavaScript-Aufrufs unterscheidet sich je nach verwendetem Loader. Sie können nicht beide Strukturen gleichzeitig verwenden. Verwenden Sie nur eine davon, je nachdem, welcher Loader verwendet wird.
Wenn Sie CXone Guide zum Implementieren von Chat auf Ihrer Website verwenden, verwenden Sie den CXone-Loader. Nicht alle Aufrufe auf dieser Seite werden in Guide unterstützt. Die CXone Guide-Dokumentation listet aber alle unterstützten JavaScript-Aufrufe auf.
Wenn Sie den CXone-Loader verwenden, entweder über digitalen Chat oder Guide, sollten Sie Aufrufe wie folgt strukturieren:
cxone('chat','enableChatAlwaysOnline');
Wenn Sie den Brand Embassy-Loader verwenden, sollten Sie Aufrufe wie folgt strukturieren:
brandembassy('enableChatAlwaysOnline');
JavaScript-Aufrufe zu einem Chat-Kanal hinzufügen
Falls Sie dies noch nicht getan haben, richten Sie einen Live-Chat oder einen Chat-Messaging-Kanal ein. Testen Sie den Kanal, um sicherzustellen, dass er mit den Standardeinstellungen funktioniert, bevor Sie Anpassungen vornehmen. Richten Sie die Chat-Anpassungen in einer Testumgebung ein, bevor Sie sie in Ihrer Produktionsumgebung freigeben. Auf diese Weise können Sie Störungen für Ihre Website-Besucher auf ein Minimum reduzieren. Außerdem können Sie so sicherstellen, dass Ihre Anpassungen wie vorgesehen funktionieren.
Kopieren Sie das Skript und die API-Aufrufe so wie gezeigt. Unerwartete Änderungen können zu Fehlfunktionen Ihres Kanals führen.
- Klicken Sie auf den App-Selector
und wählen SieACD.
-
Gehen Sie zu Digital > Kontaktstellen Digital.
- Klicken Sie unter "Ihre Kanäle" auf Website-Skript.
- Kopieren Sie den JavaScript-Code von der Seite und fügen Sie ihn in ein Textverarbeitungsprogramm wie Notepad ein. Achten Sie darauf, die öffnenden und schließenden <script>-Tags einzubeziehen.
-
Fügen Sie in Notepad++ direkt über dem schließenden </script>-Tag des eingefügten Codes die gewünschten JavaScript-Aufrufe hinzu. Im folgenden Beispielbild zeigt der Kommentar an, wo Aufrufe hinzugefügt werden sollen. Die unterstützten Aufrufe, die Sie verwenden können, werden im weiteren Verlauf dieser Seite beschrieben.
-
Kopieren Sie das gesamte Skript, einschließlich der von Ihnen hinzugefügten öffnenden und schließenden <script>-Tags, in die Kopfzeile einer Seite Ihrer Website.
-
Besuchen Sie die geänderte Seite und senden Sie Testnachrichten im Chat, um zu prüfen, ob Ihre Anpassungen wie vorgesehen funktionieren.
-
Wenn Sie Ihr Skript vollständig getestet haben und es wie gewünscht funktioniert, kopieren Sie das endgültige Skript in den Header jeder Seite, die das Chat-Widget enthalten soll.
JavaScript-Aufrufe für Chatverhalten
Mit den Aufrufen in diesem Abschnitt können Sie das Verhalten der Chat-Fenster ändern.
Chat-Fenster öffnen
Öffnet automatisch ein Chat-Fenster. Standardmäßig werden Chat-Fenster geöffnet, wenn ein Kontakt auf das Chat-Symbol klickt.
brandembassy('openChatWindow');
Chat-Fenster schließen
Schließt ein Chatfenster automatisch. Standardmäßig werden Chatfenster geschlossen, wenn ein Kontakt auf das Chatsymbol klickt.
brandembassy('hideChatWindow');
Chat immer online
Zeigt das Chatfenster so an, als wären Agenten verfügbar, auch wenn keine Agenten online sind.
brandembassy('chat','enableChatAlwaysOnline');
Benutzerdefinierte Felder aus dem vorherigen Chat beibehalten
Sie können wählen, ob benutzerdefinierte Felder beibehalten oder aus dem lokalen Speicher gelöscht werden sollen, nachdem die Interaktion initiiert wurde. So können Sie festlegen, welche benutzerdefinierten Felder in allen Interaktionen eines Chats weiterhin angezeigt werden. Die "Feld-ID" bezieht sich auf den Wert des Felds Ident beim Erstellen eines benutzerdefinierten Felds.
cxone('chat','enablePrecontactSurveyFieldAutoFill'('field id');
Postback-Daten von der adaptiven Karte senden
Studio -Aktionen und Bots können via Chat adaptive Karten an Kontakte senden. Damit der digitale Chat Postback-Daten an Studio oder einen Bot senden kann, müssen Sie einen Handler aktivieren. Ein Handler für adaptive Karten funktioniert im Bot oder der Studio-Aktion, um Engagements mit adaptiven Karten zu verwalten und zu beantworten. Der Handler wird aktiviert, wenn ein Benutzer mit Komponenten einer adaptiven Karte interagiert, zum Beispiel durch Klicken auf eine Schaltfläche oder Auswählen einer Option aus einem Dropdown-Menü. Der Handler entziffert die Eingabe des Benutzers und bestimmt die geeignete zu ergreifende Antwort oder Aktion. Fügen Sie den Standard-Handler-Befehl und den Nachrichten senden-Befehl hinzu, sodass Studio oder Bots entsprechen antworten oder die adaptiven Kartendaten für Berichterstattungszwecke speichern können. Sie können den Standard-Handler auch mit einem eigenen Handler-Befehl überschreiben.
![Geschlossen](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
<script>
(function (i, s, o, r, g, v, a, m) {
g = v ? g + '?v=' + v : g; i['CXoneDfo'] = r;
i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}; i[r].l = +new Date(); i[r].u = g;
a = s.createElement(o); m = s.getElementsByTagName(o)[0]; a.async = true;
a.src = g + '?' + Math.round(Date.now() / 1000 / 3600); m.parentNode.insertBefore(a, m);
})(window, document, 'script', 'cxone', 'https://web-modules-de-na1.staging.niceincontact.com/loader/1/loader.js');
cxone('init', '1032');
cxone('chat', 'init', 1032, 'chat_5184dc2e-0c75-4265-8a2b-4221c5aebfe1');
cxone('chat', ‘adaptiveCardOnExecuteAction’, 'button1Submit', (action, chatSdkInstance) => {
let messageContent = {
type: "TEXT",
payload: {
text: action.title
},
postback: action.id
}
chatSdkInstance.sendMessage(messageContent)
});
</script>
Standard-Handler-Befehl für adaptive Karten hinzufügen:
adaptiveCardOnExecuteAction(actionId: string, callback: (action: node_modules/adaptivecards/src/card-elements.ts::Action) => void)
Nachricht senden-Befehl:
sendMessage(messageContent: MessageContent)
Eigenen Handler-Befehl erstellen:
{
"acType": "Action.Execute", // type of action Action.Execute or Action.Submit
"acVerb": "null|string", // only if `verb` is provided in the Action
"acActionId": "null|string" // only if id is provided in the Action
"acData": { // `data` are provided in Action
"firstName": "John",
"lastName": "Doe",
"_messageText": "Submitted something for you"
}
}
![Geschlossen](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
{
...,
"messageContent": {
"type": "TEXT",
"payload": {
"text": "Submitted something for you", // use Action.Title if _messageText is not provided (in case Action.Title is not provided, send Action.type)
},
"postback": "{\"acType\":\"Action.Execute\",\"acData\":{\"firstName\":\"John\",\"lastName\":\"Doe\",\"_messageText\":\"Submitted something for you\"}}"
}
}
}
![Geschlossen](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
{
"thread": {
"idOnExternalPlatform": "788a67af-263d-48b1-b67e-eb75838c6509"
},
"messageContent": {
"type": "ADAPTIVE_CARD",
"payload": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.4",
"body": [
{
"type": "TextBlock",
"text": "Present a form and submit it back to the originator"
},
{
"type": "Input.Text",
"id": "firstName",
"label": "What is your first name?"
},
{
"type": "Input.Text",
"id": "lastName",
"label": "What is your last name?"
}
],
"actions": [
{
"type": "Action.Execute",
"title": "Fire!",
"data": {
"_messageText": "Submitted something for you"
}
}
]
}
}
}
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. Dies muss vor der Chatinitialisierung aufgerufen werden.
brandembassy('setAuthorizationCode', 'authorization_code');
Automatisches Starten einer neuen Chat-Sitzung
Erstellt eine neue Chat-Messaging- Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten oder Live-Chat-Sitzung
Agenten und Kontakte interagieren in Echtzeit, wenn nicht gerade eine läuft. Verwenden Sie diesen Aufruf auf weniger stark frequentierten Seiten Ihrer Website, um Ihre Mitarbeiter nicht mit Kontakten zu überhäufen.
Digitales Engagement 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 Kunden eine versteckte, automatische Nachricht gesendet. Dadurch wird die Wartezeit der Kontakte auf einen Agenten verkürzt, da der Prozess früher beginnt. Chat-Sitzungen beginnen, wenn ein Kontakt auf das Chat-Symbol klickt, um ein Gespräch zu beginnen, oder wenn sich das Chat-Fenster bei automatisch gestarteten Chat-Sitzungen öffnet. Obwohl diese erste Nachricht für den Kunden nicht sichtbar ist, kann der Agent sie sehen.
Sie können den Text der ersten, verborgenen Nachricht anpassen.Beim automatischen Starten einer Chat-Sitzung wird das vor dem Kontakt anzuzeigende Umfrageformular übersprungen. Aus diesem Grund müssen Sie andere Methoden anwenden, um Informationen über Kontakte zu sammeln. Sie können zum Beispiel die Informationen manuell in die Kundenkarte eintragen lassen. Sie können die Kundenauthentifizierung auch über eine OAuth-Integration konfigurieren.
Das Routing für automatisch gestartete Fälle erfolgt gemäß den konfigurierten Das System verwendet Routing-Warteschlangen, um zu bestimmen, an welche Agenten Fälle weitergeleitet werden sollen. Ihr Systemadministrator erstellt Routing-Warteschlangen, so dass bestimmte Fälle an Agenten mit Fachwissen über diese Art von Fällen weitergeleitet werden. Routing-Warteschlangen in Digital Experience. Wenn bei Live-Chat-Sitzungen keine Agenten verfügbar sind, wird im Chat-Fenster die Meldung Warten auf verfügbaren Agenten angezeigt.
Um eine Chat-Sitzung automatisch zu starten, verwenden Sie diese Anrufe in der angegebenen Reihenfolge:
brandembassy('openChatWindow');
brandembassy('autoStartSession');
Wenn Sie dem Skript weitere Aufrufe hinzufügen, muss autoStartSessionimmer der letzte Aufruf im Skript sein. Zum Beispiel:
// set customer name (as this is required field)
brandembassy('setCustomerName', 'Elizabeth');
// open chat window so user can start to chat
brandembassy('openChatWindow');
// and finally start the new chat session (without the pre-chat form)
brandembassy('autoStartSession');
Gleichzeitige Chatsitzungen aktivieren
Sie können Kontakten das Starten mehrerer Chatsitzungen im selben Browser erlauben. Wenn sie sich in einer Browser-Registerkarte in einem aktiven Chat befinden, können Kontakte einen zweiten Chat in einer neuen Browser-Registerkarte oder einem neuen Fenster beginnen.
Um dieses Verhalten zu ermöglichen, müssen Sie angeben, wie die Chatdaten gespeichert werden. Sie haben zwei Optionen:
-
localStorage: Daten bleiben nach Schließen der Registerkarte oder des Fensters im Browser bestehen. Dies ist die Standard-Speichermethode. Wenn mehrere Chatsitzungen gleichzeitig in verschiedenen Registerkarten offen sind, werden alle als dieselbe Interaktion betrachtet. Das Chatgespräch und die Erfahrung sind über alle Registerkarten gleich.
-
sessionStorage: Daten werden für die individuelle Registerkarte oder das individuelle Fenster gespeichert und gelöscht, wenn die Registerkarte oder das Fenster geschlossen wird. Der Benutzer kann mehrere Chatsitzungen in verschiedenen Registerkarten oder Fenstern erstellen. Die Chatsitzung in jeder Registerkarte wird als einzigartige Interaktion betrachtet.
Um gleichzeitige Chatsitzungen zu ermöglichen, fügen Sie den Schlüssel storageType mit einem Wert sessionStorage hinzu, wie im folgenden Beispiel zu sehen.
Wenn Sie die Option localStorage verwenden und trotzdem den Gesprächsverlauf löschen möchten, können Sie einen Ereignis-Listener erstellen, der die customerID nach Ende des Chats entfernt.
brandembassy( 'init', 'MY_BRAND_ID_123', 'MY_CHANNEL_ID_321', undefined, { storageType: 'sessionStorage', }, );
Gesprächsverlauf löschen
Entfernt den Gesprächsverlauf nach Ende des Chatgesprächs. Dies kann nützlich sein, wenn Sie die Standard-Speicheroption des Chats (lokaler Speicher) verwenden. Diese Speicheroption speichert Daten noch nach Schließen der Browserinstanz. In diesem Fall können Sie den Gesprächsverlauf durch Löschen der customerID aus dem lokalen Speicher speziell entfernen. Das folgende Beispiel erstellt einen Ereignis-Listener, der auf das Ereignis caseStatusChanged vom Live-Chat achtet. Dies gibt das Ende einer Chatsitzung an. Anschließend wird der Befehl removeItem aufgerufen, der die customerID aus dem lokalen Speicher des Browsers entfernt.
brandembassy('onPushUpdate', ['CaseStatusChanged'], pushUpdatePayload => { if (typeof pushUpdatePayload === 'undefined' || typeof pushUpdatePayload.data === 'undefined') { return; } const { status } = pushUpdatePayload.data.case || {}; if (typeof status === 'undefined') { return; } // When a previous case has been closed, this will set the custom fields again. if (status === 'closed') { localStorage.removeItem('_BECustomerID') ); } });
Anpassen der automatisierten Erstkontaktnachricht
Digitales Engagement 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 Kunden eine versteckte, automatische Nachricht gesendet. Dadurch wird die Wartezeit der Kontakte auf einen Agenten verkürzt, da der Prozess früher beginnt. Chat-Sitzungen beginnen, wenn ein Kontakt auf das Chat-Symbol klickt, um ein Gespräch zu beginnen, oder wenn sich das Chat-Fenster bei automatisch gestarteten Chat-Sitzungen öffnet. Obwohl diese erste Nachricht für den Kunden 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.
brandembassy('sendFirstMessageAutomatically', 'Hello');
brandembassy('setFirstAutomatedMessageContent', 'Hello, I have a question');
- Änderung des Nachrichtentextes auf der Seite „Übersetzungen“.
Machen Sie die erste automatisierte Nachricht für Ihre Kontakte sichtbar
Wenn Sie möchten, dass der Kontakt die erste automatische Nachricht sehen kann, fügen Sie diesen Aufruf zu Ihrem Skript hinzu:
brandembassy('hideFirstSentMessage', false);
Fallerstellung verzögern
Digitales Engagement 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 Kunden eine versteckte, automatische Nachricht gesendet. Dadurch wird die Wartezeit der Kontakte auf einen Agenten verkürzt, da der Prozess früher beginnt. Chat-Sitzungen beginnen, wenn ein Kontakt auf das Chat-Symbol klickt, um ein Gespräch zu beginnen, oder wenn sich das Chat-Fenster bei automatisch gestarteten Chat-Sitzungen öffnet. Obwohl diese erste Nachricht für den Kunden nicht sichtbar ist, kann der Agent sie sehen.
Sie können Digitales Engagement so konfigurieren, dass auf die tatsächliche erste Nachricht des Kontakts gewartet wird, bevor ein Fall mit diesem Aufruf erstellt wird:
brandembassy('sendFirstMessageAutomatically', false);
Spielmodus aktivieren
Ermöglicht es Kontakten, das Spiel Snake zu spielen, während sie auf einen Agenten warten.
brandembassy('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.
brandembassy('automatedSatisfactionSurveyModal', 'true');
brandembassy('automatedSatisfactionSurveyModal', 'false');
//if not defined, the default is 'true'
JavaScript-Aufrufe für Chat-Informationen
Mit diesen Anrufen können Sie die Informationen, die Ihren Kontakten während einer Chat-Sitzung zur Verfügung stehen, individuell anpassen.
Kunden-ID abrufen
Gibt die eindeutige Kennung des chattenden Kunden zurück.
brandembassy('getCustomerIdentityId');
Vor dem Kontakt anzuzeigendes Umfrageformular ausblenden
Die vor dem Kontakt anzuzeigende Umfrage wird zu Beginn einer Chat-Messaging Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten-Sitzung angezeigt. Sie sammelt Informationen über den Kontakt, z. B. den Namen. Sie können das vor dem Kontakt anzuzeigende Umfrageformular ausblenden. In diesem Fall wird das Chatfenster angezeigt, sobald ein Kontakt eine Chat-Messaging-Sitzung startet.
brandembassy('hidePreSurvey');
Warteschleifenzähler ausblenden
Der Warteschleifenzähler zeigt einem Kontakt 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 Kontakt erfolgreich zu einem Agenten geroutet wurde. So können Agenten Kundenkarten aus ihrem Eingang entfernen, ohne dass Kontakte dies bemerken.
brandembassy('hideQueueCounterAfterAssignment');
brandembassy('hideAssignedAgent');
brandembassy('hideSystemMessages');
Chat-Benachrichtigungston stummschalten
Ermöglicht Ihnen das Ausschalten des Chat-Benachrichtigungstons. Der Chat-Benachrichtigungston ist standardmäßig eingeschaltet. Dies muss unabhängig von den anderen Chat-Toneinstellungen konfiguriert werden. Sie können den Wert zu "false" ändern, um den Chat-Benachrichtigungston wieder einzuschalten.
brandembassy('muteAudioNotification', 'true');
// OR
brandembassy('muteAudioNotification');
Übersetzungen der Browsersprache außer Kraft setzen
Setzt die Browserspracheinstellungen des Benutzers oder eine individuelle Region für eine bestimmte Übersetzung außer Kraft. Sie können zum Beispiel sicherstellen, dass bestimmter Text, unabhängig von den Browserspracheinstellungen eines Kontakts, immer in Englisch angezeigt wird.
brandembassy('init', 'brandId', 123, 'locale');
Aktivitätsstatus festlegen
Ändert die Nachricht in der Aktivitätsleiste. So können Sie beispielsweise Ihre Antwortzeit für eine Chatsitzung mitteilen. Dies könnte hilfreich sein, da es sich beim Chat-Messaging um eine asynchrone Form des Chats handelt, so dass die Kontakte möglicherweise warten müssen, bis sie von einem Agenten hören.
brandembassy('setStatusMessage', 'We typically reply within 3 hours.');
Bild des Agenten festlegen
Ändert dynamisch das im Chatfenster angezeigte Agentenbild. Standardmäßig verwendet Digitales Engagement 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.
brandembassy('setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');
Kunden-ID festlegen
Legt eine eindeutige Kennung für den Kunden im Chat fest.
brandembassy('setCustomerId', 'customer_id');
Kundenname festlegen
Der Kundenname ist ein Feld im vor dem Kontakt anzuzeigenden Umfrageformular, den die Kontakte ausfüllen müssen, bevor sie mit einem Agenten in einem Chat-Messaging-Kanal Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten chatten. Dieser Aufruf füllt das Feld dynamisch aus.
brandembassy('setCustomerName', 'Elizabeth');
Datumsformat festlegen
Kann so festgelegt werden, dass das absolute Datumsformat (12/03/2035) oder das relative Datumsformat (heute, Montag) verwendet wird.
brandembassy('setDateFormat', 'date_format');
// date_format can be 'absolute' or 'relative'
Gebietsschema festlegen
Legt das Gebietsschema für Übersetzungen im Chatfenster fest.
brandembassy('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 Kontakt Fallinformationen an.
brandembassy('showCaseInfo');
Schaltfläche "Transkript senden" ein-/ausblenden
Wenn Sie die Schaltfläche Transkript senden sichtbar machen, müssen Sie den Chatkanal so konfigurieren, dass Kontakte das Chatprotokoll an sich selbst senden können. Konfigurieren Sie diese Option für Chatnachrichten oder Live-Chat.
brandembassy('hideSendTranscript');
brandembassy('showSendTranscript');
Systemmeldungen anzeigen/ausblenden
Blendet Systemmeldungen wie den Agentenzuweisungsverlauf ein oder aus.
brandembassy('chat','hideSystemMessages');
brandembassy('showSystemMessages');
Nutzungsbedingungen
Sie können den Kontakten im Chat-Fenster ein Dokument mit den Nutzungsbedingungen zur Verfügung 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 Kontakte darauf klicken. Die On-Click-Aktion kann die Nutzungsbedingungen als anzeigen:
- Ein internes Fenster
- Ein externer Link
// Internal Modal Window
brandembassy('showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');
// External Link
brandembassy('showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');
// If you want to explicitely disable this feature, you can use
brandembassy('hideTermsOfUse');
Um das Aussehen der Schaltfläche oder des internen Fensters anzupassen, verwenden Sie die auf dieser Seite beschriebenen CSS-API-Aufrufe.
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 Kundenkarteen 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 JavaScript-Aufruf enthaltenen Daten ausgefüllt.
So definieren Sie den Wert eines eigenen Fallfeldes:
brandembassy('setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');
So definieren Sie den Wert eines eigenen Feldes für eine Kundenkarte:
brandembassy('setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');
Chatbezeichnungen und Phrasen anpassen
Sie können viele der Bezeichnungen und Phrasen, die digitale Chatkanäle verwenden, anpassen und die Anpassungen definieren. Wenn Sie die Phrasen oder Bildschirmbezeichnungen dynamisch ändern müssen, verwenden Sie diese JavaScript-Aufrufe.
So ändern Sie eine einzelne Nachricht oder eine Bezeichnung:
brandembassy('setTranslation', 'key', 'your translation');
So ändern Sie mehrere Meldungen oder Bezeichnungen:
brandembassy('setTranslations', {
key1: 'your custom label',
key2: 'your custom message'
});
![Geschlossen](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
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.
Schlüssel | Standardbezeichnung/Nachricht |
---|---|
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! |
stornieren | Abbrechen |
caseNumber | Fall #{caseNumber} |
ändern | Ändern |
chattedWith | Sie hatten gerade einen Chat mit |
commonErrorText | Es ist ein unerwarteter Fehler aufgetreten. Versuchen Sie es später erneut. |
fertig | Fertig |
dragAndDropDropzone | Ziehen Sie Dateien hierher, um sie zu senden |
dragAndDropDropzoneRejected | Datei kann nicht hochgeladen werden :( |
EmailLabel | |
Chat beenden | Chat beenden |
endChatTitle | Möchten Sie diese Unterhaltung wirklich beenden? |
endGame | Spiel beenden |
Ende | 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 |
laden | 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 |
Neuversuch | 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} |
Thema | 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 |
warten | 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. |
ihrNameLabel | Ihre Name |
Benutzerdefiniertes Felds übersetzen
Sie können im Chatfenster angezeigte benutzerdefinierte Felder übersetzen.
brandembassy('chat', 'setCustomTranslations', {
myCustomFieldATranslationKey: "Custom field value A",
myCustomFieldBTranslationKey: "Custom field value B",
});
Aufrufe für das Erscheinungsbild des Chatfensters
Sie können das Aussehen des Chat-Fensters ändern.
Symbol "Chat schließen"
Mit der Einstellung "true" wird im Fenster das Symbol X statt der Option "Chat beenden" im Einstellungsmenü angezeigt.
brandembassy('enableCloseIcon', true);
Zugewiesenen Agenten ausblenden
brandembassy('hideAssignedAgent');
Kopfzeile ausblenden
brandembassy('hideHeader');
Popups ausblenden
brandembassy('hidePopups');
Kunden-Avatar anzeigen
brandembassy('showCustomerAvatar');
Die Schaltfläche Senden anzeigen
brandembassy('chat','showSendButton');
Größe
Passt die Breite und Höhe des Chat-Fensters an. Sie können absolute oder relative Einheiten verwenden, die von der CSS-Spezifikation unterstützt werden.
brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');
Vollständiger Anzeigemodus
brandembassy('setFullDisplay');
// OR
brandembassy('chat','setWindowWidth', '100%');
brandembassy('chat','setWindowHeight', '100%');
Position und Versatz
Der Aufruf setPositionX definiert die linke oder rechte Seite des Bildschirms als Startposition. Die Aufrufe setOffsetX und setOffsetY legen fest, um wie viele Pixel das Chatfenster horizontal bzw. vertikal vom Startpunkt versetzt ist.
// set horizontal starting position
brandembassy('setPositionX', 'right');
// set horizontal and vertical offset
brandembassy('setOffsetX', '40'); // default = 20
brandembassy('setOffsetY', '40'); // default = 20
Zeichenbegrenzung für das Antwortfeld festlegen
brandembassy('setReplyBoxLimit', '280'); // default = null
Benutzerdefiniertes CSS mit Datenauswahlen
Sie können das Erscheinungsbild des Chatfensters durch Hinzufügen Ihres eigenen CSS anpassen. Geben Sie den Teil des Chatfensters, den Sie gestalten möchten, mit einem Attribut data-selector an. Die folgende Dropdown-Liste enthält eine Liste aller Komponenten, die Sie mit dem data-selector-Attribut auswählen können. Mit Datenselektoren können Sie den Teil des Chat-Fensters angeben, auf den Sie das benutzerdefinierte CSS anwenden möchten. Fügen Sie nach dem data-selector Ihren Stil in geschweiften Klammern hinzu. Wenn Sie mehrere Elemente gestalten möchten, müssen Sie Ihren gesamten CSS in einem einzigen JavaScript-Aufruf hinzufügen. Wenn Sie denselben JavaScript-Aufruf mehrmals verwenden, setzt der letzte JavaScript-Aufruf alle vorherigen CSS außer Kraft. Sie können CSS für Chat auch direkt in CXone anpassen.
Um benutzerdefiniertes CSS mit Datenauswahlen hinzuzufügen, verwenden Sie diesen JavaScript-Aufruf als Referenz:
brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important}
[data-selector="CONTENT"] {background: green !important}`);
![Geschlossen](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
- 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; }
![Geschlossen](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');
![Ein Beispiel dafür, wie der benutzerdefinierte CSS-Beispielcode das Chat-Fenster verändert, indem der Hintergrund jeder Nachricht schwarz dargestellt wird.](images/loc_chatapicustomcssex.png)
Fensterkomponenten können aus mehreren verschachtelten Blöcken bestehen. Die in diesem Abschnitt aufgeführten Komponentenselektoren benennen die Wurzel der einzelnen Komponenten. Wenn Sie CSS auf einen der verschachtelten Blöcke einer Komponente anwenden möchten, verwenden Sie die Entwicklerkonsole, um die Komponente zu untersuchen, damit Sie den richtigen Block auswählen können.
Proaktive Aktionen
Mit den Aufrufen in diesem Abschnitt können Sie basierend auf dem Kundenverhalten proaktiv Interaktionen starten.
Ausführungsauslöser
Startet den Auslöser für einen automatischen Ablauf, der durch trigger_id definiert ist.
brandembassy('executeTrigger', 'trigger_id');
Besucherereignis festlegen
Speichert das definierte Kundenverhalten (das Ereignis) zu Berichterstattungszwecken. Wenn dieser Aufruf mit CXone Mobile SDK verwendet wird, wird event_type zu custom_event_type geändert.
brandembassy('setVisitorEvent', 'event_type', 'custom_event_data');
Besuchervariable festlegen
Speichert die definierten Kundeninformationen zu Berichterstattungszwecken.
brandembassy('setVisitorVariable', 'variable_identifier', 'variable_value');
Conversion speichern
Speichert das Kundenverhalten zu Berichterstattungszwecken als Conversion.
brandembassy('storeConversion', 'conversion_type', 'conversion_value', 'conversion_date');
// conversion_date is optional, default is now
Websitebesucher-Tags
Der Inhalt dieses Abschnitts bezieht sich auf ein Produkt oder eine Funktion in kontrollierter Freigabe (CR). Wenn Sie nicht Teil der CR-Gruppe sind und weitere Informationen wünschen, wenden Sie sich an Ihren CXone Account Representative.
Sie können Kontakte, die ein bestimmtes Verhalten auf Ihrer Website zeigen, mit Tags kennzeichnen. Diese Funktion verwendet Tags aus Digital Experience und erfordert Guide.
So fügen Sie einem Kontakt Tags hinzu:
brandembassy('assignTag', 'tagID');
So entfernen Sie Tags von einem Kontakt:
brandembassy('removeTag', 'tagID');
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
brandembassy('getOngoingThreads');
Erkennen von laufenden Kontakten im Chat-Fenster
brandembassy('getOngoingContact')
Push-Benachrichtigung für bestimmte Chat-Ereignisse erhalten
![Geschlossen](../../../../Skins/Default/Stylesheets/Images/transparent.gif)
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:
brandembassy('onPushUpdate', 'event', callback);
Um eine Benachrichtigung für mehr als ein Chat-Ereignis zu erhalten:
brandembassy('onPushUpdate', ['event', 'event', 'event'], callback);
Um eine Benachrichtigung für alle Chat-Ereignisse zu erhalten:
brandembassy('onAnyPushUpdate', callback);
Integration in Android- oder iOS-Anwendungen
Sie können digitalen Chat in Android- oder iOS-Apps integrieren. Die native Anwendung muss WebView verwenden, wo der JavaScript-Initialisierungscode hinzugefügt wird. Dieser Beispielcode verwendet JavaScript von dieser Seite, um das Aussehen und Verhalten der Chatfunktion zu ändern:
<script async type=”text/javascript”>
(function(i,s,o,r,g,v,a,m){g=v?g+'?v='+v:g;i['BrandEmbassy']=r;
i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};i[r].l=+new Date();
a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;
a.src=g+'?'+Math.round(Date.now()/1000/3600);m.parentNode.insertBefore(a,m)
})(window,document,'script','brandembassy','https://livechat-static.brandembassy.com/3/chat.js');
//init of Livechat
brandembassy(‘init’, BRAND_HASH);
// hiding unwanted UI elements
brandembassy('hideHeader');
brandembassy('hidePopups');
// stretching livechat to full width and height
brandembassy('setFullDisplay');
// Customer's name
brandembassy('setCustomerName', 'CUSTOMER_NAME');
// Other optional Custom Fields
brandembassy('setCustomField', 'CUSTOM_FIELD_IDENT', 'CUSTOM_FIELD_VALUE');
// Start Chat
brandembassy('openChatWindow');
brandembassy('autoStartSession');
</script>