The Design API

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= '99373'] #qual_ol #qual_ol_ans_box {
    ...
  } 

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