How to Change the Colors and Icon in the Header of Your Chatbot

This guide will help you change the header color and the icon in the header of your chatbot that is embedded on your career site. Follow these steps, and you'll have a customized chatbot in no time.

In this article:
Access Your Chatbot's CSS Code
Add the Header and Icon Code
Change the Icon URL
Change the Header Background Color
Save and Preview Your Changes
Additional Resources

Pro-Tip #1

If you are not familiar with coding we suggest having a member of your IT team complete this task. Be careful making changes beyond the header color and the header icon so you don’t break the code resulting in a bad end user experience.

Access Your Chatbot's CSS Code

To start, you need to access the CSS code where you can make the necessary changes. This might be in your website's CSS file or within a specific section of your website builder where you can add custom CSS.

Add the Header and Icon Code

Add the following code in your CSS. This code is responsible for setting the header icon and background color of your chatbot:

CSS

.ccui-chatWindow--avatar {

    background-image: url("https://placekitten.com/200/200") !important;

}

.ccui-chatWindow--header {

    color: white !important;

    background-color: black !important;

}

Change the Icon URL

The `background-image` property in the `.ccui-chatWindow--avatar` class sets the icon in the header. To change the icon:

1. Replace the URL in the `url()` function with the URL of your desired icon. Ensure the URL points to a valid image.
2. For example, if you have an icon located at `https://yourwebsite.com/images/new-icon.png`, your code should look like this:

CSS

.ccui-chatWindow--avatar {

  background-image: url("https://yourwebsite.com/images/new-icon.png")

  !important;

  }

Change the Header Background Color

The `background-color` property in the `.ccui-chatWindow--header` class sets the header's background color. To change the color:

1. Replace `white` or `#0000FF` with the hex value of your desired color.
2. For example:
   • If you want to change the font color of the “Virtual Recruiter” text in the header, replace the value to a hex value or `white` as an example;
   • If you want to change the background color to blue, you can use the hex value `#0000FF`.

CSS

.ccui-chatWindow--header {

    color: white !important;

    background-color: #0000FF !important;

}

Pro-Tip #2

Choose a header color that creates strong contrast with the "Virtual Recruiter" text to ensure clear readability. High contrast is also an important accessibility compliance requirement.

Pro-Tip #3

For mobile screens, you may want to adjust the code for the swipeable area to maintain the feel:

CSS

#cc-chatbot-widget .PrivateSwipeArea-root {

      background-color: black !important;

}

Save and Preview Your Changes

After making these changes, save your CSS file and refresh your career site to see the updates. Your chatbot should now display the new header icon and background color.

Troubleshooting Tips

• Icon Not Showing: Ensure the URL you provided is correct and the image is accessible.
• Color Not Changing: Double-check that you have replaced the `background-color` property with a valid hex value and that there are no typos.

Additional Resources

Hex Color Codes
CSS Background Image Property

By following these steps, you can easily customize the appearance of your chatbot to better match your career site's branding. If you have any further questions or need additional assistance, feel free to contact ClearCompany Support.