The Now Platform® Washington DC release is live. Watch now!

Help
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Mark Roethof
Tera Patron
Tera Patron

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 find_real_file.png
Chat Background find_real_file.png
Menu Icon find_real_file.png
Chat Header Font find_real_file.png
Input Background find_real_file.png

 

Chat messages

User Bubble Background  find_real_file.png
Agent Bubble Background  find_real_file.png
Bot Bubble Background  find_real_file.png
Link

 find_real_file.png

find_real_file.png

Button Background    

 find_real_file.png

find_real_file.png

User Bubble Font  find_real_file.png
Agent Bubble Font  find_real_file.png
Bot Bubble Font  find_real_file.png
Link disabled  find_real_file.png
Notification Text < to be added >

 

Others

System message

 find_real_file.png

find_real_file.png

Category background  find_real_file.png
Seperator  find_real_file.png
Time stamp  find_real_file.png
Category font  find_real_file.png
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

---

LinkedIn

Comments
David H_ Johnso
Mega Explorer

This is great!  Thank you, Mark.

Victor Chen
ServiceNow Employee
ServiceNow Employee

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...

 

Wai Kuen Ko
Tera Contributor

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

Steven61
Tera Contributor

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

Virtual Agent.jpg

Sundeep Kumar
Tera Contributor

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

Rhonda15
Tera Contributor

This is a great guide!!

 

Version history
Last update:
‎10-30-2023 03:40 AM
Updated by:
Contributors