In this article you'll learn how to customize your embedded CVbot source on your website with CSS and Javascript in your external stylesheet and script.

HrFlow.ai Dashboard provides many options to customize your CVbot source. You can learn all about it here.

In addition to these settings available on the dashboard, you can apply more advanced and complex customization to your CVbot source. This can be done by adding code to your external files to override css style or even add javascript code to control the source normal behaviour.

Edit CSS Style

To customize the style you can access any element of the widget using the CSS selectors and apply your own style, like if it's a part of your website.

For that you need to inspect the widget HTML and search for the class name of your desired element, you can change the styles of the messages in the conversation section with the class name conv-box-tex.

To demonstrate this, let's add a boarder in the website CSS file and a different background color like:

.conv-box-text {
background: #ccf7fa;
border: 1px solid #0abde3;
}

Please note: In order to override the css, make sure to add your styles files in a good order. Otherwise you need to use the !important statement to add weight to your specific declaration, and cancel the style that are previously declared in the widget css.

Edit Javascript

You can also control the widget using javascript. For example, if you want to trigger an event when the user clicks on the Upload File button, like a tracking event in you analytics server, or updating other parts of the UI in your website, you just need to use a javascript selector to target your element and apply your code

You can also add javascript code snippet to control the widget, for example to add a scroll behaviour where the widget hide when it hits a specific position on your website:

document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('dragbox-container').style.display='none';
}}