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.

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.

Bild anzeigen
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.

Beispiel anzeigen


							<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"
					}
			}

Beispiel einer eingehenden Nachricht anzeigen


							{
							...,
							"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\"}}"
							}
							}
					}

Beispiel einer ausgehenden Nachricht anzeigen


							{
							"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

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');

Dynamische Änderung der Erstnachricht.


                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

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'
});

Klicken Sie hier, um die Meldungen und Bezeichnungen anzuzeigen, die Sie anpassen können.

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	E-Mail
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}`);

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; }

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

Klicken Sie hier, um kompatible Ereignisse anzuzeigen

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>