How to customize your dropzone source

Updated 1 month ago by Mohamed Benqassmi

In this article you'ill learn how to customize your embedded dropzone source on your website in two ways:

  • directly on the Hrflow dashboard
  • with CSS and Javascript in your external stylesheet and script

On the Hrflow dashboard

If you want to customize your Dropzone source without any custom code, Hrflow provides full customization options:

  • In your Hrflow account, navigate to Sources Select your Dropzone source > go to settings tab
  • You will find a lot of options for editing the dropzone :
    • widget name
    • welcome headline
    • welcome message
    • success message
    • width
    • height
    • color
    • explicit consent request
    • and more..
  • After finishing click on the edit button to save your change.

Below is an example of dropzone with a red color, a height of 200px and a width of 600px:

In your website style and script files

In addition to the source settings available on the dashboard, if you need to add any extra or complex customization to your dropzone source, you can easily add code to your external files to override css style or even add javascript code to control the source normal behavior.

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
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 senging 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() {
...
});


How Did We Do?



Powered by HelpDocs