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 CXone Account Representative zusammenarbeiten, um ein benutzerdefiniertes Erscheinungsbild zu erstellen.

Branding erstellen

Der Inhalt dieses Abschnitts bezieht sich auf ein Produkt oder eine Funktion in kontrollierter Freigabe (CR). Wenn Sie nicht Teil der CR-Gruppe sind und weitere Informationen wünschen, wenden Sie sich an Ihren CXone Account Representative.

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 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 Guide Set Branding, um das Branding zu bestimmen, das verwendet werden soll.

  1. Klicken Sie auf den App-Selector 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.

    Ihre Standard-EM-Größe basierte auf CSS-Einstellungen oder Browsereinstellungen. Wählen Sie für optimale Ergebnisse eine Kundenportal-Vorlage für die Vorschau und passen Sie dann die Breite des Guide-Widgets an, falls nötig.

    Height (EM)

    Die Höhe des Guide-Widgets in ems.

    Ihre Standard-EM-Größe basierte auf CSS-Einstellungen oder Browsereinstellungen. Wählen Sie für optimale Ergebnisse eine Kundenportal-Vorlage für die Vorschau und passen Sie dann die Höhe des Guide-Widgets an, falls nötig.
    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 Überschriftsgröße, in ems, die für Kundenportal-Vorlagen verwendet werden soll.

    Ihre Standard-EM-Größe basierte auf CSS-Einstellungen oder Browsereinstellungen. 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 Schriftgröße der Unterüberschrift, in ems, die für Kundenportal-Vorlagen verwendet werden sollen.

    Ihre Standard-EM-Größe basierte auf CSS-Einstellungen oder Browsereinstellungen. 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 Schriftgröße in ems, die für die Überschrift eines proaktiven Angebots verwendet werden soll.

    Ihre Standard-EM-Größe basierte auf CSS-Einstellungen oder Browsereinstellungen. 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 Haupttext in einem proaktiven Angebot verwendet werden soll.

    Ihre Standard-EM-Größe basierte auf CSS-Einstellungen oder Browsereinstellungen. 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.

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.

View a short video on creating channel buttons.

  1. Klicken Sie auf den App-Selector und wählen SieACD.

  2. Gehen Sie zu Digital > Points of Contact Digital.

  3. Klicken Sie unter General channel features auf Guide.

  4. Scrollen Sie nach unten zum Abschnitt Buttons und klicken Sie auf Add button.

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

  5. Geben Sie einen Name für die Schaltfläche ein.

  6. Klicken Sie auf Choose File , um die Icon für die Schaltfläche hochzuladen.

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

  7. Bei Bedarf können Sie eine Hintergrundfarbe für die Kanalschaltfläche festlegen. Verwenden Sie dazu das Feld Theme color .

    Lassen Sie dieses Feld leer, um die Standard-Hintergrundfarbe für Kanalschaltflächen zu verwenden, die Sie für das Branding festgelegt haben.

    Um einen transparenten Hintergrund für die Schaltfläche zu verwenden, wählen Sie Transparent background.

  8. 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 und wählen SieACD.

  2. Gehen Sie zu Digital > Points of Contact Digital.

  3. Klicken Sie unter General channel features auf Guide.

  4. Klicken Sie auf Translations.

  5. Klicken Sie auf Add 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 unter Fallback eine Ausweichsprache aus, die verwendet wird, wenn es für eine bestimmte Bezeichnung keine Übersetzung gibt.
  6. Klicken Sie auf Save. Es werden die mit Guide bereitgestellten Standardbezeichnungen angezeigt.
  7. 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.
  8. 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.

  9. Klicken Sie auf Speichern.

Bezeichnungen für eine Sprache bearbeiten

  1. Klicken Sie auf den App-Selector und wählen SieACD.

  2. Gehen Sie zu > Points of Contact Digital.

  3. Klicken Sie unter General channel features auf Guide.

  4. Klicken Sie auf Translations.

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

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

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