Die Guide-Benutzeroberfläche konfigurieren

Guide verwendet das Standard-Branding und die Standard-Kanalschaltflächen, mit denen Sie das Erscheinungsbild des Guide-Widgets auf Ihrer Website festlegen.

Bewährte Verfahren

  • Arbeiten Sie mit Ihrer Marketingabteilung zusammen, um Bilder für die Schaltflächen und zu Ihrer Website passende Farben auszuwählen.

  • Verwenden Sie einheitliche Schaltflächen und Branding-Elemente auf Ihrer gesamten Website.

  • Wenn Sie mehrere Websites haben, bestimmen Sie, ob ein eindeutiges Branding für jede Website definiert werden muss.

  • Damit die Standardfarbe Ihres Brandings verwendet wird, legen Sie keine Theme color fest, wenn Sie Schaltflächen oder Vorlagen definieren.

  • Um die Standardfarbe des Brandings zu übergehen, können Sie unterschiedliche Farben für bestimmte Schaltflächen oder Vorlagen festlegen. Beachten Sie Folgendes:

    • Wenn Sie eine Theme color für eine Vorlage festlegen, überschreibt diese Farbe die Einstellung für die Markenfarbe.

    • Wenn Sie eine Theme color für eine Vorlage und eine Theme color für eine Schaltfläche festlegen, hat die Schaltflächenfarbe Vorrang vor den Vorlagen- und Markenfarben.

  • Für eine anspruchsvollere Gestaltung können Sie die Guide-APIs verwenden oder mit Ihrem Kundenbetreuer zusammenarbeiten, um ein benutzerdefiniertes Erscheinungsbild zu erstellen.

Branding erstellen

