Passen Sie das Guide-Widget mithilfe von APIs an

Sie können das Erscheinungsbild und Verhalten des Guide Widgets mithilfe dieser JavaScript APIs anpassen.

CSS anpassen

Ändert die CSS-Elemente für das Guide-Widget. Nehmen Sie alle CSS-Änderungen in einem einzigen Aufruf vor. Ein zweiter Aufruf überschreibt die Änderungen vom ersten Aufruf.

Beispielsyntax:

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_BACK_BUTTON"] {color: white !important; background: red !important;}');

Um einen Datenselektor auszublenden, verwenden Sie display:none. So verbergen Sie beispielsweise die Menüschaltfläche Guide:

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_MENU_BUTTON"] {display: none;}');
Guide-Benutzeroberfläche Datenselektoren
Guide-Widget und Schaltflächen

  • GUIDE_CHANNEL_BUTTON

  • GUIDE_CHANNEL_BACK_BUTTON

  • GUIDE_SINGLE_MENU_CLOSE_BUTTON

  • GUIDE_MULTIPLE_MENU_CLOSE_BUTTON

  • GUIDE_CUSTOMER_PORTAL_CLOSE_BUTTON

  • GUIDE_FRAME_CONTENT

  • GUIDE_CHANNEL_ICON

  • GUIDE_CHANNEL_MENU_ICON
Portale

  • PORTAL_HEADER_ICON

  • PORTAL_HEADER

  • PORTAL_TITLE

  • PORTAL_SUBTITLE

  • GUIDE_CHANNEL_BUTTON_1

  • GUIDE_CHANNEL_BUTTON_2

  • GUIDE_CHANNEL_BUTTON_3

  • GUIDE_CHANNEL_BUTTON_4

  • GUIDE_MENU_BUTTON

  • KB_WIDGET_TITLE

  • KB_WIDGET_SEARCHBAR

  • KB_SEE_MORE_BUTTON

  • PORTAL_BODY

  • KB_WIDGET

  • CHANNELS_WIDGET
Artikel

  • KB_HEADER

  • KB_BODY

Chats und E-Mails

  • PRECONTACT_SURVEY

  • BEGIN_CHAT

  • SEND_EMAIL

  • INPUT

  • TEXTAREA

  • DROPDOWN

  • TREE

  • PRECONTACT_SURVEY_DESCRIPTION

  • PRECONTACT_SURVEY_ICON

  • TREE_POPUP_BACK_BUTTON

  • CLOSE_TREE_POPUP

  • CLOSE

Proaktive Angebote

  • OFFER_CLOSE_BUTTON

  • OFFER_HEADER

  • OFFER_BODY

  • OFFER_BUTTON_1

  • OFFER_BUTTON_2

  • OFFER_BUTTON_3

Größe der Kanalschaltflächen anpassen

Legt die Größe der im Kanal verwendeten Schaltflächen fest. Geben Sie einen Wert in ems oder Pixeln ein. Die Standardgröße für Schaltflächen ist 3em.

cxone('guide', 'setButtonSize', '80px');

Versatz der Kanalschaltflächen anpassen

Legt den Wert für den Versatz der Kanalschaltflächen fest. Geben Sie einen Wert in ems oder Pixeln ein.

cxone('guide', 'setOffsetX', '48px');
cxone('guide', 'setOffsetY', '3em');

Guide-Menü öffnen

Zeigt das Guide-Menü mit Schaltflächen an.

cxone('guide', 'openMenu');

Guide-Menü schließen

Schließt das Guide-Menü mit Schaltflächen

cxone('guide', 'closeMenu');

Schriftgröße ändern

Legt die Standardschriftgröße fest, die im Guide-Widget verwendet wird. Geben Sie einen Wert in Pixeln ein. Die Standardschriftgröße ist 13 Pixel. Der hier festgelegte Wert bestimmt die in Guide geltende Größe der Einheit "em".

