Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Hinzufügen Ihrer Branding-Elemente zum integrierten Chat

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
  • Hinzufügen von Branding-Elementen zu Ihrem Kunden-Chat-Fenster
  • Testen Ihrer Web-Chat-Implementierung

Planen Ihrer Branding-Elemente

Maria möchte Sita und Roberto den Web-Chat zeigen, aber zunächst möchte sie sich vergewissern, dass sich das Kunden-Chat-Fenster nahtlos in das Branding der Website von Ursa Major Solar einfügt. Sie überlegt sich also ein paar Fragen an Sita. Anhand der Antworten kann sie dafür sorgen, dass alles wie gewünscht aussieht.
Frage Antwort
Welche Schriftart und welche Farben verwendet Ursa Major Solar in seinen Marketing-Materialien? In unseren Branding Guidelines steht, dass Ursa Major die Schriftart Salesforce Sans verwendet. Unsere Farben sind #006937, #565656 und #F5B335.
Verwendet Ursa Major Solar ein Logo? Ja, wir können das folgende Bild verwenden.Das Logo von Ursa Major Solar
Sollen wir einen Avatar für einen Agenten hinzufügen, der im Chat-Fenster für den Kunden angezeigt wird? Ja, wir können das folgende Bild verwenden.Der Agenten-Avatar für Ursa Major Solar

Verschönern mit Branding-Elementen

Maria hat nun alle erforderlichen Informationen zum Branding und wechselt zum integrierten Service-Setup, um die Farben, Schriftarten und Bilder von Ursa Major Solar hinzuzufügen. Anhand dieser Designelemente fügt sich das Chat-Fenster nahtlos in die Website ein.

Am besten führen wir die Schritte jetzt gleich zusammen mit Maria aus und fügen dem Chat-Fenster benutzerdefiniertes Branding hinzu.

Wir fügen zunächst unsere Bilder zu Salesforce hinzu, damit sie über Links verfügen, die wir im integrierten Service-Setup verwenden können. Das ist nicht erforderlich, wenn Sie Ihre Bilder bereits über einen öffentlichen Link hosten. Da wir eine Test-Website verwenden, können wir unsere Bilder als statische Ressourcen in Salesforce hochladen, um Links zu erstellen.

  1. Speichern Sie diese Grafiken für das Logo und den Agenten-Avatar auf Ihrem Desktop.
    1. Logobild: Das Logo von Ursa Major Solar
    2. Bild für Agenten-Avatar Der Agenten-Avatar für Ursa Major Solar
  2. Geben Sie unter Setup im Feld "Schnellsuche" den Text Statische Ressourcen ein und wählen Sie dann Statische Ressourcen aus.
  3. Klicken Sie auf Neu.
  4. Geben Sie den Namen Logo ein.
  5. Klicken Sie auf Datei auswählen und wählen Sie das gespeicherte Ursa Major Solar-Logo aus.
  6. Wählen Sie als Zielobjekt Öffentlich für die Cache-Steuerung aus.
  7. Klicken Sie auf Save (Speichern).
  8. Auf der Seite "Detail zur statischen Ressource" klicken Sie auf Datei anzeigen, um das Bild in einer neuen Registerkarte zu öffnen.Der Link zum Anzeigen der Dateien auf der Seite 'Detail zur statischen Ressource'
  9. Kopieren Sie den URL und fügen Sie ihn an einer sicheren Stelle ein. Sie können auch die Registerkarte geöffnet lassen, damit Sie den URL später kopieren können. Diesen URL benötigen Sie in Kürze.
  10. Wiederholen Sie die Schritte 3 bis 9 für das Agenten-Avatarbild (das Bild mit dem Gesicht einer Person). Geben Sie Agenten-Avatar als Name ein.
    Als Nächstes legt Maria die Farben im Chat-Fenster fest, damit diese mit dem Branding von Ursa Major Solar übereinstimmen.
  11. Geben Sie unter "Setup" im Feld "Schnellsuche" den Text Integrierter Service ein und wählen Sie dann Integrierte Service-Bereitstellungen aus.
  12. Klicken Sie auf den Pfeil neben Ihrer Bereitstellung für den integrierten Service und wählen Sie Ansicht aus.
  13. Klicken Sie neben "Branding" auf Bearbeiten.
  14. Wählen Sie Farben und eine Schriftart aus. Verwenden Sie die Live-Vorschau, um zu sehen, wo die Farben erscheinen. Branding-Optionen für Snap-ins
    1. Geben Sie für die primäre Markenfarbe und für die Farben der Navigationsleiste #006937 ein.
    2. Geben Sie für die sekundäre Markenfarbe #565656 ein.
    3. Lassen Sie die Auswahl "Salesforce Sans" für die Schriftart unverändert.
    4. Lassen Sie die primäre Kontrastfarbe unverändert.
  15. Klicken Sie auf Fertigstellen.
    Ganz einfach! Wir müssen jetzt nur noch ein paar Änderungen am Chat-Fenster vornehmen.
  16. Klicken Sie neben den Chat-Einstellungen auf Bearbeiten.
  17. Wenn der Pre-Chat-Slider auf "Aktiv" gesetzt ist, setzen Sie ihn auf Inaktiv.
  18. Klicken Sie neben "Zusätzliches Branding" auf Bearbeiten.
  19. Fügen Sie den URL für das Logobild im Feld Logo ein.
  20. Fügen Sie den URL für das Agenten-Avatarbild im Feld Agenten-Avatar ein.
  21. Klicken Sie auf Save (Speichern).

