The Banner Editor gives you full control over how your cookie consent banner looks and behaves. Every change is reflected in a live preview panel so you can see exactly what your visitors will experience before you save.
WordPress users: Banner design changes made in the Kukie.io dashboard are automatically reflected on your WordPress site. No plugin update needed. Learn more about the WordPress plugin.
Opening the Banner Editor
Navigate to your site in the dashboard and click Banner Editor in the sub-navigation. The editor opens on the Design tab, with the live preview panel on the right.
Layout Options
Kukie.io offers three layout types:
- Floating - a compact widget that appears in a corner of the screen. You can choose the position: bottom-left, bottom-right, top-left, or top-right.
- Bottom Bar / Top Bar - a full-width strip anchored to the bottom or top of the viewport.
- Popup - a centred modal with an optional backdrop overlay. Best for maximum visibility.
The position selector is only shown for the Floating layout, since bars and popups have fixed positioning.
Colour Scheme
The Theme Colours section lets you set:
- Primary colour - used for the Accept All button and accent elements.
- Background colour - the banner's background.
- Text colour - body text and headings.
Colour Source
Choose between Custom and Inherit colour modes:
- Custom - your chosen theme colours are applied with high specificity. This is the default and recommended mode.
- Inherit - the banner uses neutral defaults and allows your website's existing CSS to influence its appearance. Useful if you want the banner to blend in with your site's design system.
Border Radius
The border radius slider controls how rounded the banner corners and buttons appear. A value of 0 gives sharp corners; higher values create a softer, more modern look. The live preview updates instantly as you drag the slider.
Show Overlay
When the Popup layout is selected, you can toggle the backdrop overlay on or off. With the overlay enabled, a semi-transparent dark layer appears behind the banner to focus attention. Disabling it shows the banner without dimming the page, and an enhanced box-shadow is applied for visual separation.
Live Preview
The preview panel on the right side of the editor shows a scaled-down rendering of your banner. You can toggle between the main banner view and the preferences modal view to check both states. Every form change is reflected immediately.
Tip: Remember to click Save after making your changes. The preview reflects unsaved edits but they will not be applied to your live site until you save.