Anpassen Guide mit JavaScript

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 APIClosed Anwendungsprogrammierschnittstelle. Ermöglicht Ihnen, bestimmte Funktionen zu automatisieren, indem Sie Ihr CXone Mpower-System mit anderer Software verbinden.-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 der CXone Mpower 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

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

  2. Klicken Sie auf Integrations. Es wird eine Seite mit JavaScript-Code angezeigt, der für Ihren Mandanten spezifisch ist.

  3. Klicken Sie auf Copy code with Guide, um den Code zu kopieren.
  4. Fügen Sie den kopierten Codeausschnitt in Ihren Code oder ein Textbearbeitungsprogramm ein.

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

    Ein Beispielskript, das zeigt, wo JavaScript-Aufrufe einzufügen sind

    Ausführliche Informationen zu den Aufrufen, die Sie verwenden können, finden Sie unter GuideWidget-bezogene APIs, Chat-bezogene APIs und Reporting-bezogene APIs.

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

  7. Besuchen Sie die geänderte Seite und prüfen Sie, ob die Guide-Anpassungen wie vorgesehen funktionieren.

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

Sprache für Guide einrichten

Um die Spracheinstellung des Browsers zu umgehen und Guide-Besuchern Inhalte in einer bestimmten Sprache anzuzeigen, können Sie das eingebettete Skript bearbeiten. Fügen Sie den Parameter locale zum cxone('guide','init');-Befehl am Ende des Skripts hinzu und geben Sie die gewünschte Sprache an. So könnten Sie zum Beispiel Französisch als Sprache festlegen:


cxone('init','####'); 
cxone('guide','init', {locale: 'fr-fr'});

Ersetzen Sie #### durch Ihre vierstellige Mieter-ID.

Beachten Sie, dass Inhalte, die Sie in ein proaktives Angebot schreiben, weiterhin in der Sprache angezeigt werden, in der sie erstellt wurden. Hier wird davon ausgegangen, dass Sie die französischen Übersetzungen in Guide definiert haben.