Nach nur einigen wenigen Klicks passt das Kunden-Chat-Fenster jetzt nahtlos zum Branding von Ursa Major Solar.

Probieren Sie es aus

Maria findet, dass es jetzt super aussieht, aber sie muss ihre Web-Chat-Implementierung noch testen.

Und so geht Maria beim Testen des Web-Chats vor.
  • Öffnen Sie die in der ersten Einheit erstellte Visualforce-Seite und zeigen Sie das Offline-Chat-Fenster an.
  • Öffnen Sie die vordefinierte Servicekonsole und gehen Sie online, indem Sie den Status Verfügbar – Chat im Dienstprogramm "Omnikanal" auswählen.
  • Aktualisieren Sie die Visualforce-Seite und klicken Sie auf das Chat-Fenster, um einen Chat zu starten.
  • Senden Sie als Kunde und als Agent Chat-Nachrichten, um sicherzustellen, dass alles korrekt funktioniert.
  • Beenden Sie den Chat entweder vom Kunden- oder vom Agenten-Chat-Fenster aus.

Machen Sie mit, um Ihre Web-Chat-Implementierung zu testen.

  1. Geben Sie unter "Setup" im Feld "Schnellsuche" den Text Visualforce ein und wählen Sie "Visualforce-Seiten" aus.
    Wenn Sie als Option keine Visualforce-Seiten sehen, sollten Sie sich vergewissern, dass Sie sich in Setup und nicht in Service-Setup befinden.
  2. Klicken Sie auf Popout-Symbol neben der Web-Chat-Visualforce-Seite, um sie in einer neuen Registerkarte oder einem neuen Fenster zu öffnen. Ihr Chat-Fenster zeigt in der rechten unteren Ecke eine Offline-Chat-Schaltfläche an.
    Hinweis

    Hinweis

    Ihr Chat-Fenster sieht vielleicht auf Ihrer Visualforce-Seite etwas seltsam aus, weil diese Seite weder Layout noch Formatierung hat. In einer tatsächlichen Website oder Community sieht es ungefähr so aus: Snap-in in einer Community

  3. Suchen und wählen Sie im App Launcher Servicekonsole aus.
    Hinweis

    Hinweis

    Verwenden Sie die vordefinierte Servicekonsole und keine von Ihnen selbst erstellte Konsolen-Anwendung. Hier haben wir während des Chat-Setup-Flows alles aktiviert.

  4. Öffnen Sie das Dienstprogramm "Omnikanal" und ändern Sie Ihren Status in Verfügbar - Chat. Jetzt können Sie als Agent Chats annehmen.Die verschiedenen Statustypen im Dienstprogramm 'Omnikanal' in der Konsole
  5. Kehren Sie zur Registerkarte mit Ihrer Visualforce-Seite zurück und aktualisieren Sie sie. Ihr Chat-Fenster zeigt eine Online-Chat-Schaltfläche an.
    Hinweis

    Hinweis

    Ihr Chat-Fenster sieht vielleicht auf Ihrer Visualforce-Seite etwas seltsam aus, weil diese Seite weder Layout noch Formatierung hat. In einer tatsächlichen Website oder Community sieht es ungefähr so aus: Online-Snap-in in einer Community

  6. Klicken Sie auf das Chat-Fenster, um einen Chat zu starten.
    Nach der Chat-Anforderung minimieren Sie das Kunden-Chat-Fenster, damit Sie das Logobild auf dem Chat-Fenster sehen.
    Tipp

    Tipp

    Haben Sie Schwierigkeiten dabei, einen Chat zu beginnen? Prüfen Sie den URL in Ihrer Visualforce-Seite. Endet der URL mit .visualforce.com anstelle von .force.com, müssen Sie https://*.visualforce.com in die Positivliste Ihrer CORS-Einstellungen aufnehmen.

  7. In der Konsole nehmen Sie die Chat-Anforderung im Dienstprogramm "Omnikanal" an. In der Konsole wird die Chat-Abschrift geöffnet.
  8. Chatten Sie eine Weile hin und her mit sich selbst.
    Sehen Sie sich im Kunden-Chat-Fenster die Farben von Ursa Major Solar und das Agenten-Avatar-Bild an.
  9. Beenden Sie den Chat entweder vom Agenten- oder vom Kunden-Chat-Fenster aus. Schließen Sie den Chat-Abschrift-Datensatz und die zugehörigen Datensätze in der Konsole.

Ist das nicht cool? Maria hat gerade einen Web-Chat eingerichtet und getestet – und das alles in wenigen Minuten.

Jetzt kann Maria Sita und Roberto den funktionierenden Web-Chat präsentieren. Sie freut sich schon darauf, ihnen zu zeigen, wie einfach das Chat-Gespräch für den Agenten und für den Kunden ist.