Uncovering hidden Virtual Agent client branding options

[Mark Roethof]

Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Hi there,

Regarding your Virtual Agent client's branding, there are many configurable options regarding the colors, icons, and fonts. These are well described on the ServiceNow Docs. Two years ago I also wrote a blog on this subject to make the options more visual. Did you know though, that there are more configurable options available? Configurable options which are just not shown Branding Settings on the Conversational Interfaces Console. On the Branding Settings, 30 configurable options are shown, while there are actually... 68!

Let's have a closer look at these hidden and undocumented configurable Virtual Agent client branding options. 

Conversational Interfaces Console Branding Settings

To view / edit the Branding Settings for the Virtual Agent client, navigate to:

Conversational Interfaces > Settings

Under Display options, select in the first section (Branding) the View All button on the right side of the screen.

All branding settings

You might ask yourself, how did you come up with the not visible/undocumented branding settings? While using the Conversational Interface Console and tweaking the Branding Settings, several options are just not listed and cannot be adjusted or it seems. Digging into this, the Branding Settings must be stored in some kind of table, apparently the Brandings table (sys_cs_branding_setup). Having a critical look at the Brandings table, it appeared that this contains a lot more fields that suggest more options should be available. Perhaps old options and deprecated now, new options not yet publicly available, or just options that never have been made visible though are perfectly useable.

All the useable fields on a Branding table record (some I still need to discover, image will follow). To make visual where the options are used, I've highlighted them with a red color.

	Conversational Interfaces Console Branding Settings	Not visible / Undocumented
Agent Bubble Background	x
Agent Bubble Font	x
Bot Bubble Background	x
Bot Bubble Font	x
Bot Profile	x
Branding key	x
Branding name	x
Button Background	x
Button Background Action button_bg_action_color
Button Hover Background (Chat Header) button_hover_bg_header_color
Button Hover Background (Modal) button_hover_bg_modal_color
Button Primary Background button_primary_bg_color
Button Primary Background Action button_primary_bg_active_color
Button Primary Background Hover button_primary_bg_hover_color
Button Selection Text button_selection_text_color
Category background	x
Category font	x
Chat Background	x
Chat body text (Chat Body Font Size)	x
Chat Body Font Source	x
Chat Body URL Font Name	x
Chat Header	x
Chat Header Background	x
Chat Header Font	x
Chat Header Font Size	x
Chat Header Font Source	x
Chat Header Logo	x
Chat Header URL Font Name	x
Chat Icon Background chat_icon_bg_color
Choicepicker Input Background choicepicker_input_bg_color
Choicepicker Input Search Icon choicepicker_input_icon_color
Close Icon close_icon_color
Disabled Input Background disabled_input_bg_color
Enable showing the New Messages Below or New Messages Above notification new_messages_notifications_enabled
Error error_color
Highlight highlight_color
Highlight Text highlight_text_color
Input Background	x
Input Field Icons input_field_icon_color
Input Field Text input_field_text_color
Input Placeholder Text input_placeholder_text_color
Link	x
Link (Non-neutral background) link_color_nonneutral_bg
Link disabled	x
Loading Animation	x
Menu Icon	x
Menu Title	x
Minimum delay before displaying typing animation (ms)	x
Minimum delay between bot messages (ms)	x
Modal Body Background modal_body_bg_color
Modal Header Background modal_header_bg_color
Multichoice Hover Background hover_bg_multichoice_color
Non Clickable Titles non_clickable_title_color
Notification Background	x
Notification Text	x
Overlay Area overlay_area_color
Placeholder Text placeholder_text
Primary Button Action Text primary_button_action_text_color
Search Icon search_icon_color
Secondary Text secondary_text_color
Separator	x
Shadow shadow_color
System message	x
Time Stamp	x
Tooltip Background tooltip_bg_color
Tooltip Text tooltip_text_color
User Bubble Background	x
User Bubble Font	x

On the Conversational Interfaces Console and the Branding Settings, there is also an Icons section. These Icons are stored in the Attachments table (sys_attachment) and not the Brandings table.

---

That's it. Hope you like it. If any questions or remarks, let me know!

C	If this content helped you, I would appreciate it if you hit bookmark or mark it as helpful. Interested in more Articles, Blogs, Videos, Podcasts, Share projects I shared/participated in? - Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Kind regards,

Mark Roethof

Independent ServiceNow Consultant
9x ServiceNow MVP

---

LinkedIn

[Paul Curwen]

Thanks for taking time to put this together Mark. Better than the official Documentation 😉

[deepak0007]

Hi Mark - Thankyou for the detailed article. It's really helpful. I have one query though - I didn't found any configurable option to change the virtual agent chat icon on the portal. My assumptions was with these many configurable items inside the chat window, there must be an option to change the icon as well. However, didn't found any. Please let me know if you come across such requirement and was able to achieve that?

[Mark Roethof]

@deepak0007 which Icon exactly are you after?

[deepak0007]

Hi @Mark Roethof , This one : the main chat icon on the portal - 

I already tried steps in https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0726500 but it's updating the icon in the circle layout only and showing just one portion of the image. 

[Berin]

Nice post!

FYI, in the Xanadu doco, they've now included a description for Button Selection Text:

Font color of the New messages above or New messages below buttons.

Although I don't actually see that setting in my PDI... 😕

[Bartosz Glowac1]

Hi @Mark Roethof 

I find your community posts very useful regarding VA configuration, thanks for the great job you are doing for the community.

However, I have recently been facing task to move the Chat on portal page. In OOB configuration the icon to Open chat window is at the bottom right part of portal page. I found that for some situation this covers some functionalities on our page and I can't click some link even I change the browser page zoom because it is hidden under the Open chat icon.

Therefore I thought about moving the chat opening icon to somewhere else, just a bit to the top so that the hidden link will be revealed. But then I realized that the button itself overlaps with the chat window and covers the chat part, as only the button moved up but the position of the chat window did not change.

I'm using Service Portal Agent Chat.

So far my configuration is that under Theme record I have created CSS Include Style Sheet with the following code:

.sp-ac-root button.sp-ac-btn.closed {

  background-position: center 0px;
  background-size: 120px 120px;
 
  //background-color: red;
  height: 120px;
  width: 120px;
}

.sp-ac-root .sp-ac-btn-icon-img, .sp-ac-root button.sp-ac-btn.closed .sp-ac-btn-icon {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 100px;
    width: 100px;
    display: block;
    margin: 10px 12px;
}
.sp-ac-root button.sp-ac-btn.closed .sp-ac-btn-icon {
    background-image: url(chat-icon.png);
}
.sp-ac-root button.sp-ac-btn {
    padding: 100;
    height: 120px;
    width: 120px;
    float: top;
    border-radius: 100%;
    //background-color: green;
    position: relative;
  bottom: 10rem;

}
.sp-ac-root button.sp-ac-btn:hover {
    //background-color: orange;
}
.sp-ac-root button.sp-ac-btn.open .icon-cross {
    color: #ffffff;
    font-size: 40px;
}

Is there a way to somehow shift the Open chat window button + chat window together by the same value to top and/or left side of the portal? Where to put some code/logic here or somewhere else?

Thanks for any help in that matter!

Bartosz

[anila5]

Hi Mark,

Thanks for this article.

I have a query, is it possible to change the Hover over background for Menu items like call support or Email option in the image? Also is it possible to change the color of toggle button for "Disable audio notification" ?