cxone('guide','setFontSize',12);

Höhe des Guide-Widgets ändern

Legt die Höhe des Guide-Widgets fest. Geben Sie einen Wert in ems oder Pixeln ein. Die Standardhöhe ist 40em. Die maximale Höhe beträgt 40 rem.

cxone('guide','setDesiredGuideHeight','30em');

Breite des Guide-Widgets ändern

Legt die Breite des Guide-Widgets fest. Geben Sie einen Wert in ems oder Pixeln ein. Der Standardwert ist 23,125em.

cxone('guide','setDesiredGuideWidth','608px');

Guide im Vollbildmodus anzeigen

Sie können Guide im Vollbildmodus anzeigen. Guide-Inhalt wird in einem Fenster statt im Guide-Widget angezeigt.

cxone('guide','setFullDisplay');

Es hat sich bewährt, die Schaltfläche zum Minimieren im Vollbildmodus auszublenden. Verwenden Sie dazu die folgenden beiden Befehle:

cxone('guide', 'setFullDisplay');
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_SINGLE_MENU_CLOSE_BUTTON"] {display: none !important;}');

Chat-Umfrage vor dem Kontakt verbergen

Verwenden Sie diese API, um Guide anzuweisen, einen Chat zu starten, ohne die Web-Umfrage vor dem Kontakt anzuzeigen.

cxone('guide','hidePreSurvey');

Verwenden Sie die Chat-APIs, um vor dem Kontakt anzuzeigende Web-Umfragewerte voreinzustellen. Alternativ können Sie sie als Parameter für die hidePreSurvey-API angeben. Zum Beispiel:

cxone('guide','hidePreSurvey', 'Dre', {email: 'dre@classics.com'});

Festlegen benutzerdefinierter Feldwerte für die Vorkontaktumfrage

Verwenden Sie diese API, um Werte für benutzerdefinierte Felder festzulegen, die in einer Umfrage vor der Kontaktaufnahme angezeigt werden. Sie können Werte für Folgendes definieren:

  • Name

  • Beliebige benutzerdefinierte Kontaktfelder

  • Beliebige benutzerdefinierte Kundenfelder

Sie können einen benutzerdefinierten Feldwert als hidden:true markieren. Im Vorkontakt-Umfrageformular wird das ausgeblendete Feld nicht angezeigt. Der Wert, den Sie für das ausgeblendete Feld festlegen, wird jedoch an das Chatfenster übergeben.

Für benutzerdefinierte Felder, die nicht als hidden:false gekennzeichnet sind, werden in Guide die benutzerdefinierten Felder in der Vorkontaktumfrage mit den durch den API-Befehl angegebenen Werten vorbelegt. Der Besucher kann die Standardwerte verwenden oder sie nach seinen Wünschen ändern.

Benutzerdefinierte Felder sind auf 1024 Zeichen begrenzt.

Das folgende JavaScript Syntaxbeispiel zeigt, wie ein Name angegeben wird, der ausgeblendet und direkt an den Chat übergeben wird:

cxone('guide','setCustomFields', {customerName: {value:'Francis', hidden: true}});

Das folgende JavaScript Syntaxbeispiel zeigt, wie zwei benutzerdefinierte Kontaktfeldwerte angegeben werden. Der E-Mail-Wert wird in der Umfrage vor der Kontaktaufnahme ausgeblendet und direkt an den Chat weitergegeben. Der Adresswert ist in der Vorkontaktumfrage sichtbar und kann bearbeitet werden.

cxone('guide','setCustomFields', 
{contactCustomFields:[
{ident:'email', value: 'josey@nice.com', hidden:true}, 
{ident: 'address', value: '123 Main St', hidden:false}
]});

Das folgende JavaScript Syntaxbeispiel zeigt, wie ein benutzerdefiniertes Kundenfeld angegeben wird:

cxone('guide','setCustomFields', 
{contactCustomerFields:[
{ident: 'email', value: 'kaya.sanchez@acme.com'}
]});

