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