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. 

 

Benefits:

 

  • Get more control over design elements
  • Customize your surveys to attract more responses

 

Our CSS names and prefixes everything with "qual_" as seen in the following image:

 

CSS

 

Disclaimer

 

Table of Contents:

 

1. Using the Design API

2. Namespacing CSS Rules

3. Working Example

4. Nudge HTML Examples

 

 Using the Design API

 

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 quickly 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 explanations.

 

Nudge HTML Example

 

And that's it! If you encounter any issues or have any questions, don't hesitate to reach out to our support team. 

 

 

Was this information helpful?
© 2005 - 2024 ProProfs
-