Have you ever wished you could customize the Agent Chat button in your Service Portal to suit your organization's branding and design? Maybe you're a Spider-Man fan and want to use a spider icon for the open button and a spider web icon for the close button. Well, good news! It's possible to customize the Agent Chat button.
Before we dive into the details, it's important to note that you'll need the sp_admin or admin role to make these changes. Additionally, if you plan to replace one or both of the images used in the Agent Chat button, you'll need to upload the images to your instance first.
To get started with customizing the Agent Chat button, follow these simple steps:
- Navigate to All > Service Portal > Themes in your ServiceNow instance.
- Open a theme record that you want to edit.
For this example, here I am using the "EC Theme" of the Employee Center Portal.
In the CSS variables field, you can configure the following elements of the Agent Chat button:
- The image to indicate that the chat window is open
- The image to indicate that the chat window is closed
- The button background colour
Firstly, to change the button background color, add the following variable:
$sp-agent-chat-bg: #B11313;
In this example, we're using a bright red color to match Spider-Man's suit, but you can choose any hex code to customize the color to your liking. If you want to use the default background color, simply remove the variable.
To change the image used to indicate that the chat window is open, add the following variable:
$sp-agent-chat-btn-open:url("https://<my-instance-name>.service-now.com/spider-icon.png");
In this example, we're using a spider icon from our database to indicate that the chat window is open. You can replace this with any image of your choice. If you want to use the default image, simply remove the variable.
To change the image used to indicate that the chat window is closed, add the following variable:
$sp-agent-chat-btn-close: url("https://<my-instance-name>.service-now.com/spider-web-icon.png");
Again, you can replace the spider web icon with an image of your choice or remove the variable to use the default image.
Finally, to change the button background color, add the following variable:
$sp-agent-chat-bg: #B11313;
In this example, we're using a bright red color to match Spider-Man's suit, but you can choose any hex code to customize the color to your liking. If you want to use the default background color, simply remove the variable.
Click Update to save your changes.
That's it! With these simple steps, you can customize the Agent Chat button in your Service Portal with a Spider-Man theme. Whether you're a fan of the friendly neighborhood superhero or just want to add a little fun to your portal or to better suit your organization branding, customizing the Agent Chat button is a great way to personalize your ServiceNow instance.
Please mark it as helpful if you find it interesting. Happy Coding!
