Skip to main content
C
CookieBeam
Back to Guides
Setup5 min read

How to Customize Your Cookie Banner Design

Make your CookieBeam consent banner match your brand. Customize colors, typography, layout, button styles, and positioning without writing code.

The Banner Editor

CookieBeam's visual Banner Editor lets you style every aspect of your consent banner without writing CSS. Open it from the dashboard by clicking Edit Banner on any banner, then switch to the Design tab.

Every change you make appears instantly in the live preview on the right side of the screen. The preview toggles between desktop and mobile so you can check both layouts before publishing.

Brand Colors

Under Design → Colors, you can set:

  • Primary color — used for accept/allow buttons and active toggles. Set this to your brand's primary action color.
  • Background color — the banner's main background. White or your brand's surface color works well.
  • Text color — body text inside the banner. Make sure it has at least a 4.5:1 contrast ratio against the background (WCAG AA).
  • Button text color — text on the primary button. Usually white on a dark primary, or dark on a light primary.
  • Secondary button style — the "Reject" or "Manage Preferences" button can be outlined, text-only, or filled with a secondary color.
  • Link color — used for the privacy-policy and cookie-policy links within the banner text.

Use the color picker or paste a hex code directly. CookieBeam validates contrast ratios and warns you if a combination fails accessibility checks.

Layout Options

CookieBeam ships with seven layout presets, each designed for a different use case:

  • Banner Bottom — a full-width bar fixed to the bottom of the viewport. The most common choice; unobtrusive on desktop, stacks neatly on mobile.
  • Banner Top — same bar, pinned to the top. Useful when your site has sticky bottom navigation that the banner would cover.
  • Popup Center — a modal dialog in the center of the screen with a dimmed overlay. High visibility, best for sites that need strong opt-in rates.
  • Popup Bottom-Left / Bottom-Right — a compact card anchored to a corner. Less intrusive than a full bar; works well for returning visitors.
  • Inline — renders inside a container element you specify. Use this to embed consent choices within a settings page or a preference center.
  • Floating — a minimal floating button that expands on click. The lightest-touch option.

Select a layout under Design → Layout. Each preset automatically adjusts padding, width, and border radius for the form factor.

Typography

Under Design → Typography, you can configure:

  • Font family — choose from system fonts, Google Fonts, or paste a custom font-face URL. Using the same font as your site creates a seamless look.
  • Heading size — controls the banner title (if enabled).
  • Body size — controls the description text and category labels.
  • Button size — controls text on action buttons.

The banner inherits your site's base font size by default. Adjust only if the banner looks out of proportion with the rest of your page.

Button Configuration

The buttons are the most important part of your banner for both compliance and conversion. Under Design → Buttons:

  • Accept All / Allow All — always visible. Customize the label ("Accept", "Allow Cookies", "Got it", etc.).
  • Reject All / Deny All — required by GDPR and CNIL. Must be equally prominent as Accept under French and many EU interpretations. CookieBeam ensures equal visual weight by default.
  • Manage Preferences — opens the detailed preference panel where users toggle individual categories. You can set this as a link or a button.
  • Save Preferences — appears in the preference panel. Confirms the user's granular choices.

Button corner radius, padding, and hover effects are configured in the Design tab. For A/B testing different button labels or styles, see the Banner Setup Guide.

The Preference Panel

When a visitor clicks "Manage Preferences", they see a detailed view of each cookie category with a toggle. You can customize:

  • Category descriptions — explain what each category does in plain language. Avoid legal jargon.
  • Cookie tables — optionally show the individual cookies in each category with their name, vendor, purpose, and expiry. CookieBeam populates these from your scan results automatically.
  • Toggle style — switch between toggle sliders and checkboxes.

The Necessary category toggle is always on and cannot be turned off. This is enforced at the code level, not just visually.

Dark Mode

CookieBeam supports automatic dark-mode detection. When enabled, the banner switches to your dark-mode color palette when the visitor's system preference is set to dark. Configure the dark-mode palette under Design → Dark Mode.

If your site does not support dark mode, leave this disabled. The banner will always use the light palette.

Custom CSS

For advanced customization beyond the visual editor, CookieBeam supports a Custom CSS field under Design → Advanced. Styles you add here are scoped to the banner's shadow DOM and will not leak into your page.

Use custom CSS sparingly. The visual editor covers 95% of styling needs, and custom CSS may break when CookieBeam updates its banner markup. If you need a design change that the editor does not support, contact support and we may add it to the editor in a future release.

Publishing Your Design

After you finish customizing, click Publish in the top-right corner. CookieBeam builds a new version of your banner script and pushes it to the CDN. The update goes live within seconds; visitors see the new design on their next page load.

You can always revert to a previous version from the Version History panel if a design change does not look right in production.

Back to all guides