Understanding Custom Styling in TraceNudges

The Custom Styling section, located under the Custom Code tab, allows advanced users to go beyond the standard design templates. This feature gives you the freedom to inject your own CSS and JavaScript to ensure every notification feels like a native part of your website's architecture.

Key Configuration Options

1. Custom Stylesheet (CSS)

This text area is dedicated to your custom CSS code.

How to use: Enter your specific CSS rules directly into the box.

Why it matters: While the standard Design tab covers basics like colors and fonts, a custom stylesheet allows you to add advanced effects like unique drop shadows, custom hover animations, or specific border styles that perfectly match your brand's style guide.

2. Custom Scripts (JavaScript)

This section allows you to add custom JavaScript code.

How to use: Paste your JavaScript snippets into the designated field.

Why it matters: You can use this to create advanced interactions, such as triggering a specific event when a nudge is shown or integrating TraceNudges data with other third-party analytics or marketing tools on your site.

Why Use Custom Styling?

1. Seamless Brand Integration

Every website has a unique "feel." Custom CSS ensures that your social proof notifications don't just look good, but look like they were built by your own design team.

2. Advanced Visual Control

Standard templates may have limitations. Custom styling allows you to adjust pixel-perfect spacing, layering (z-index), or responsive behavior that is specific to your site’s layout.

3. Functional Flexibility

Using custom scripts allows you to extend the core functionality of the nudges, such as adding custom tracking listeners or modifying how a nudge behaves based on complex user interactions.

💡 Pro Tip

Always test your custom code in a staging environment or on a single hidden page before applying it domain-wide. A small error in CSS or JavaScript can sometimes affect the layout or functionality of your entire website.

Custom Styling & Javascript

Understanding Custom Styling in TraceNudges#

Key Configuration Options#

1. Custom Stylesheet (CSS)#

2. Custom Scripts (JavaScript)#

Why Use Custom Styling?#

1. Seamless Brand Integration#

2. Advanced Visual Control#

3. Functional Flexibility#

💡 Pro Tip#