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 DFO > Points of Contact Digital.

  3. Under General channel features, click Guide.

  4. Click Brandings.

    The Brandings page. It lists the brandings created for your tenant and which is the default.

  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.

    Field Details
    Name A unique name to identify the brand.

    Theme primary color

    The color to use for the header, minimize button, and channel button background. This color is used for all Guide templates unless a channel button or template sets a theme color that overrides the branding color.
    Font primary color The color to use for text that appears in the header and the arrow that appears in minimize and back buttons. Enter a hex value. For example, to use black, specify #000000.
    Is default

    Check to make this the default branding to use.

    When you set a branding as the default, it is applied to all existing and new templates.

  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 DFO > Points of Contact Digital.

  3. Under General channel features, click Guide.

  4. Scroll down to the Buttons section and click Add button.

    The Buttons page. It lists all buttons created and which templates and entry points use the buttons.

  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 DFO > Points of Contact Digital.

  3. Under General channel features, click Guide.

  4. Click Translations.

  5. Click Add Language to add a new language.

    Field Details
    Name Enter a name to identify the language.

    Language

    Select the Language from the drop-down list.
    Country Select the Country from the drop-down list.
    Fallback Choose a Fallback language to use if there is not a translation for particular label.
  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 DFO > 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.