Configure the Guide Interface

Guide uses the default branding and channel buttons that you define to determine the appearance of the Guide widget on your website.

Best Practices

  • Work with your marketing department to select channel button images and branding colors that complement your website.

  • Use consistent channel buttons and branding across a website.

  • If you have multiple websites, determine if you need to define unique branding for each website.

  • To rely on the default branding color, do not set the Theme color when defining buttons or templates.

  • To override the default branding color, you can set different colors in a specific button or template. Note the following:

    • If you set a Theme color for a template, that color overrides the brand color setting.

    • If you set a Theme color for a template and a Theme color for a button, the button color overrides the template and brand color settings.

  • For advanced custom styling, you can use the Guide APIs or work with your CXone Account Representative to create a custom appearance.

Create Branding

Branding sets the colors to use by default for templates and buttons. Guide provides the Default branding that you can customize as needed.

If needed, you can create multiple brandings. For example, if you plan to offer Guide templates on different websites, you can use unique branding for each website. When defining the rule to display the template, use the Guide Set Branding action to determine the branding to use for the template.

Watch a short video on setting up branding.

  1. Click the app selector and select ACD.
  2. Go to Digital > Points of Contact Digital.

  3. Under General channel features, click Guide.
  4. Click Brandings.

  5. Click Edit to make changes to the Default brand settings. Or, click Add Branding to create a new brand.

  6. Enter the name and colors for you brand. Select the default checkbox to use the branding for your templates and buttons.

  7. Click Save.

Create Channel Buttons

Create a button for each channelClosed A way for contacts to interact with agents or bots. A channel can be voice, email, chat, social media, and so on. that you plan to offer in Guide. Once the buttons are created, you associate them with the entry points. You can override the button when defining a template by setting a different button for the entry point.

View a short video on creating channel buttons.

  1. Click the app selector and select ACD.

  2. Go to Digital > Points of Contact Digital.

  3. Under General channel features, click Guide.
  4. Scroll down to the Buttons section and click Add button.

  5. Enter a Name for the button.

  6. Click Choose File to upload the Icon for the button.

    Icon images must be smaller than 50 KB, and .SVG files are recommended.

  7. If needed, set a background color for the channel button in the Theme color field.

    Leave this field blank to use the default channel button background color set for the brand.

    To use a transparent background for the button, select Transparent background.

  8. Click Save.

Add Language Variants for Translation

You can create custom language variants for use with Guide. Additionally, you can edit the labels for Guide user interface elements.

The translations for default languages will be available in a future release.

Add a Custom Language

  1. Click the app selector and select ACD.

  2. Go to Digital > Points of Contact Digital.

  3. Under General channel features, click Guide.

  4. Click Translations.

  5. Click Add Language to add a new language.

  6. Click Save. The default labels provided with Guide appear.
  7. For each Translation Key, enter a Translation Value. This is the string that is shown to visitors in the Guide widget. You cannot change the Translation Key for the default labels provided with Guide.
  8. If needed, create new translation keys by clicking Add at the bottom of the page. Set the Translation Key and the Translation Value. You can change the Translation Key for any new labels that you create. If you add new translation keys, be sure to provide translated values in all languages that you offer visitors.
  9. Click Save.

Edit the Labels for a Language

  1. Click the app selector and select ACD.

  2. Go to Digital > Points of Contact Digital.

  3. Under General channel features, click Guide.

  4. Click Translations.

  5. Click Edit next to the language to edit.

  6. Scroll to the label to edit and update the Translation Value. For example, you can change the button label for starting a chat from Begin Chat to Start Chat.
  7. Click Save.

Interact with a Guide Widget

Visitors can interact with a Guide widget by using their mouse or keyboard to move between the buttons. Note that keyboard navigation is limited for visitors using a Mac with the Safari or Firefox browser unless enabled in the browser. The keys work as expected by default when using the Chrome browser.