Mit dem Branding legen Sie fest, welche Farben standardmäßig für Vorlagen, Schaltflächen und proaktive Angebote verwendet werden. Guide stellt das Default-Branding bereit, das Sie nach Ihren Vorstellungen anpassen können. Falls nötig, können Sie mehrere Brandings erstellen. Wenn Sie zum Beispiel planen, Guide-Vorlagen auf verschiedenen Websites anzubieten, können Sie eindeutiges Branding für jede Website verwenden. Verwenden Sie beim Definieren der Regel für die Anzeige der Vorlage oder des proaktiven Angebots die Aktion Set Guide Branding, um das Branding zu bestimmen, das verwendet werden soll.

  1. Klicken Sie auf den App-Selector Symbol für die App-Auswahl und wählen SieGuide.

  2. Klicken Sie auf Branding.

  3. Klicken Sie auf New Branding.

  4. Geben Sie einen eindeutigen Markennamen für Branding Title ein.

  5. Stellen Sie Theme Color auf die primäre Farbe ein, die für das Guide-Widget verwendet werden soll. Stellen Sie die Farbe durch Eingabe eines Hexadezimalwerts oder Klicken auf den Farbtropfer und Auswählen einer Farbe ein.

    Die Theme Color wird für Folgendes verwendet:

    • Die Hintergrundfarbe der Kopfzeile.

    • Die Minimieren-Schaltfläche.
    • Den Hintergrund der Kanal-Schaltfläche.

    Sie wird verwendet, außer:

    • Eine Kanal-Schaltfläche stellt eine Themenfarbe ein, die die Branding-Farbe außer Kraft setzt.

    • Eine Vorlage stellt eine Themenfarbe ein, die die Branding-Farbe außer Kraft setzt.

    • Sie stellen weitere Branding-Präferenzen neben den primären Einstellungen ein. Wenn Sie zum Beispiel eine Schaltflächenfarbe für proaktive Angebote festlegen.

  6. Stellen Sie Font Color auf die Farbe ein, die für Text verwendet werden soll, der im Guide-Widget erscheint. Die Farbe wird für Text in der Kopfzeile und den Pfeil, der in den Schaltflächen "Minimieren" und "Zurück" zu sehen ist, verwendet.

    Zur Unterstützung von Sehbehinderten sollten Sie für ein Kontrastverhältnis von 4.5:1 zwischen Theme Color und Font Color sorgen. Für das Prüfen des Kontrasts stehen Online-Tools zur Verfügung.

  7. Optional können Sie das Branding mithilfe der Registerkarten General, Guide Template, Knowledge Base und Proactive Offer noch genauer einstellen.

    GeneralTabs
    Feld Details
    Width (EM)

    Die Breite des Guide-Widgets in ems. Die Standardbreite beträgt 23,125 ems.

    Height (EM)

    Die Höhe des Guide-Widgets in ems. Die Standardhöhe beträgt 40 Ems.
    Close Button Icon Color Die Farbe, die für das Symbol für das Schließen des Widgets verwendet werden soll.
    Close Button Background Color Die Hintergrundfarbe, die für das Symbol für das Schließen des Widgets verwendet werden soll.
    Guide TemplateTabs
    Feld Details
    Background Color Die Hintergrundfarbe, die für Kundenportal-Vorlagen verwendet werden soll.

    Font and Icon Color

    Die Schriftart und Symbolfarbe, die für Kundenportal-Vorlagen verwendet werden sollen.
    Heading Font Size (EM)

    Die für Kundenportal-Vorlagen zu verwendende Überschriftengröße in ems.

    Wählen Sie für optimale Ergebnisse eine Kundenportal-Vorlage für die Vorschau und passen Sie dann die Schriftgröße der Überschrift an, falls nötig.
    Subheading Font Size (EM)

    Die für Kundenportal-Vorlagen zu verwendende Schriftgröße der Unterüberschrift in ems.

    Wählen Sie für optimale Ergebnisse eine Kundenportal-Vorlage für die Vorschau und passen Sie dann die Schriftgröße der Unterüberschrift an, falls nötig.
    Knowledge BaseTabs
    Feld Details
    Background Color Die Hintergrundfarbe, die beim Anzeigen von Wissensbasisartikeln verwendet werden soll.

    Font and Icon Color

    Die Schriftart und Symbolfarbe, die beim Anzeigen von Wissensbasisartikeln verwendet werden sollen.
    Proactive OfferTabs
    Feld Details
    Heading Font Size (EM)

    Die zu verwendende Schriftgröße in ems für eine proaktive Angebotsüberschrift.

    Betrachten Sie für optimale Ergebnisse das Vorschaubild des proaktiven Angebots und passen Sie dann die Schriftgröße der Überschrift an, falls nötig.

    Body Text Font Size (EM)

    Die Schriftgröße in ems, die für den Fließtext eines proaktiven Angebots verwendet werden soll.

    Betrachten Sie für optimale Ergebnisse das Vorschaubild des proaktiven Angebots und passen Sie dann die Schriftgröße des Haupttexts an, falls nötig.
    Header Color Die Farbe, die für den Kopfzeilenbereich des proaktiven Angebots verwendet werden soll.
    Background Color Die Farbe, die für den Hintergrund des proaktiven Angebots verwendet werden soll.
    Font Color Die Schriftfarbe, die für das proaktive Angebote verwendet werden soll. Dies beinhaltet den Kopfzeilentext und den Haupttext.
    Primary Button Background and Font Color Hintergrund und Schriftfarbe für die primäre Call-to-Action-Schaltfläche in proaktiven Angeboten.
    Secondary Button Background and Font Color Hintergrund und Schriftfarbe für sekundäre Schaltflächen in proaktiven Angeboten.
    Position on Mobile Ob das proaktive Angebot im Top oder Bottom des Bildschirm eines mobilen Geräts angezeigt werden soll.
  8. Sie erhalten eine Vorschau der Branding-Einstellungen durch Auswählen einer Vorlage aus der Dropdown-Liste rechts auf der Seite. Oder klicken Sie für eine Vorschau des Brandings für proaktive Angebote auf die Registerkarte Proactive Offer. Wenn Sie diese Einstellungen anpassen, wird rechts eine Vorschau angezeigt.

  9. Klicken Sie auf Default, um dies zum Standard-Branding zu machen. Das Standard-Branding wird auf alle vorhandenen und neuen Vorlagen angewendet.

  10. Klicken Sie auf Save.

Arbeiten mit Ems

Guide verwendet ems, um die Größe von Schnittstellenelementen festzulegen. EMS ermöglichen eine reaktionsschnelle Größenanpassung von Schnittstellenelementen auf verschiedenen Geräten. Die Standardgröße eines Gevierts in Guide beträgt 13 Pixel. Sie können dies mithilfe der API setFontSize ändern.

Kanalschaltflächen erstellen