Das folgende Syntaxbeispiel JavaScript zeigt, wie man sowohl ein benutzerdefiniertes Kontaktfeld als auch ein benutzerdefiniertes Kundenfeld angibt:

cxone('guide','setCustomFields', 
{contactCustomFields:[{ident: 'email', value: 'josey@nice.com', hidden:true}, {ident:'address', value: '123 Main St', hidden:false}], contactCustomerFields:[{ident: 'email', value: 'kaya.sanchez@acme.com'}]});

Nutzungsbedingungen

Ermöglicht Ihnen, Besuchern im Chatfenster ein Dokument mit den Nutzungsbedingungen zur Verfügung zu stellen. Diese Funktion fügt dem Fenster eine Schaltfläche hinzu. Sie können die Beschriftung und den Stil der Schaltfläche anpassen und festlegen, was passiert, wenn Besucher darauf klicken. Die On-Click-Aktion kann die Nutzungsbedingungen als internes Fenster oder externen Link anzeigen.

ABHÄNGIGKEITEN:

  • Die Eigenschaften display, typeund url sind erforderlich.

  • display muss weniger als 256 Zeichen lang sein, darf aber nicht leer sein.

  • url muss mit https: oder https: beginnen und darf nicht länger als 2048 Zeichen sein.

Ein internes Fenster:

cxone('guide','showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

Ein externer Link:

cxone('guide','showTermsOfUse', {display: 'Terms of Use', type: 'externalLink', url: 'https://yourdomain.com/'});

So deaktivieren Sie die Funktion:

cxone('guide','hideTermsOfUse');

Einstiegspunkt direkt anzeigen

Verwenden Sie diese API, um den Einstiegspunkt in einem Fenster manuell anzuzeigen. Es wird die Standard-Schaltfläche für den Einstiegspunkt verwendet.

Diese API wird für bestimmte Fälle bereitgestellt, wenn ein Einstiegspunkt möglicherweise manuell in einem Fenster eingeblendet werden muss. Dies wird im Allgemeinen nicht empfohlen und sollte nicht in Kombination mit Guide-Engagement-Regeln verwendet werden.

Wenn Sie im Herbst 2024 oder später einen Einstiegspunkt erstellt haben, wenden Sie sich an Ihren Kundenbetreuer, um Hilfe bei der Ermittlung der Einstiegspunkt-ID zu erhalten.

Damit diese API verwendet werden kann, muss die ID des anzuzeigenden Einstiegspunkts übergeben werden. Sie können zum Einstiegspunkt gelangen, indem Sie auf Bearbeiten neben dem Einstiegspunkt klicken und dann den letzten Teil der Seiten-URL kopieren.

cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');

Regelneubewertung für Einzel-Seite-Anwendungen (SPAs) aktivieren

Um dynamisches Routing in Single-Page-Anwendungen zu unterstützen, können Sie Guide so konfigurieren, dass Regeln automatisch neu ausgewertet werden, wenn ein Benutzer zu einer neuen Seite navigiert. Um dynamisches Routing zu aktivieren, fügen Sie den Parameter resetRulesOnNewPage zur Funktion cxone('guide','init'); in Ihrem eingebetteten Skript hinzu:

cxone('guide','init', {resetRulesOnNewPage: true});

Wenn resetRulesOnNewPage auf truegesetzt wird.

  • Guide überwacht Seitenübergänge mithilfe des Analysemoduls.

  • Beim Erkennen einer neuen Seite wird die Regel-Engine auf ihren Ausgangszustand zurückgesetzt.

  • Alle Regeln, einschließlich derer mit statischen Auswertungen oder derer, die bereits ausgeführt wurden, werden sofort neu ausgewertet.

  • Regel-Listener und Timer werden neu gestartet, als ob die Seite gerade erst geladen worden wäre.

Standardmäßig ist der Parameter auf falsegesetzt.