How to customize your CVbot source

Updated 3 months ago by Mohamed Benqassmi

In this article you'ill learn how to customize your embedded CVbot 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 Cvbot source without any custom code, Hrflow provide a lot of options to your Cvbot source.

  • In your Hrflow account, navigate to Sources > Select your cvbot source > go to settings tab
  • You'll find a lot of option to edit like:
    • widget Name
    • Welcome Headline
    • Welcome message
    • loading time of the source
    • screen side of your website where to display your Cvbot
    • color
    • and more
  • After finishing click on the edit button to save your change.

Below is an example on how to change your Cvbot color.

Scroll to the widget color part, Pick the color from a color picker or, even better, add your color code as a number, click on the edit button and voila!

So here is the result

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 CVbot 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 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 to add weight to your specific declaration, and cancel the style that are previously declared in the widget css.

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';
}}


How Did We Do?



Powered by HelpDocs (opens in a new tab)