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

HrFlow.ai Dashboard provides many options to customize your Dropzone 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 Dropzone 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 example if you want the Dropzone to fit the device view-ports, and make it responsive, you can apply media queries to its elements in your own style files

@media screen and (max-width: 640px) {
.dragzone-conv {
width: 380px!important;
height: 200px!important;
}
.conv-box-upload.dz-clickable {
padding: 10px 0!important;
}
.drop-btn.dz-clickable {
width: 150px!important;
height: 45px!important;
font-size: 12px!important;
}
.drop-wrapper.dz-clickable svg {
transform: scale(0.8);
}
.drop-wrapper.dz-clickable .drop-title {
margin-top: 0!important;
font-size: 20px!important;
}
.drop-wrapper.dz-clickable .drop-or {
margin-bottom: 0!important;
}
}
@media screen and (max-width: 400px) {
.dragzone-conv {
width: 300px!important;
height: 175px!important;
}
.conv-box-upload.dz-clickable {
padding: 5px 0!important;
}
.drop-btn.dz-clickable {
width: 100px!important;
height: 30px!important;
font-size: 10px!important;
}
.drop-wrapper.dz-clickable svg {
transform: scale(0.7);
}
.drop-wrapper.dz-clickable .drop-title {
margin-top: 0!important;
font-size: 18px!important;
}
.drop-wrapper.dz-clickable .drop-or {
margin-bottom: 0!important;
}
}

Desktop

Tablet

Mobile

Edit Javascript

You can also update the widget using javascript. For example, if you want to trigger an event when the user clicks on the Upload File button, like sending tracking event to your 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:

document.getElementsByClassName("drop-btn").addEventListener("click", function() {
...
});