Wenn Sie Guide mit Ihrer Website verwenden möchten, können Sie Guide einfach auf jeder Seite Ihrer Website dort einbetten, wo Sie ein Engagement anbieten möchten.
Wenn Sie jedoch mit der Website-Entwicklung vertraut sind und Anpassungen am Erscheinungsbild und Verhalten des Guide-Widgets vornehmen möchten, können Sie API
APIs ermöglichen Ihnen die Automatisierung bestimmter Funktionen durch das Verbinden Ihres CXone Systems mit anderer Software, die Ihr Unternehmen verwendet.-Aufrufe für den JavaScript-Code verwenden. Sie können diese Arten von Änderungen vornehmen:
-
Guide-Widget-Erscheinungsbild und -Verhalten: Passen Sie Erscheinungsbild und Verhalten des Guide-Widgets an. Sie können zum Beispiel die Größe des Widgets oder die Größe der Schaltflächen ändern, das Widget im Vollbildmodus anzeigen usw.
-
Chatvoreinstellungen, falls dies ein Angebot im Guide-Widget ist: Passen Sie das Erscheinungsbild und das Verhalten des Chats an, sofern dieser im Guide-Widget angeboten wird. Sie können zum Beispiel die Informationen im Chatfenster ändern, das Aussehen des Chatfensters ändern, benutzerdefiniertes CSS festlegen usw.
-
Einstellungen für die Berichterstattung: Passen Sie das Guide-Tracking von Engagements und Conversions an. Sie können diese APIs verwenden, wenn Sie benutzerdefinierte Ereignisse definieren, Besuchervariablen speichern, Unterhaltungsdaten speichern, Web-Tags zuweisen oder entfernen und vieles mehr.
So funktioniert Guide
Das Guide-Widget ist ein Webmodul, das CXone Loader auf Ihre Website lädt. Das Webmodul enthält eine JavaScript-Anwendung, die mit dem Svelte-Framework entwickelt wurde. Die Anwendung nutzt grundlegende Statusspeicher zum Tracken der Guide-Konfiguration, der aktiven Vorlage, des aktiven Chatstatus, des UI-Status usw. Die Werte dieser Statusspeicher bestimmen, was dem Besucher angezeigt wird.
Wenn Sie Guide in eine Seite Ihrer Website einbetten und ein Besucher die Seite aufruft, ruft Guide die für Ihren Mandanten spezifische Konfiguration ab. Diese Anforderung gibt ein JSON-Ergebnis mit Regeln, Schaltflächen, Einstiegspunkten, Übersetzungen, zugehörigen Artikelverweisen und Feature-Flags zurück. Dann wird die Regel-Engine verwendet, um die Regeln und Bedingungen zu verarbeiten, die bestimmen, ob eine Vorlage oder ein proaktives Angebot auf der Webseite eingeblendet wird oder nicht.
Um Besucherdaten zwischen dem Neuladen von Seiten zu verwalten, verwendet Guide lokalen und Sitzungsspeicher. So kann Guide in unterstützten Browsern domänenübergreifenden Support anbieten. Das bedeutet auch, dass Guide keine Browser-Cookies verwendet.
Richten Sie Guide-Anpassungen in einer Testumgebung ein, bevor Sie sie in Ihrer Produktionsumgebung freigeben. Auf diese Weise können Sie Störungen für Ihre Website-Besucher auf ein Minimum reduzieren. Außerdem können Sie so sicherstellen, dass Ihre Anpassungen wie vorgesehen funktionieren.
JavaScript-Aufrufe hinzufügen
- Klicken Sie auf den App-Selector
und wählen SieACD. -
Gehen Sie zu Digital > Kontaktstellen Digital.
- Klicken Sie unter "Ihre Kanäle" auf Website-Skript.
- Kopieren Sie den JavaScript-Code von der Seite und fügen Sie ihn in Ihren Code oder ein Textbearbeitungsprogramm ein. Achten Sie darauf, die öffnenden und schließenden <script>-Tags einzuschließen.
-
Fügen Sie direkt über dem schließenden </script>-Tag des eingefügten Codes die gewünschten JavaScript-Aufrufe hinzu. Im folgenden Beispielbild zeigt der Kommentar an, wo Aufrufe hinzugefügt werden sollen.
Die Guide JavaScript-Aufrufe, die Sie verwenden können, sind unten auf dieser Seite beschrieben wie auch die chatbezogenen APIs für Guide und die berichtsbezogenen APIs für Guide.
-
Kopieren Sie das gesamte Skript, einschließlich der von Ihnen hinzugefügten öffnenden und schließenden <script>-Tags, in die Kopfzeile einer Seite Ihrer Website.
-
Besuchen Sie die geänderte Seite und prüfen Sie, ob die Guide-Anpassungen wie vorgesehen funktionieren.
-
Wenn Sie Ihr Skript vollständig getestet haben und es wie gewünscht funktioniert, kopieren Sie das endgültige Skript in den Header jeder Seite, die diese Guide-Anpassung enthalten soll.
Guide-Widget anpassen
Mit diesem Aufruf können Sie das Erscheinungsbild und das Verhalten des Guide-Widgets anpassen.
CSS anpassen
Ändert die CSS-Elemente für das Guide-Widget. Beispiel:
cxone('guide', 'setCustomCss', '[data-selector="GUIDE_ELEMENT"] {background: red !important;}');Wenn Sie dieses Snippet verwenden möchten, ersetzen Sie GUIDE_ELEMENT durch einen Wert aus der folgenden Tabelle und ersetzen Sie das Beispiel-CSS in geschweiften Klammern { } durch Ihr eigenes CSS:
|
Guide-Benutzeroberfläche |
Werte für GUIDE_ELEMENT |
|---|---|
| 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;}');Vor dem Chat-Kontakt anzuzeigende Web-Umfrage weglassen
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', 'dre@classics.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');