The Now Platform® Washington DC release is live. Watch now!
on ‎05-31-2022 03:03 AM - edited on ‎10-30-2023 03:40 AM by Deepak Negi
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 which 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!
If this post helped you in any way, I would appreciate it if you hit bookmark or mark it as helpful. Interested in more articles, blogs, videos, and Share projects on Virtual Agent I published? - Virtual Agent |
Kind regards,
Mark
2020-2022 ServiceNow Community MVP
2020-2022 ServiceNow Developer MVP
---
This is great! Thank you, Mark.
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...
Why that's some of the bot text with Now icon and some with circle A? the behaviour is inconsistent.
Any idea how to change the "Name" of the Virtual Agent in the chat window?
is there any way to override the branding specification for particular CSS class?
This is a great guide!!