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;}');
Verfügbare Datenauswahlen
| Guide-Benutzeroberfläche | Datenselektoren |
|---|---|
| Guide-Widget und Schaltflächen |
|
| Portale |
|
| Artikel |
|
|
Chats und E-Mails |
|
|
Proaktive Angebote |
|
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 Befehle:
cxone('guide','setFullDisplay');cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_CLOSE_BUTTON"] {display: none !important;}');Chat-Vorkontaktumfrage ausblenden
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. 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.
Das folgende 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 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 Syntaxbeispiel zeigt, wie ein benutzerdefiniertes Kundenfeld angegeben wird:
cxone('guide','setCustomFields',
contactCustomerFields:[
{ident: 'email', value: 'kaya.sanchez@acme.com'}
]);Das folgende Syntaxbeispiel zeigt, wie sowohl ein benutzerdefiniertes Kontaktfeld als auch ein benutzerdefiniertes Kundenfeld angegeben werden:
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'}]);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.
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');