Erstellen Sie eine Schaltfläche für jeden KanalGeschlossen Eine Möglichkeit für Kontakte, mit Agenten oder Bots zu interagieren. Kanäle sind zum Beispiel Sprache, E-Mail, Chat, Social Media usw., den Sie in Guide bereitstellen möchten. Nachdem Sie die Schaltflächen erstellt haben, verknüpfen Sie sie mit den Einstiegspunkten. Beim Definieren einer Vorlage können Sie die Schaltfläche überschreiben, indem Sie eine andere Schaltfläche für den Einstiegspunkt auswählen.

  1. Klicken Sie auf den App-Selector Symbol für die App-Auswahl und wählen SieGuide.

  2. Klicken Sie auf Buttons. Die Seite „Schaltflächen“ wird angezeigt und listet alle zuvor erstellten Schaltflächen auf.

    Die Seite "Schaltflächen". Sie listet alle Schaltflächen auf, die Sie erstellt haben, sowie die Vorlagen und Einstiegspunkte, die die Schaltflächen verwenden.

  3. Klicken Sie auf New Button.

  4. Geben Sie einen Title für die Schaltfläche ein.

  5. Klicken Sie auf Upload , um die Icon für die Schaltfläche hochzuladen.

    Symbolbilder müssen kleiner als 50 KB sein. Als Format wird SVG empfohlen.

  6. Legen Sie eine Background Präferenz für die Schaltfläche fest.

    • Wählen Sie Solid , um eine Hintergrundfarbe für die Kanalschaltfläche zu verwenden. Lassen Sie das Feld Theme color leer, um die für die Marke eingestellte Standardhintergrundfarbe für Kanalschaltflächen zu verwenden. Oder verwenden Sie den Farbwähler, um eine andere Farbe als Hintergrundfarbe für die Schaltfläche auszuwählen. Stellen Sie die Farbe durch Eingabe eines Hexadezimalwerts oder Klicken auf den Farbtropfer und Auswählen einer Farbe ein.

    • Wählen Sie Transparent , um einen transparenten Hintergrund für die Schaltfläche zu verwenden.

  7. Klicken Sie auf Save.

Sprachvarianten für die Übersetzung hinzufügen

Sie können benutzerdefinierte Sprachvarianten erstellen, um sie mit Guide zu verwenden. Außerdem können Sie die Bezeichnungen für die Elemente der Guide-Benutzeroberfläche bearbeiten.

Übersetzungen für die Standardsprachen werden in einer zukünftigen Version verfügbar sein.

Benutzerdefinierte Sprache hinzufügen

  1. Klicken Sie auf den App-Selector Symbol für die App-Auswahl und wählen SieGuide.

  2. Klicken Sie auf Localization.

  3. Klicken Sie auf New Language, um eine neue Sprache hinzuzufügen.

    Feld Details
    Name Geben Sie einen Namen für die Sprache ein.

    Language

    Wählen Sie die Language aus der Dropdown-Liste aus.
    Country Wählen Sie die Country aus der Dropdown-Liste aus.
    Fallback Wählen Sie eine Fallback Sprache aus, die verwendet werden soll, wenn für ein bestimmtes Etikett keine Übersetzung vorhanden ist.
  4. Klicken Sie auf Save. Es werden die mit Guide bereitgestellten Standardbezeichnungen angezeigt.
  5. Geben Sie für jede Translation Key eine Translation Value ein. Dies ist der String, der Website-Besuchern im Guide-Widget angezeigt wird. Sie können den Translation Key für die Standardbezeichnungen in Guide nicht ändern.
  6. Bei Bedarf können Sie neue Übersetzungsschlüssel erstellen, indem Sie unten auf der Seite auf Hinzufügen klicken. Legen Sie die Translation Key und die Translation Value fest. Sie können den Translation Key für Bezeichnungen, die Sie selbst erstellen, bei Bedarf ändern. Achten Sie beim Hinzufügen neuer Übersetzungsschlüssel darauf, dass Sie Übersetzungen in allen Sprachen eingeben, die Sie Website-Besuchern anbieten.

  7. Klicken Sie auf Save (Speichern).

Bezeichnungen für eine Sprache bearbeiten

  1. Klicken Sie auf den App-Selector Symbol für die App-Auswahl und wählen SieGuide.

  2. Klicken Sie auf Localization.

  3. Klicken Sie neben der gewünschten Sprache auf Edit.

  4. Scrollen Sie zu der Bezeichnung, die Sie bearbeiten möchten, und ändern Sie den Translation Value. Sie können zum Beispiel den Text auf der Schaltfläche zum Starten des Chats von Begin Chat in Start Chatändern.

  5. Klicken Sie auf Save.

Mit einem Guide-Widget interagieren

Website-Besucher können mit einem Guide-Widget interagieren, indem sie mit der Maus oder über die Tastatur zwischen den Schaltflächen navigieren. Beachten Sie, dass die Tastaturnavigation für Besucher, die einen Mac mit dem Safari- oder Firefox-Browser verwenden, eingeschränkt ist, sofern die Navigation nicht im Browser aktiviert ist. Im Chrome-Browser funktionieren die Schaltflächen wie erwartet.