Chat-Kanäle anpassen mit JavaScript

Mit können Sie Agenten und Kontakte interagieren in EchtzeitLive-Chat und Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort wartenChat-NachrichtenJavaScript anpassen. CXone Mpower 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.

Beispiele anzeigen

The Jungle, eine Tochtergesellschaft von Classics, Inc., betreibt als Teil seiner Website einen Geschenkeladen. Der Administrator, Mowgli Kipling, hat die folgenden API-Aufrufe eingerichtet, um seinen Chat-Agenten die Arbeit mit Kunden des Geschenkartikelladens zu erleichtern:

• Benutzerdefinierte Besuchervariablen erfassen Informationen zu den Farben der Artikel, die der Kontakt auf den Seiten des Geschenkeshops anzeigt. Diese Informationen stehen dem Agenten dann zur Verfügung, wenn der Kontakt einen Chat initiiert.
• Benutzerdefinierte 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 Chat-Kanä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:

• Chat-Verhalten: Passen Sie das Verhalten des Chat-Fensters an. 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.
• Chat-Informationen: Passen Sie die im Chat-Fenster angezeigten Informationen an. Dazu gehören Dinge wie der Name des Kunden, das Bild des Agenten oder der Aktivitätsstatus.
• Benutzerdefinierte Felder, Beschriftungen und Ausdrücke: Definieren Sie benutzerdefinierte Felder oder passen Sie Feldbeschriftungen an. Sie können auch einen Alternativtext für die automatischen Nachrichten konfigurieren, die den Kontakten angezeigt werden.
• Darstellung des Chatfensters: Passen Sie die Darstellung 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 Maßnahmen: Passen Sie das Erlebnis mit proaktiven Maßnahmen basierend auf dem Kundenverhalten an.
• Weitere Funktionen: Sie können unter anderem Folgendes konfigurieren:
  • Die Host-Umgebung wird auf bestimmte Ereignisse aufmerksam gemacht.
  • Integration von digitalen Chatkanälen in iOS- oder Android-Apps.
  • Aktivieren der OAuth-Authentifizierung.

            cxone('chat','enableChatAlwaysOnline');

            brandembassy('enableChatAlwaysOnline');

Fügen Sie JavaScript Anrufe zu einem Chat-Kanal hinzu

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.

1. Klicken Sie auf den App-Selector und wählen SieACD.

2. Gehen Sie zu Digital > Digitale Kontaktpunkte.

3. Klicken Sie unter „Ihre Kanäle“ auf Website-Skript.
4. Kopieren Sie den JavaScript-Code von der Seite und fügen Sie ihn in ein Textbearbeitungsprogramm wie Notepad++ ein. Achten Sie darauf, die öffnenden und schließenden <script>-Tags einzubeziehen.

5. In Notepad++ direkt über dem schließenden</script> Fügen Sie dem Tag des eingefügten Codes die JavaScript Aufrufe hinzu, die Sie verwenden möchten. 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

   

6. Kopieren Sie das gesamte Skript und fügen Sie es ein, einschließlich der Eröffnungs- und Schlusszeilen.<script> tags, into the header of a page of your website.

7. Besuchen Sie die geänderte Seite und senden Sie Test-Chatnachrichten, um sicherzustellen, dass Ihre Anpassungen wie vorgesehen funktionieren.

8. Wenn es vollständig getestet ist und wie erwartet funktioniert, kopieren Sie das endgültige Skript in die Kopfzeile jeder Seite, die das Chat-Widget enthalten soll.

Chat-Verhalten JavaScript Anrufe

Mit den Anrufen in diesem Abschnitt können Sie das Verhalten von Chat-Fenstern ändern.

Chatfenster öffnen

Öffnet automatisch ein Chatfenster. Standardmäßig werden Chat-Fenster geöffnet, wenn ein Kontakt auf das Chat-Symbol klickt.

            brandembassy('openChatWindow');

Chatfenster 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 an, als ob Agenten verfügbar wären, auch wenn keine Agenten online sind.

            brandembassy('chat','enableChatAlwaysOnline');

Benutzerdefinierte Felder aus vorherigem Chat beibehalten

Sie können wählen, ob benutzerdefinierte Felder nach dem Beginn der Interaktion beibehalten oder aus dem lokalen Speicher gelöscht werden sollen. 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');

Senden Sie Postback-Daten von Adaptive Card

