QookieQloud

How to Customize Your Consent Banner in QookieQloud™

Learn how to customize your cookie consent banner in QookieQloud—adjust design, language, links, colors, and behavior to match your brand and compliance needs.

By QookieQloud Crew

Your cookie banner is often the first touchpoint visitors have with your brand’s privacy standards. With QookieQloud™, you can easily adapt the look, language, and behavior to match your website design while maintaining strict compliance.

Where to customize

In your domain dashboard, select your domain and click Customize in the side navigation menu. You will enter the live interactive customizer with real-time preview.

Select a domain first. Customize contains the banner appearance, consent mode and services. Open Settings → Connection for API v1, the API v2 Site Key, installation code and connected integrations. Under Settings → Notifications, you can enable monthly audit reports and pause activity reminders.

What you can customize

Banner Layout

Choose Classic (Center Modal), Classic Minimal, Floating Bottom Card, Slim Sidebar (left or right), or WideBanner. Manage the DSR tab on Premium under Settings → Privacy requests. Configure your DSR fields →

Qookie Eyes Widget

Position the persistent settings icon on the Left, Right, or hide it to use a custom footer link¹.

Colors & Contrast

Get a palette suggestion from your website or choose colors manually. Preview light and dark variants and review the live contrast checks before saving. Automatic website color matching requires Premium or higher. Standard retains manual color choices.

Copy & Languages

Edit the introduction under Layout. On the Free plan, choose the banner language in the Language tab. Colors, logo and available customization options depend on your plan.

Match the colors of your website

Automatic website color matching requires Premium or higher. Standard retains manual color choices. On plans with color customization, QookieQloud can suggest a complete banner palette from the selected domain. It reads visible website colors and recognizable brand and accent colors in the styling. You can still change every color yourself.

  1. Open Customize → Colors and select the light or dark theme.
  2. Click Get website colors in the card header, before Save.
  3. Review the proposal in the banner preview. Choose Use these colors to keep it or Restore my colors to return to your previous choices.
  4. Fine-tune the colors, review the contrast checks and click Save to publish your changes.

Fetch colors separately for each theme. If the website has no dark styling, both suggestions may be similar. Fetching a proposal does not save it. Contrast adjustments help with readability, but you should review the result on your website.

Choose from six banner layouts

All six are available under Customize → Layout. Compare their placement and the key differences below.

Classic – Center Modal

A centered dialog with cookie categories visible straight away.

Classic Minimal

A centered dialog with text and buttons first. Customize opens the category choices.

Slim Sidebar – Left

A narrow banner in the bottom-left corner.

Slim Sidebar – Right

A narrow banner in the bottom-right corner.

Floating Bottom Card

A separate card floating near the bottom of the page.

WideBanner – Full Width

A banner spanning the full width at the bottom of the page.

Classic or Classic Minimal?

Classic shows the cookie categories in the initial dialog. Classic Minimal uses the same dialog design but starts with the description and action buttons; visitors open the category choices with Customize Choices. Accept and decline remain available in the initial view.

Set up your banner layout

  1. Open your domain and go to Customize → Layout. Choose the layout that suits your website.
  2. Under Style, choose dialog and button corner radii with the searchable pixel selectors. Adjust the shadow and choose Compact, Comfortable or Spacious spacing. Use the reset actions to return to the selected layout’s defaults.
  3. Add an optional introduction and links to your privacy policy and terms. Configure colors and light/dark variants under Colors, and your logo under Logo where your plan supports it.
  4. Open the preview, try the category choices and both color themes, then Save. Check the banner on your website at desktop and mobile widths after saving.
The settings panel is shared

Classic Minimal changes the first banner view. Visitors can still reopen their consent settings through Qookie Eyes or your own settings link. The Details tab lists cookies by category and platform or domain, with available descriptions, storage durations and provider information. Missing catalog information is not filled in automatically.

¹ Using custom footer links

If you choose to hide the floating Qookie Eyes icon, you must provide a way for users to reopen the preference center at any time. Simply add the following CSS classes to any link or button in your website footer:

  • class="qookieqloud-settings-panel" – opens the cookie settings panel.
  • class="qookieqloud-dsr-panel" – opens directly to the DSR (Privacy Rights) tab.

Video Demonstration

See how easy it is to adjust layouts, test color contrast against WCAG guidelines, and preview changes live:

The video may show an earlier version of Customize. Follow the steps above for Classic Minimal and the current style controls.

▶ Watch video: How to Customize Your Consent Banner

Need more help?

Tell us what you are working on. We will help you find the next step.

Newsletter

Product news and tips from QookieQloud, delivered to your inbox.

Privacy policy