Custom CSS Injection

NanoLog strives to provide beautiful, modern defaults for its widget and changelog. However, we understand that Enterprise and Scale customers often have strict brand guidelines and require pixel-perfect control over every third-party component embedded on their platform.

This is why NanoLog supports Custom CSS Injection, allowing you to override our base styles and completely mold the widget to fit your application's unique aesthetic.

Why use Custom CSS?

While our standard visual options (like primary colors and dark mode) cover 90% of use cases, Custom CSS is powerful for:

1. Typography Matching: Forcing the widget to inherit your application's specific web fonts (e.g., custom @font-face rules).
2. Spacing and Layout: Adjusting padding, margins, or the border-radius of the widget popover to match the exact "glassmorphism" or "flat" style of your UI.
3. Advanced Animations: Overriding default transition speeds or adding your own CSS keyframe animations to the widget launcher.

How to Apply Custom CSS

You can add your custom CSS directly via the NanoLog Dashboard.

1. Navigate to the Widget Settings page from your sidebar.
2. Click on the Advanced or Branding tab (depending on your tier).
3. Locate the Custom CSS text area.

1. Write your CSS rules. Note that the widget's container has a specific base class (e.g., .nanolog-widget-container) which you can use to scope your styles securely.

1. Click Save Settings.

Your custom styles will immediately be injected into the Shadow DOM or main document containing the widget on your live site, seamlessly overriding the defaults.