Plannit Widgets are embedded directly into your website, so that you can offer seamless integration to your customers.
This guide will help you update the look & feel of these widgets:
Send a message widget
Request a quote widget
Request a job widget
To change the orange buttons color, all you need is to add CSS to this class:
.plannit-cta__btn-primary {
color: #fff;
background-color: #92c03c;
border-color: #92c03c;
}
To change the background color of the widget itself, you can add CSS like below:
.plannit-cta__content {
background: #333;
color: #fff;
}
If you change the text color of labels to white, you might need to add this CSS so that the Service dropdown appears correctly:
.plannit-multiselect-dropdown {
color: #222;
}
.plannit-multiselect-dropdown span.optext {
color: #222;
}
Should you want to also change the color of the Powered by text, you would need to add this:
.plannit-cta__footer small {
color: #fff;
}
You can also change the border radius of the input elements, like below:
.plannit-cta input.plannit-cta__form-control,
.plannit-cta select.plannit-cta__form-control,
.plannit-cta textarea.plannit-cta__form-control,
.plannit-cta select.plannit-cta__form-control,
.plannit-cta .plannit-multiselect-dropdown {
border-radius: 1em;
}
And also change the look of the Save and Cancel buttons:
.plannit-cta .plannit-cta__btn {
border-radius: 1em;
}
This would give something like this:
There is a lot more you can do to customize the look and feel of Plannit's widgets, by customizing every HTML elements under the .plannit-cta class, we'll be happy to assist if you need further assistance.