Welchen Plan habe ich
Add-on AI Agents – Advanced

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
    • Skripts in Salesforce herunterladen und hochladen
    • Chat-Widget so bearbeiten, dass es auf angepasste Skripts verweist
  • Lightning Component
    • Lightning-Komponente herunterladen
    • Komponente installieren und bereitstellen 
  • Salesforce-Einstellungen
    • Einstellung zur Bereitstellung des integrierten Chat-Widget-Dienstes aktualisieren
  • 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

  1. Laden Sie die Datei assets.zip hier herunter 
  2. 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:

  1. Gehen Sie in Salesforce zu Einrichten > Angepasster Code > Visualforce Pages –> Developer Console (neues Fenster öffnen)
  2. Klicken Sie im neuen Fenster auf Datei > Neu > Statische Ressource
  3. 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
  4. Klicken Sie auf Einreichen.
  5. 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

  1. Machen Sie im Quellcode Ihrer Website das Snap-in-Widget-Snippet ausfindig
  2. 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

  1. Erstellen Sie das Projekt in VS Code. Hierzu müssen Sie die Salesforce Erweiterung aktivieren und die Salesforce CLI herunterladen

    1. Erstellen Sie ein Projekt durch Auswahl von SFDX: Projekt erstellen aus der Ansicht > Befehlspalette

      Übernehmen Sie die Standardvorlage und weisen Sie ihr den Projektnamen lwcchatpack zu.

    2. 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

      vs_code_salesforce.png

    3. Geben Sie ein lwcchatpack für den Namen der neuen Komponente ein und übernehmen Sie die Standardeinstellungen

    4. 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

    1. 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.

    2. 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.

Screenshot_ 22.57_um_01.25.16.png

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('&lt;','<').replaceAll('&gt;','>').replaceAll('&quot;','"').replaceAll('&amp;','&'); 
}
}
}
image__37_.png


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.

Powered by Zendesk