Virtual Agent client branding guide

[Mark Roethof]

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

Hi there,

Working on branding the UI color scheme for your Virtual Agent client? Which labels go where, and what effect do these have? It can be a puzzle 🙂 Although with the San Diego release a new page for Conversation Interfaces has been introduced, with amongst others an improved branding overview which amongst others instantly reflects changes to the colors for 10 out of 22 labels, still some help is needed.

I've summed up all labels that are mentioned on the branding page and added screen snippets to clarify where the color resides (colored red) in the Virtual Agent client.

Chat window branding

Chat window

Chat Header Background
Chat Background
Menu Icon
Chat Header Font
Input Background

Chat messages

User Bubble Background
Agent Bubble Background
Bot Bubble Background
Link
Button Background
User Bubble Font
Agent Bubble Font
Bot Bubble Font
Link disabled
Notification Text	< to be added >

Others

System message
Category background
Seperator
Time stamp
Category font
Loading Animation	< to be added >

---

And 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
3x ServiceNow Developer MVP

3x ServiceNow Community MVP

---

LinkedIn

[David H_ Johnso]

This is great!  Thank you, Mark.

[Victor Chen]

Thanks Mark, as always!

For more details, folks can visit the branding doc site: https://docs.servicenow.com/bundle/sandiego-servicenow-platform/page/administer/conversational-inter...

[Community Alums]

Why that's some of the bot text with Now icon and some with circle A? the behaviour is inconsistent. 

[Steven61]

Any idea how to change the "Name" of the Virtual Agent in the chat window?

[Sundeep Kumar]

is there any way to override the branding specification for particular CSS class?

[Rhonda15]

This is a great guide!!

[Bartosz Glowac1]

Hi,

how one can change font color in the user input text bar where you have "Type your message"?

You have shown option of background color change but what about the font color?

Cheers,

Bartosz

[Mark Roethof]

@Bartosz Glowac1 I need to look into your question a bit more, but there are way more configurable options though just not made visible.

If you go to the branding record on table level, you will notice there are about 2x more branding options!

I still need to write an article on that 😅