How to change position of the Virtual Agent chat bubble in the Employee Center?

Jessica LeCoq
Tera Contributor

I'm configuring Employee Center for a customer, and I would like to move the position of the Virtual Agent chat bubble.  Not much, just a bit higher.  Currently, its right smack in the middle of the footer and is covering the copywrite info.  Having a similar issue with the Performance Tracking widget on the bottom left corner.  I've attached screenshots of the problem.  Can't seem to find any information on repositioning either. 

Thanks in advance!

2 ACCEPTED SOLUTIONS

Community Alums
Not applicable

Hi @Jessica LeCoq ,

 go to virtual agent widget and modify this CSS part. Refer attached screenshot

.conversation-button-container {
    position: fixed;
    right: 3rem;
    bottom: 34.5rem; // play around with this to bring top
    z-index: 20;
    /* top: 109px; */
}

 

Once you find the perfect position copy CSS from inspect element ..>ctrl right click on virtual agen icont--> instance in page editor..> paste it under CSS

 

View solution in original post

Mark Roethof
Tera Patron
Tera Patron

Hi there,

 

You can achieve this influencing the CSS. I wrote multiple article on this, so check them out 🙂

https://community.servicenow.com/community?id=community_blog&sys_id=14e51965db2200d013b5fb24399619fb

 

A don't is definitely to clone/edit the out-of-the-box legacy widget for such purposes! Doing so = bad practice.

 

Kind regards,

 

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

 

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

LinkedIn

View solution in original post

3 REPLIES 3

Community Alums
Not applicable

Hi @Jessica LeCoq ,

 go to virtual agent widget and modify this CSS part. Refer attached screenshot

.conversation-button-container {
    position: fixed;
    right: 3rem;
    bottom: 34.5rem; // play around with this to bring top
    z-index: 20;
    /* top: 109px; */
}

 

Once you find the perfect position copy CSS from inspect element ..>ctrl right click on virtual agen icont--> instance in page editor..> paste it under CSS

 

Mark Roethof
Tera Patron
Tera Patron

Hi there,

 

You can achieve this influencing the CSS. I wrote multiple article on this, so check them out 🙂

https://community.servicenow.com/community?id=community_blog&sys_id=14e51965db2200d013b5fb24399619fb

 

A don't is definitely to clone/edit the out-of-the-box legacy widget for such purposes! Doing so = bad practice.

 

Kind regards,

 

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

 

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

LinkedIn

Jessica LeCoq
Tera Contributor

Hi there! 

I ended up not having to work with the CSS because the widgets were moved higher in the Washington upgrade and solved my problem. lol I'll remember this for the future though!

 

Thank you both!