Rich-Messaging-Funktionen wie Schaltflächen und Karussells werden von Salesforce nicht unterstützt. Daher haben wir für Sie eigene Skripte erstellt, die Sie in Salesforce als statische Ressourcen hinzufügen können, um Schaltflächen als Rich-Nachrichten in Konversationsflüssen zu aktivieren. Dies sollte von einem Salesforce Admin durchgeführt werden.
- Skripts
- Lightning Component
- Salesforce-Einstellungen
- HTML aus Chatprotokoll entfernen
- Empfohlene Anpassungen
Plug-ins
Diese Skripts aktivieren alle Anpassungsfunktionen und das CSS für die Darstellung von Rich-Messaging.
Plug-in herunterladen
- Laden Sie die Datei assets.zip hier herunter
- Entpacken Sie die ZIP-Datei. Sie finden einen Ordner namens Rich-Message-Plugin. Dort sehen Sie zwei Dateien:
- CustomEvents_AddButtons.js
- CustomEvents_AddButtons_Stylesheet.css
Laden Sie das Plug-in hoch
Die beiden Dateien müssen als statische Ressourcen hinzugefügt werden. Gehen Sie hierzu wie folgt vor:
- Gehen Sie in Salesforce zu Einrichten > Angepasster Code > Visualforce Pages –> Developer Console (neues Fenster öffnen)
- Klicken Sie im neuen Fenster auf Datei > Neu > Statische Ressource
- Legen Sie die Felder wie folgt fest:
-
Name: CustomEvents_AddButtons
- Hinweis - (Sie können dies bei Bedarf umbenennen. Dies ist die Referenz, die Sie später im Widget-Code verwenden; die .js- bzw. .css-Datei ist nicht erforderlich.)
- MIME-Typ: text/javascript oder text/css, je nachdem, welche Datei Sie hochladen
-
Name: CustomEvents_AddButtons
- Klicken Sie auf Einreichen.
- Wiederholen Sie Schritt 2–4 für die Datei CustomEvents_AddButtons_Stylesheet.css
Chat-Widget so bearbeiten, dass es auf das angepasste Plug-in verweist
- Machen Sie im Quellcode Ihrer Website das Snap-in-Widget-Snippet ausfindig
-
Fügen Sie oben die folgenden Zeilen hinzu
embedded_svc.init()
:
embedded_svc.settings.externalScripts = ["CustomEvents_AddButtons"];
embedded_svc.settings.externalStyles = ["CustomEvents_AddButtons_Stylesheet"];
Lightning Component
Die Lightning-Komponente aktiviert den Eingabeanzeiger und ersetzt die Standardkomponente der Chatnachricht durch eine Komponente, die die HTML-Logik versteht.
Lightning-Komponente herunterladen
In der ZIP-Datei, die Sie zuvor heruntergeladen haben, befindet sich ein Rich-Message-Lightning-Web-Component-Ordner.
Komponente installieren und bereitstellen
Wenn Sie eine Webkomponente zum ersten Mal bereitstellen, lesen Sie diesen Trial -Guide.
Installieren
-
Erstellen Sie das Projekt in VS Code. Hierzu müssen Sie die Salesforce Erweiterung aktivieren und die Salesforce CLI herunterladen
-
Erstellen Sie ein Projekt durch Auswahl von SFDX: Projekt erstellen aus der Ansicht > Befehlspalette
Übernehmen Sie die Standardvorlage und weisen Sie ihr den Projektnamenlwcchatpack
zu. -
Klicken Sie unter unterforce-app/main/default mit der rechten Maustaste auf den Ordner lwc und wählen Sie Folgendes aus SFTX: Lightning-Webkomponente erstellen
-
Geben Sie ein
lwcchatpack
für den Namen der neuen Komponente ein und übernehmen Sie die Standardeinstellungen -
Ersetzen Sie die automatisch erstellten Dateien durch die aus Google Drive heruntergeladenen Dateien und fügen Sie die neue CSS-Datei hinzu. Speichern Sie alles
-
Bereitstellen
-
-
Unter „Ansicht“ > Befehlspalette geben Sie Folgendes ein: SFTX: Org. autorisieren.
Wenn Sie dazu aufgefordert werden, akzeptieren Sie das Standardprojekt und drücken Sie die Eingabetaste, um den Standardalias zu übernehmen. Wenn Sie aufgefordert werden, Zugriff zu gewähren, klicken Sie auf Zulassen. -
Klicken Sie mit der rechten Maustaste auf Standard und wählen Sie SFDX: Diese Quelle für Org. bereitstellen.
-
Wenn die Bereitstellung für Ihren Code-Editor nicht funktioniert, können Sie sie über CLI bereitstellen, indem Sie Folgendes eingeben
cd Filepath/where/project/lives
sfdx force:source:deploy -p force-app/main/default
Salesforce-Einstellungen aktualisieren
Damit diese neue Komponente verwendet werden kann, muss sie im Chat-Widget aktiviert werden.
Dies wird durch den „eingebetteten Dienst“ gesteuert, den Sie bereits heute verwenden (das Widget, das Sie verwenden).
Zum Aktualisieren der Einstellungen navigieren Sie zu Einstellungen > Eingebettete Servicebereitstellung. Wählen Sie das relevante Widget aus, klicken Sie auf Anzeigen und bearbeiten Sie dann die Chat-Einstellungen.
Sie sehen dann den Abschnitt „Mit Lightning-Komponente anpassen“, in dem Sie die Standardkomponente „Chatnachricht“ durch die oben installierte Komponente ersetzen können. Denken Sie daran, den zuvor verwendeten Projektnamen „lwcchatpack“ zu verwenden.
HTML aus Chatprotokoll entfernen
Nachdem wir nun die Funktion für all diese coolen Anpassungen und umfangreichen Optionen hinzugefügt haben, möchten wir sicherstellen, dass das Chatprotokoll immer noch lesbar ist.
Wir können dies ändern, damit der HTML-Code dargestellt wird, indem wir einen Chatprotokoll-Auslöser hinzufügen.
Einrichten > Objekt-Manager > Chatprotokoll > Auslöser > Neu
trigger regexReplace on LiveChatTranscript (before insert, before update) {
for(LiveChatTranscript chatTranscript : Trigger.new){
if(String.isNotBlank(chatTranscript.Body)){
chatTranscript.Body=chatTranscript.Body.replaceAll('<','<').replaceAll('>','>').replaceAll('"','"').replaceAll('&','&');
}
}
}

Empfehlungen
Breite des Chatfelds anpassen
Für ein besseres Erlebnis empfehlen wir, die Breite des Chatfelds zu erhöhen. Als Mindestwert würden wir 350 Pixel empfehlen, ideal wären jedoch 450 Pixel.
Um dies anzupassen, suchen Sie im Widget-Code die folgende Zeile und stellen Sie den gewünschten Wert ein.
embedded_svc.settings.widgetWidth =
Standardfarbe und -schriftart anpassen
Machen Sie in der CSS-Datei im Widget-Code die Farbauswahl ausfindig. Standardmäßig ist sie orange, aber dies kann in der CustomEvents_AddButtons_Stylesheet.css-Datei angepasst werden, die wir zu Beginn hochgeladen haben.
Falls Sie die festgelegte Farbe überschreiben müssen, z. B. wenn Sie gelbe Sternchen bevorzugen, aber die restlichen Farben in Ihrem Marken-Violett, müssen wir nur das Stichwort important;
hinzufügen.