Sie befinden sich hier:
Verwenden der Vor-Chat-API zum Übergeben von Kundeninformationen an den Servicemitarbeiter auf einer Experience-Site
Senden Sie Endbenutzerdaten über die Vor-Chat-API an die Servicekonsole, um Servicemitarbeitern Kundeninformationen bereitzustellen, die eine Interaktion voranbringen.
Erforderliche Editionen
| Unterstützte Editionen anzeigen. | |
Dieser Artikel gilt für:
|
Erweiterte Web-Chat-Kanäle |
Dieser Artikel gilt nicht für:
|
"Erweiterter Chat in der Anwendung", "Erweiterter WhatsApp", "Erweiterter Facebook Messenger", "Standardmäßige und erweiterte SMS", "Erweiterte Apple Messages for Business", "Erweiterte LINE" und "Bring Your Own Channel" |
`
Dieses Rezept kombiniert allgemeine Anwendungsfälle als Beispiele für Daten, die Sie mithilfe der Vor-Chat-API an Servicemitarbeiter senden können. Übergeben Sie zunächst die Anmelde-ID des Endbenutzers an den Mitarbeiter, damit die Überprüfung erfolgt. Anschließend wird der Einkaufswagenwert des Kunden an den Servicemitarbeiter weitergegeben, um Verluste bei Großaufträgen zu vermeiden. Erstellen Sie zum Erreichen dieser Ziele benutzerdefinierte ausgeblendete Vor-Chat-Felder, die die Daten über einen Flow an benutzerdefinierte Salesforce-Felder weiterleiten. Bearbeiten Sie dann den Codeauszug und weisen Sie ihn an, die ausgeblendeten Vor-Chat-Felder automatisch auszufüllen.
Beachten Sie vor dem Erstellen dieses Rezepts die folgenden Einschränkungen:
- Es ist möglich, in einer Formelvorlage für automatische Antworten für "Unterhaltung starten", "Unterhaltung beenden" und "Inaktive Unterhaltung" auf Felder aus dem Objekt "Messaging-Sitzung" oder dem Objekt "Messaging-Benutzer" zu verweisen (da dieses mit "Messaging-Sitzung" verknüpft ist). Sie können in "Unterhaltung" nicht auf Felder aus den Objekten "Messaging-Sitzung" oder "Messaging-Benutzer" verweisen.
- Salesforce-Felder für benutzerdefinierte Objekte unterscheiden sich von benutzerdefinierten Vor-Chat-Feldern. Dieses Rezept verweist auf beide Feldtypen. Erfahren Sie mehr über die Beziehung und die Unterschiede zwischen diesen beiden Feldtypen.
- Erstellen Sie benutzerdefinierte Felder für Salesforce-Objekte. Erstellen Sie in diesem Beispiel ein Kunden-ID-Feld und ein Einkaufswagenwert-Feld für die Objekte der Messaging-Sitzung oder des Messaging-Benutzers.
- Wenn in Ihrer Servicekonsole das Objekt, in dem Sie die Felder gespeichert haben, nicht angezeigt wird, bearbeiten Sie das Layout, um Servicemitarbeitern einfachen Zugriff zu gewähren. In diesem Beispiel wird die Servicekonsole bearbeitet, um einfachen Zugriff auf die Objekte "Messaging-Sitzung" und "Messaging-Benutzer" zu gewähren.
- Erstellen Sie ausgeblendete Vor-Chat-Felder, um die Daten zu erfassen, die ab Schritt 1 an die benutzerdefinierten Salesforce-Felder gesendet werden. Erstellen Sie in diesem Beispiel in den Messaging-Einstellungen für den Kanal benutzerdefinierte Parameter namens "Kunden-ID" und "Shopping Cart Value" (Warenkorbwert) und wählen Sie sie dann in den Einstellungen für das Vor-Chat-Formular für integrierte Services als ausgeblendete Vor-Chat-Felder aus.
- Ordnen Sie Ihre benutzerdefinierten Vor-Chat-Felder Ihren benutzerdefinierten Salesforce-Feldern zu und füllen Sie die Salesforce-Felder dann mithilfe eines Flows aus. In diesem Beispiel wird das Vor-Chat-Feld "Kunden-ID" dem Salesforce-Feld "Kunden-ID" zugeordnet. Anschließend wird das Vor-Chat-Feld "Warenkorbwert" dem Salesforce-Feld "Warenkorbwert" zugeordnet. Dank der Flexibilität von Flows können Sie Daten kombinieren oder aufteilen oder bei Bedarf andere Objekte wie Kundenvorgänge oder Kontakte ausfüllen.
-
Erstellen Sie eine benutzerdefinierte LWC-Komponente, die die Benutzerinformationen abruft, und stellen Sie sie bereit.
- Im neu erstellten Ordner für die benutzerdefinierte LWC-Komponente finden Sie eine Vorlage der benutzerdefinierten Komponente.
-
Die Datei mit der Erweiterung ".js-meta.xml".
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>55.0</apiVersion> <isExposed>true</isExposed> <masterLabel>[give a component name here]</masterLabel> <description>Set logged in User details for Embedded Messaging component</description> <targets> <target>lightningCommunity__Page</target> <target>lightningCommunity__Default</target> </targets> </LightningComponentBundle> -
Die Datei mit der Erweiterung ".js".
import { LightningElement, wire } from 'lwc'; import { getRecord, getFieldValue } from 'lightning/uiRecordApi'; import Id from '@salesforce/user/Id'; import First_Name from '@salesforce/schema/User.FirstName'; import Last_Name from '@salesforce/schema/User.LastName'; import Email from '@salesforce/schema/User.Email'; const fields = [First_Name, Last_Name, Email]; export default class EmbeddedMessagingSetRecordUser extends LightningElement { userId = Id; user; @wire(getRecord, { recordId: '$userId', fields }) wiredRecord({ error, data }) { if (error) { let message = "Unknown error"; if (Array.isArray(error.body)) { message = error.body.map((e) => e.message).join(", "); } else if (typeof error.body.message === "string") { message = error.body.message; } console.error("Error loading user record:" + message); } else if (data) { this.user = data; console.log('before custom event'); var selectedEvent = new CustomEvent('userInfo', { detail: { fname: getFieldValue(this.user, First_Name), lname : getFieldValue(this.user, Last_Name), email: getFieldValue(this.user, Email) }, bubbles: true, composed: true }); // Dispatches the event. window.dispatchEvent(selectedEvent); } } } -
Die Datei mit der Erweiterung ".html".
<template></template>
- Ziehen Sie im Experience-Site-Generator Ihre benutzerdefinierte LWC-Komponente in die Vorlagenfußzeile.
-
Navigieren Sie zu Einstellungen → Erweitert → Head-Markup bearbeiten und fügen Sie das folgende Beispielskript in das Head-Markup ein.
<script> var fname, lname, email; window.addEventListener('userInfo', function(e){ console.log("userInfo received"); fname = e.detail.fname; lname = e.detail.lname; email = e.detail.email; }); window.addEventListener("onEmbeddedMessagingReady", e => { embeddedservice_bootstrap.prechatAPI.setVisiblePrechatFields({ "_firstName": { "value": fname, "isEditableByEndUser": true }, "_lastName": { "value": lname, "isEditableByEndUser": true }, "_email": { "value": email, "isEditableByEndUser": true } }); }); </script> -
Aktualisieren Sie Ihren Codeauszug für eingebettete Nachrichten und weisen Sie ihn an, die in Schritt 2 erstellten Vor-Chat-Felder automatisch auszufüllen. Der Code in diesem Beispiel verwendet die Vor-Chat-API, um die Kunden-ID und den Einkaufswagenwert automatisch an Ihre Vor-Chat-Felder zu senden. Beachten Sie vor dem Hinzufügen zu Ihrem Codeauszug die folgenden Einschränkungen.
- Der erste Abschnitt des Codes enthält ein Beispiel des Standardcodeauszugs für Ihre Bereitstellung des integrierten Service. Bei Ihnen sieht dies aufgrund Ihrer eindeutigen Bereitstellungs-ID und Ihres Namens etwas anders aus.
-
Fügen Sie zum Abschließen des Rezepts den Code hinzu, der mit der Kommentarzeile
Passing Web Context to Prechat - BEGINbeginnt. - Im ersten Abschnitt werden diesen Variablen statische Werte zugewiesen. Sie können sie jedoch ändern, um zu berücksichtigen, wie Sie diese Werte erhalten. Im nächsten Abschnitt werden die sichtbaren Vor-Chat-Felder ausgefüllt. Im letzten Abschnitt werden ausgeblendete Vor-Chat-Felder ausgefüllt.
- Beim Zuweisen der Werte werden unterschiedliche Codeeinstellungen verwendet. Beispielsweise sind der Vor- und Nachname gesperrt und können von Benutzern nicht bearbeitet werden.
- Ihre Seiten- oder Site-Vorlage muss über die Komponente "Integriertes Messaging" verfügen.
- Auf einer Experience-Site können Sie keinen Codeauszug direkt einfügen. Fügen Sie die Vor-Chat-API in das Kopfzeilen-Markup ein. Fügen Sie Ihren Code unter Erfahrungsgenerator → Einstellungen → Erweitert → Head-Markup bearbeiten hinzu.
-
Im Codebeispiel der Experience-Site ist kein Basiscodeauszug enthalten, beispielsweise die Funktion
initEmbeddedMessaging(). Dies liegt daran, dass ein solcher Basiscode bereits in der LWC-Komponente "Integriertes Messaging" enthalten ist. - Dieses Beispiel enthält eine Ereignisüberwachung für userInfo. Dadurch werden die Informationen eines angemeldeten Kunden direkt an das Vor-Chat-Formular gesendet, ohne dass der Kunde aufgefordert wird, sie erneut einzugeben. In diesem Beispiel können die Felder von Kunden bearbeitet werden. Sie können auch die Konfiguration isEditableByEndUser ändern, um sie zu sperren.


