Customizing Your Survey's Design and Implementation

This guide helps both designers and developers customize the appearance of their surveys. Whether you're a designer looking to match your brand guidelines or a developer implementing complex styling changes, you'll find step-by-step instructions for both basic and advanced customizations.

Basic Customization

You can make simple modifications to your survey's appearance directly through our application interface, including:

Button colors
Text content
Basic styling elements

These changes don't require any code modification and will automatically update on your website.

Advanced Customization

For more comprehensive design changes, you can override our default styles by adding a custom stylesheet (a special file that controls how your survey looks). This allows you to modify:

Color schemes
Typography
Layout elements
Custom styling

⚠️ Important Note: While you can customize both CSS and JavaScript to match your specific design requirements, please note that our support capabilities may be limited if custom implementations cause functionality issues.

Typography and Color Customization

Global Font and Color Changes

To apply custom fonts and colors throughout your survey, add the following code to your stylesheet. The .zl-container class targets your entire survey, and the !important declaration ensures your changes take priority:

.zl-container {
    font-family: "Your Font", sans-serif !important;
    color: #YOUR-COLOR !important;
}

📝 Font Implementation Note: Remember that custom fonts must be properly loaded in your webpage before they can be used in the survey. Most custom fonts require separate inclusion through web font services or font files.

Customizing Survey Elements

NPS Scale Customization

The default NPS scale displays as numbered squares (0-10), but you can transform these into various custom designs:

Star Rating Example

.zl-score {
    background-image: url(your-star-image.png);
    background-size: 40px;
    background-color: transparent !important;
    color: #ffffff !important;
}

Emoji Rating System

.zl-score {
    background-size: 34px;
    background-color: transparent !important;
    color: #555555 !important;
    background-position: center;
    background-repeat: no-repeat;
}

/* Promoter Score Styling */
.zl-score.zl-promoter {
    background-image: url(path-to-happy-emoji.png);
}

/* Detractor Score Styling */
.zl-score.zl-detractor {
    background-image: url(path-to-sad-emoji.png);
}

/* Passive Score Styling */
.zl-score.zl-passive {
    background-image: url(path-to-neutral-emoji.png);
}

/* Score Value Positioning */
.zl-score-value {
    position: relative;
    top: 30px;
}

/* Vote Container Spacing */
.zl-votes {
    margin-bottom: 10px;
}

Best Practices

Test your customizations across different browsers and devices
Keep your custom styles organized and well-documented
Maintain consistent branding throughout your survey
Consider accessibility when choosing colors and fonts

Support Centre