Customize Guide Using JavaScript

To use Guide with your website, you can simply embed Guide on each page of your website where you want to offer an engagement.

However, if you are familiar with web development, and you would like to make customizations to the appearance and behavior of the Guide widget, you can do so by using APIClosed APIs allow you to automate certain functionality by connecting your CXone Mpower system with other software your organization uses. calls to the JavaScript code. These are the types of changes that you can make:

  • Guide widget appearance and behavior: Customize the appearance and behavior of the Guide widget. This includes changing the size of the widget, changing the size of the buttons, displaying the widget in full screen mode, and so on.

  • Chat preferences when offered in Guide widget: Customize the appearance and behavior of chat when offered in the Guide widget. This includes changing the information in the chat window, changing the chat window appearance, setting custom CSS, and so on.

  • Reporting preferences: Customize how Guide tracks engagements and conversions. You can use these APIs when defining custom events, storing visitor variables, storing conversion data, assigning and removing web tags, and so on.

Understanding How Guide Works

The Guide widget is a web module that CXone Mpower Loader loads onto your website. The web module contains a JavaScript application that is built using the Svelte framework. The application uses basic state stores that keep track of Guide configuration, the active template, the active chat status, the UI state, and so on. The values of these state stores drive what is displayed to the visitor.

When you embed Guide on a page of your website, and a visitor views the page, Guide fetches the configuration specific to your tenant. This request returns a JSON result with rules, buttons, entry points, translations, referenced articles, and feature flags. It then uses the bundled rules engine to process the rules and conditions that may or may not result in a template or proactive offer appearing on the page.

To manage visitor data between page reloads, Guide uses local and session storage. This allows Guide to provide cross-domain support on supported browsers. It also means that Guide does not use any browser cookies.

Set up Guide customizations in a test environment before releasing them into your production environment. This will help minimize disruptions to your website visitors. It will also help ensure that your customizations work as intended.

Adding JavaScript Calls

  1. Click the app selector icon of app selector and select Guide.

  2. Click Integrations. A page appears with JavaScript code that is specific to your tenant.

  3. Click Copy code with Guide to copy the code.
  4. Paste the copied code snippet into your code or a text editing program.

  5. Just above the closing </script> tag of the code you pasted, add the JavaScript calls to use. In the following example image, the comment indicates where to add calls.

    An example script that shows where to add JavaScript calls

    For complete details on the calls that you can use, see Guide widget-related APIs, chat-related APIs, and reporting-related APIs.

  6. Copy and paste the entire script, including the opening and closing <script> tags, into the header of a page of your website.

  7. Visit the modified page and make sure that the Guide customizations work as intended.

  8. When it is fully tested and works as expected, copy the final script into the header of each page that should have this Guide customization.