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
-
-
For advanced custom styling, you can use the Guide APIs or work with your CXone Account Representative to create a custom appearance.
Create Branding
Content in this section is for a product or feature in controlled release (CR). If you are not part of the CR group and would like more information, contact your CXone Account Representative.
Branding sets the colors to use by default for templates, buttons, and proactive offers. 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 Guidetemplates on different websites, you can use unique branding for each website. When defining the rule to display the a template or proactive offer, use the Guide Set Branding action to determine the branding to use.
- Click the app selector
and select Guide. -
Click Branding.
-
Click New Branding.
-
Enter a unique brand name for Branding Title.
-
Set Theme Color to the primary color to use for the Guide widget. Set the color by entering a hex value or clicking the color dropper to select a color.
The Theme Color is used for:
-
The header background color.
- The minimize button.
- The channel button background.
It is used unless:
-
A channel button sets a theme color that overrides the branding color.
-
A template sets a theme color that overrides the branding color.
-
You set further branding preferences beyond the primary settings. For example, if you set a button color for proactive offers.
-
-
Set Font Color to the color to use for text that appears the Guide widget. The color is used for text in the header and the arrow that appears in minimize and back buttons.
To assist the visually impaired, maintain a contrast ratio of 4.5:1 between the Theme Color and Font Color. Online tools are available for checking the contrast.
-
Optionally, further fine tune the branding by using the
Learn more about the Field Details The width of the Guide widget in ems. The default width is 23.125 ems.
Height (EM)
The height of the Guide widget in ems. The default height is 40 ems.
The color to use for the widget close icon. The background color to use for widget the close icon. Learn more about the Field Details The background color to use for customer portal templates. The font and icon color to use for customer portal templates.
The heading size, in ems, to use for customer portal templates.
For best results, select a customer portal template to preview, and then adjust the heading font size if needed.
The subheading font size, in ems, to use for customer portal templates.
For best results, select a customer portal template to preview, and then adjust the subheading font size if needed.
Learn more about the Field Details The background color to use when viewing knowledge base articles. The font and icon color to use when viewing knowledge base articles.
Learn more about the Field Details The font size, in ems, to use for a proactive offer heading.
For best results, look at the proactive offer preview image, and then adjust the heading font size if needed.
The font size, in ems, to use for body text in a proactive offer.
For best results, look at the proactive offer preview image, and then adjust the body font size if needed.
The color to use for the header area of the proactive offer. The color to use for the background of the proactive offer. The font color to use for the proactive offer. It includes the heading text and body text. Background and font color for the primary call to action button in proactive offers. Background and font color for secondary buttons in proactive offers. Whether the proactive offer should appear at the Top or Bottom of the screen on a mobile device. - Preview the branding settings by selecting a template from the drop-down list on the right side of the page. Or, to preview branding for proactive offers, click the Proactive Offer tab. If you customize these settings, a preview appears to the right.
-
Click Default to make this the default branding. When you set a branding as the default, it is applied to all existing and new templates.
- Click Save.
Working with Ems
Guide uses ems to specify the size of interface elements. Ems allow for responsive sizing of interface elements across different devices. The default size of an em in Guide is 13 pixels. You can change this by using the setFontSize API.
Create Channel Buttons
Create a button for each channel 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.
-
Click the app selector
and select ACD. -
Go to
- Under
-
Scroll down to the
-
Enter a Name for the button.
-
Click Choose File to upload the Icon for the button.
Icon images must be smaller than 50 KB, and SVG files are recommended.
-
If needed, set a background color for the channel button in the
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.
-
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
-
Click the app selector
and select ACD. -
Go to
-
Under
-
Click Translations.
-
Click Add Language to add a new language.
Learn more about fields in this step
Field Details Enter a name to identify the language. Select the Language from the drop-down list.
Select the Country from the drop-down list. Choose a Fallback language to use if there is not a translation for particular label. - Click Save. The default labels provided with Guide appear.
- 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.
- 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.
-
Click Save.
Edit the Labels for a Language
-
Click the app selector
and select ACD. -
Go to Digital > Points of Contact Digital.
-
Under
-
Click Translations.
-
Click
- 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.
-
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.