Studio Aktionen und Bots können Adaptive Cards per Chat 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 Card funktioniert im Bot oder der Aktion Studio, um Engagements mit Adaptive Card zu verwalten und zu beantworten. Der Handler wird aktiviert, wenn ein Benutzer mit Komponenten einer Adaptive Card 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 entsprechend antworten oder die Daten von Adaptive Card 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-Handlerbefehl Adaptive Card hinzufügen:

            adaptiveCardOnExecuteAction(actionId: string, callback: (action: node_modules/adaptivecards/src/card-elements.ts::Action) => void)

Befehl zum Senden von Nachrichten:

            sendMessage(messageContent: MessageContent)

Befehl zum Erstellen benutzerdefinierten Handlers:

					{
					"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 für eingehende 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 für ausgehende 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 eine OAuth fest fließen. OAuth ist ein Authentifizierungsprotokoll. Es ermöglicht, dass eine Anwendung in Ihrem Auftrag mit einer anderen interagiert, ohne dass Sie Ihre Passwörter preisgeben müssen. Dies muss vor der Chatinitialisierung aufgerufen werden.

            brandembassy('setAuthorizationCode', 'authorization_code');

Vorausgefüllte Felder für Umfragen vor der Kontaktaufnahme festlegen

            cxone('chat', setPrecontactSurveyPrefilledFields', ['fieldIdent1', 'fieldIdent2']);

Neue Chat-Sitzung automatisch starten

Erstellt eine neue Chat-Messaging- Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten oder Live-Chat- Agenten und Kontakte interagieren in Echtzeit-Sitzung, wenn aktuell keine läuft. Verwenden Sie diesen Aufruf auf weniger stark frequentierten Seiten Ihrer Website, um Ihre Mitarbeiter nicht mit Kontakten zu überhäufen.

Digital Experience 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.

Beim automatischen Starten einer Chat-Sitzung wird das Umfrageformular vor der Kontaktaufnahme ü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 in 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 konfiguriertDigital 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 Aufrufe in der angezeigten Reihenfolge:

Wenn Sie dem Skript weitere Aufrufe hinzufügen, muss autoStartSession immer der letzte Aufruf im Skript sein. 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 Chat-Sitzungen aktivieren

Sie können Kontakten erlauben, mehrere Chat-Sitzungen im selben Browser zu starten. 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 aktivieren, müssen Sie angeben, wie die Chat-Daten gespeichert werden. Sie haben zwei Möglichkeiten:

• localStorage: Daten bleiben im Browser bestehen, nachdem der Tab oder das Fenster geschlossen wurde. 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 den einzelnen Tab oder das einzelne Fenster gespeichert und dann gelöscht, wenn der Tab 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 Chat-Sitzungen zu ermöglichen, fügen Sie den Schlüssel storageType mit dem Wert sessionStorage hinzu, wie im folgenden Beispiel gezeigt.

Wenn Sie die Option „localStorage“ verwenden und dennoch den Konversationsverlauf löschen möchten, können Sie einen Ereignis-Listener erstellen, der die customerID nach Beendigung des Chats entfernt.

brandembassy(
	'init',
	'MY_BRAND_ID_123',
	'MY_CHANNEL_ID_321',
	undefined,
	{
		storageType: 'sessionStorage',
	},
);

Konversationsverlauf löschen

Entfernt den Konversationsverlauf, nachdem eine Chat-Konversation beendet wurde. 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 ersten automatisierten Kontaktnachricht

Digital Experience 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 die Konversation zu beginnen. Sie können den Text der ersten, automatisierten Nachricht auf drei Arten anpassen:

• Den Standard-Schaltflächentext überschreiben.

                brandembassy('sendFirstMessageAutomatically', 'Hello');

• Ändern Sie die ursprüngliche Nachricht dynamisch.

                brandembassy('setFirstAutomatedMessageContent', 'Hello, I have a question');

• Ändern Sie den Nachrichtentext auf der Seite „Übersetzungen“.

Erste automatisierte Nachricht für Kontakte sichtbar machen

Wenn der Kontakt die erste automatisierte Nachricht sehen soll, fügen Sie Ihrem Skript diesen Aufruf hinzu:

            brandembassy('hideFirstSentMessage', false);

Fallerstellung verzögern

Digital Experience 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.

Mit diesem Aufruf können Sie Digital Experience so konfigurieren, dass auf die tatsächliche erste Nachricht des Kontakts gewartet wird, bevor ein Fall erstellt wird:

            brandembassy('sendFirstMessageAutomatically', false);

Spielmodus aktivieren

Ermöglicht 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 Popup 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'

Chat-Informationen JavaScript Anrufe

Mit diesen Anrufen können Sie die Informationen anpassen, die den Kontakten während einer Chat-Sitzung zur Verfügung stehen.

Kundenidentitäts-ID abrufen

Gibt die eindeutige Kennung des Kunden im Chat zurück.

            brandembassy('getCustomerIdentityId');

Umfrageformular vor der Kontaktaufnahme ausblenden

Das Umfrageformular vor der Kontaktaufnahme wird zu Beginn einer Chat-Nachrichtensitzung Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten 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');

Warteschlangenzähler ausblenden

Der Warteschlangenzähler informiert einen Kontakt basierend auf seinem Stand in der Warteschlange des Agenten darüber, wie schnell ihm ein Agent helfen kann. 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, den Chat-Benachrichtigungston auszuschalten. 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');

Browser-Sprachübersetzungen überschreiben

Überschreibt die Spracheinstellungen des Browsers des Nutzers oder ein benutzerdefiniertes Gebietsschema durch eine festgelegte Übersetzung. 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.');

Agentenbild festlegen

Ändert dynamisch das im Chatfenster angezeigte Agentenbild. Standardmäßig verwendet Digital Experience 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');

Kundennamen festlegen

Der Kundenname ist ein Feld im Umfrageformular vor der Kontaktaufnahme, das 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 auf die Verwendung des absoluten Datumsformats (12.03.2035) oder des relativen Datumsformats (heute, Montag) eingestellt werden.

            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-Messaging-Kanäle Asynchroner Chat, bei dem Kontakte jederzeit eine Chat-Nachricht senden und auf eine Antwort warten. 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 Chat-Kanal so konfigurieren, dass Kontakte sich das Chat-Transkript selbst senden können. Konfigurieren Sie diese Option für Chatnachrichten oder Live-Chat.

            brandembassy('hideSendTranscript');
brandembassy('showSendTranscript');

Systemnachrichten anzeigen/ausblenden

Zeigt Systemnachrichten wie den Verlauf der Agentenzuweisung an oder blendet sie aus.

            brandembassy('chat','hideSystemMessages');
brandembassy('showSystemMessages');

Nutzungsbedingungen

Sie können Kontakten im Chatfenster ein Dokument mit 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 folgendermaßen 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 Erscheinungsbild der Schaltfläche oder des internen Fensters anzupassen, verwenden Sie die auf dieser Seite beschriebenen CSS-API-Aufrufe.

Benutzerdefinierte Felder, Beschriftungen und Ausdrücke

Benutzerdefinierte Felder erstellen und ausfüllen

Die benutzerdefinierten Felder, die Sie mit diesem Aufruf verwenden können, sind dieselben, 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 JavaScript-Aufruf enthaltenen Daten ausgefüllt.

So definieren Sie den Wert eines benutzerdefinierten Fallfelds:

            brandembassy('setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

So definieren Sie den Wert eines Kundenkarte benutzerdefinierten Felds:

            brandembassy('setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

Chat-Beschriftungen und -Ausdrücke anpassen

Sie können viele der Beschriftungen und Ausdrücke anpassen, die in digitalen Chat-Kanälen verwendet werden, sowie 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 Bezeichnung:

            brandembassy('setTranslation', 'key', 'your translation');

So ändern Sie mehrere Nachrichten oder Bezeichnungen:

            brandembassy('setTranslations', {
   key1: 'your custom label',
   key2: 'your custom message'
});

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

Geschweifte Klammern kennzeichnen Variablen, die das System durch tatsächliche Daten ersetzt. Zum Beispiel wird {caseNumber} durch die Fallnummer der Chatsitzung des Kontakts ersetzt.

Schlüssel	Standardbezeichnung/Nachricht
allAgentsForQueueAreBusy	Alle unsere für Ihre Warteschlange zuständigen Agenten 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!
abbrechen	Abbrechen
caseNumber	Fall #{caseNumber}
ändern	Ändern
chattedWith	Sie haben gerade gechattet mit
commonErrorText	Es ist ein unerwarteter Fehler aufgetreten. Versuchen Sie es später erneut.
done	Fertig
dragAndDropDropzone	Ziehen Sie Dateien hierher und legen Sie sie dort ab, um sie zu senden
dragAndDropDropzoneRejected	Datei kann nicht hochgeladen werden :(
EmailLabel	E-Mail
endChat	Chat beenden
endChatTitle	Möchten Sie diesen Chat wirklich beenden? Konversation?
endGame	Spiel beenden
ending	Chat wird beendet…
fileSendingFailed	Senden der Datei fehlgeschlagen
getTranscriptDescription	Transkript dieser Konversation an folgende E-Mail-Adresse senden:
getTranscriptLink	Chat-Transkript abrufen
invalidToken	Ungültig token
ipAddressBlocked	IP-Adresse ist blockiert
loading	Wird geladen …
loadPreviousButton	Vorherige Konversationen laden
messageLabel	Nachricht
networkErrorText	Es ist ein Netzwerkfehler aufgetreten. Versuchen Sie es noch einmal.
newCase	Neuer Fall
noAgentOnlineForQueue	Für Ihre Warteschlange ist momentan kein Agent verfügbar.
offline	Offline
offlineFormDesc	Wir sind momentan 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 starten, nennen Sie uns bitte Ihren Namen. Einer unserer Mitarbeiter wird Ihnen sofort weiterhelfen.
pleaseSelect	Bitte wählen Sie...
poweredBy	Powered by
preparingSession	Sitzung wird vorbereitet...
replyBoxPlaceholder	Hier schreiben, drücken<enter> senden
erneut versuchen	Erneut versuchen
sendFileTextSize	Bitte laden Sie Dateien hoch, die kleiner sind als die von {filesize}
sendFileTextSupportedFormat	unterstützten Formate.
sendFileTextSupportedFormatDesc	Bilder, Videos, {fileFormats}
sendMessageButton	Nachricht senden
sendNewEmail	Neue E-Mail senden
sendTranscript	Transkript senden
snakeWaiting	Sie befinden sich {queue} in der Warteschlange.
startChatInPopup	Fragen Sie uns!
startNewChat	Neuen Chat starten
statusVerbindung wird wiederhergestellt	Versuchen Sie, eine Verbindung herzustellen?
surveyErfolgreich gesendet	Danke für Ihr Feedback!
systemChattingWith	Sie chatten jetzt mit {name}
topic	Thema
transciptSentFailed	Senden fehlgeschlagen.
tranciptSuccesfullySent	Transkript erfolgreich gesendet!
tryAgainButton	Erneut versuchen
unexpectedError	Unerwarteter Fehler.
validationInvalidEmail	Die E-Mail-Adresse ist ungültig.
validationMandatory	Dieses Feld ist obligatorisch.
validationShorterName	Bitte verwenden Sie einen kürzeren Namen.
validationShortMessage	Ihre Nachricht ist zu kurz.
waiting	Warten...
waitingDescription	Einer unserer Mitarbeiter wird sich in Kürze mit Ihnen in Verbindung setzen.
waitingFooter	Treffer<spacebar> um die Wartezeit zu verkürzen.
waitingForAgent	Warten auf Agenten...
waitingInQueue	Warten auf Agenten. Sie sind {queue} in der Warteschlange.
yourNameLabel	Ihr Name

Benutzerdefinierte Felder übersetzens

Sie können benutzerdefinierte Felder übersetzen, die im Chatfenster angezeigt werden.

            brandembassy('chat', 'setCustomTranslations', {
    myCustomFieldATranslationKey: "Custom field value A",
    myCustomFieldBTranslationKey: "Custom field value B",
});

Darstellung des Chat-Fensters bei Anrufen

Sie können die Darstellung des Chat-Fensters ändern.

Symbol „Chat schließen“

Wenn der Wert auf „True“ gesetzt ist, wird im Fenster anstelle der Option „Chat beenden“ im Einstellungsmenü ein X-Symbol angezeigt.

            brandembassy('enableCloseIcon', true);

Zugewiesenen Agenten ausblenden

            brandembassy('hideAssignedAgent');

Kopfzeile ausblenden

            brandembassy('hideHeader');

Popups ausblenden

            brandembassy('hidePopups');

Kundenavatar anzeigen

            brandembassy('showCustomerAvatar');

Schaltfläche „Senden“ anzeigen

            brandembassy('chat','showSendButton');

Größe

Passt die Breite und Höhe des Chatfensters an. Sie können absolute oder relative Einheiten verwenden, die von der CSS-Spezifikation unterstützt werden.

Vollbildmodus

Position und Offset

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 Antwortfeld festlegen

            brandembassy('setReplyBoxLimit', '280'); // default = null

Benutzerdefiniertes CSS mit Datenselektoren

Sie können das Erscheinungsbild des Chatfensters anpassen, indem Sie Ihr eigenes CSS hinzufügen. 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 Mpower anpassen.

Um benutzerdefiniertes CSS mit Datenselektoren 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}`);

Verfügbare Datenselektoren

• AKTIVITÄTSLEISTE
• AGENT_MESSAGE
• AGENT_MESSAGE_BUBBLE
• AVATAR
• INHALT
• KUNDENNACHRICHT
• KUNDENNACHRICHTENBLASE
• TRENNZEICHEN
• DROPDOWN_MENU
• ÜBERSCHRIFT
• EINGABE
• IST_TYPING
• MESSENGER
• POPUP
• VORKONTAKT_UMFRAGE
• BESCHREIBUNG DER VORKONTAKTUMFRAGE
• PRIMARY_BUTTON
• ANTWORT_BOX
• SEKUNDÄRE_TASTE
• SEND_BUTTON
• TEXTAREA
• TEXT_BUTTON
• WIDGET
• WINDOW

Beispiel für einen benutzerdefinierten CSS-API-Aufruf anzeigen

Der folgende JavaScript Aufruf führt zu Chat-Blasen mit schwarzem Hintergrund und weißem Text:

 brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');

Dieses Bild zeigt die Ergebnisse des Beispiel-API-Aufrufs:

Proaktive Aktionen

Die Anrufe in diesem Abschnitt ermöglichen es Ihnen, Kunden basierend auf ihrem Verhalten proaktiv in einen Chat einzubeziehen.

Trigger ausführen

Startet den durch definierten Workflow-Automatisierungs-Triggertrigger_id.

            brandembassy('executeTrigger', 'trigger_id');

Besucherereignis festlegen

Speichert das definierte Kundenverhalten (das Ereignis) zu Berichtszwecken. Wenn dieser Aufruf mit 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 für Berichtszwecke.

            brandembassy('setVisitorVariable', 'variable_identifier', 'variable_value');

Store-Conversion

Speichert das Kundenverhalten als Conversion für Berichtszwecke.

            brandembassy('storeConversion', 'conversion_type', 'conversion_value', 'conversion_date'); 
// conversion_date is optional, default is now

Webbesucher-Tags

Sie können Kontakte taggen, die auf Ihrer Website ein bestimmtes Verhalten zeigen. Diese Funktion verwendet Tags aus Digital Experience und erfordert Guide.

So fügen Sie einem Kontakt ein Tag hinzu:

            brandembassy('assignTag', 'tagID');

So entfernen Sie ein Tag 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 Chat-Ereignisse eintreten.

Aktive Threads im Chat-Fenster erkennen

            brandembassy('getOngoingThreads');

Laufenden Kontakt im Chat-Fenster erkennen

            brandembassy('getOngoingContact')

Push-Benachrichtigungen für bestimmte Chat-Ereignisse erhalten

Klicken Sie hier, um kompatible Ereignisse anzuzeigen

Ersetzen Sie in den folgenden Beispielen „Ereignis“ durch eine der folgenden Eingaben.

• Zuweisung des Falls zur Routing-Warteschlange geändert

• Seitenaufruf erstellt

• Nachricht erstellt

• MessageDeliveredToUser

• MessageDeliveredToEndUser

• Nachricht vom Benutzer gesehen

• NachrichtGesehenVomEndbenutzer

• Nachricht gelesen geändert

• Nachricht in Fall hinzugefügt

• Falleingangszuständigkeit geändert

• Fall erstellt

• Fallstatus geändert

• SenderTypingGestartet

• SenderTypingEnded

• NachrichtNotiz erstellt

• ContactRecipientsChanged

So erhalten Sie eine Benachrichtigung für ein Chat-Ereignis:

            brandembassy('onPushUpdate', 'event', callback);

So erhalten Sie eine Benachrichtigung für mehr als ein Chat-Ereignis:

            brandembassy('onPushUpdate', ['event', 'event', 'event'], callback);

So erhalten Sie eine Benachrichtigung für alle Chat-Ereignisse:

            brandembassy('onAnyPushUpdate', callback);

In Android- oder iOS-Anwendungen integrieren

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 die JavaScript von dieser Seite, um das Aussehen und Verhalten der Chat-Funktion 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>