Virtual Agent Icon customization

[Daniel142]

Hi everyone!

The requirement says that I must somehow eliminate the Virtual Agent circle, maybe like other posts says make it square and invisible, and put a .png of the company.

I used some forum tips but I'm not able to do what i want, delete the circle and just a .png.

Virtual Agent is active by Agent Chat, not widget.

Is this possible through CSS?

Rewards!!!

[Mark Roethof]

Hi there,

Yes its possible, see the ton of articles I wrote on this 🙂

Though seriously, where exactly do you need help with? I'm willing to guide you through this, though you do need to be specific.

[Daniel142]

Hi Mark!
I was looking at some of your posts, following your steps and everything. But i couldn't get what i want.
Let me explain, I need to embed a png image as the chatbot image. They don't want the circle that Servicenow proposes.
Hello Mark! I was looking at some of your posts, following your steps and everything.
Let me explain, I need to embed a png image as the chatbot image when it opens and when it closes. They don't want the circle that Servicenow proposes.
So, it occurs to me that the png can be embedded in the transparent rectangle. Better if is just the png.
I followed the steps in one of your posts but I'm no getting.
The chatbot is activated by Agent Chat.

This is what I have.

 //==Chat
   //==$sp-agent-chat-btn-open: url("/gina_full_body.png");
     $sp-agent-chat-btn-close: url("/full_bot.png");
      $sp-agent-chat-bg: #ffffff;
      
      .sp-ac-root button.sp-ac-btn.closed {
  //==background-image: url(full_bot.png);
  background-position: center 0px;
  background-size: 100px 100px;
  
  height: 120px;
  width: 120px;

  border-radius: 0;
  
}

.sp-ac-root button.sp-ac-btn {
  border: 0px;
  box-shadow: none;
  }
      
      // Form error label overrides
      .sc-field-error-label {
      
        color: $text-white;
      }

 

[Mark Roethof]

Ah nice, you did the first steps already. It all just comes down to CSS knowledge. You can make a square of it, rectangle, larger circle, top left, top right, bottom left, many things, just CSS.

Can you make an example of what you are after? For example just with simple paint.

[Daniel142]

Hi Mark!

1. The image must not have a background, it must be a transparent png.
2. It needs a size of 100px per 100px, something big so that will be visible.
3. The next thing is that when you click on that image, the virtual agent is displayed as normal.
4. The last activity would be to click on the image to close VA and the image must be in the same place as when they pressed it to open. The right corner.

Thank you!!!