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. 




  • 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:






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:


 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. 



© 2005 - 2024 ProProfs