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:

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.

Then target your CSS rules for a specific Nudge like this:

You can also target your CSS rules for a specific screen like this:

 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.

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