About the Design API
If you need greater design control outside of the Design interface, the Design API will allow you to overwrite the CSS with your own. The Qualaroo Design API is a Premium feature and is turned on by default. Our CSS names and prefix everything with "qual_" as seen in the following image:
Using the Design API
To use the Design API you must have a Premium plan. To overwrite our client CSS you must declare your own CSS rules for our elements. It is recommended that you create a qualaroo-custom.css
file within the header of your site.
Namespacing CSS Rules
The Qualaroo HTML does not include Nudge-specific CSS names. If you want to modify the CSS for a specific Nudge we can easily achieve this by adding an eventHandler that adds a data attribute to the body tag with the current Nudge's ID. We can then use this attribute to target specific CSS rules.
_kiq.push(['eventHandler', 'nodeRendered', function(nudge_id, screen_id){
$('body').attr('data-qual-current-nudge', nudge_id);
$('body').attr('data-qual-current-screen', screen_id);
}]);
Then target your CSS rules for a specific Nudge like this:
body[data-qual-current-nudge='105803'] #qual_ol #qual_ol_ans_box {
height: 40px;
}
You can also target your CSS rules for a specific screen like this:
body[data-qual-current-screen=
...
}
Working Example
You can check out a working example here: https://s3.amazonaws.com/qualaroo/examples/design-api/example1-feeling.html
Nudge HTML Examples
Survey with Yes/No radio answers and text explain
Comments
0 comments
Article is closed for comments.