Consent Banner Design

Customize the appearance of your CookieFrame consent banner with colors, layouts, and styling options.

CookieFrame provides extensive customization options to match your consent banner with your website's design. All design settings are available in Settings → Design in your dashboard.

Choose the layout that best fits your website:

Type	Description	Best For
Banner	Full-width bar at top or bottom of screen	Most websites, high visibility
Floating	Compact card in corner	Minimal intrusion, modern sites
Dialog	Centered modal overlay	Maximum attention, important consent
Popup	Small popup window	Secondary consent requests

[SCREENSHOT PLACEHOLDER: Side-by-side comparison of widget types]

Positioning

Banners can be placed at the top or bottom of the viewport. Bottom placement is most common as it doesn't push page content down.

Floating Position

Floating widgets can be positioned in either corner:

bottom-left
bottom-right

Dialog Position

Dialogs are always centered on screen for maximum visibility.

Colors

Customize your banner colors using hex values:

Setting	Description	Default
Primary Color	Links, accents, and highlights	`#000000`
Background Color	Banner background	`#FFFFFF`
Text Color	Body text	`#000000`
Button Background	Accept/Reject button fill	`#000000`
Button Text	Button label color	`#FFFFFF`

Use sufficient contrast between text and background colors to ensure accessibility. A contrast ratio of at least 4.5:1 is recommended for body text.

Typography

Size	Body Text	Headings
Small	13px	Proportional
Medium	14px	Proportional
Large	16px	Proportional

Content Alignment

Align text within the banner:

left - Standard reading flow
center - Symmetrical appearance
right - Right-to-left language support

Buttons

Button Style

Style	Description
Filled	Solid background color
Outline	Transparent with border

Button Radius

Control corner roundness from 0px (square) to 24px (rounded). This applies to all buttons in the banner.

Box Radius

The banner container itself can have rounded corners from 0px to 24px. This is most visible on floating and dialog widget types.

Overlay

For dialog and popup widget types, you can configure a background overlay:

Setting	Description	Range
Overlay Enabled	Show/hide the overlay	On/Off
Overlay Color	Background color (hex)	Any
Overlay Opacity	Transparency level	0-100%
Overlay Blur	Background blur effect	On/Off

An overlay helps focus user attention on the consent dialog but may feel intrusive. Test with your audience to find the right balance.

Floating Button

When using the floating widget type, you can customize the toggle button that remains visible after the banner is dismissed:

Icon Options

cookie - Simple cookie outline
cookie-colored - Cookie with color accents
fingerprint - Privacy/security themed

Floating Button Colors

The floating button has its own color settings separate from the main banner, allowing it to stand out or blend in as needed.

White Label (Business Plan)

Remove CookieFrame branding and add your own logo.

Custom Logo

Upload your logo to display in the consent banner. Supported formats: PNG, JPG, SVG.

Setting	Options
Logo Placement	Banner only, Preferences only, Both
Logo Size	Small (32px), Medium (40px), Large (52px)

Remove Branding

Enable "Remove Branding" to hide the "Powered by CookieFrame" text from your consent banner.

White label features require a Business plan or higher. Upgrade in Settings → Billing.

Custom CSS (Pro Plan)

For advanced customization beyond the built-in options, inject custom CSS targeting CookieFrame elements.

CSS Selectors

All CookieFrame elements use the .cf- prefix:

/* Main container */
.cf-banner { }

/* Button elements */
.cf-button { }
.cf-button-accept { }
.cf-button-reject { }
.cf-button-preferences { }

/* Text elements */
.cf-title { }
.cf-description { }

/* Category toggles */
.cf-category { }
.cf-toggle { }

Example: Custom Font

.cf-banner {
  font-family: 'Inter', sans-serif;
}

Example: Custom Button Hover

.cf-button-accept:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

Custom CSS requires a Pro plan or higher. Test thoroughly as CSS changes may affect accessibility and mobile responsiveness.

Plan Limitations

Feature	Free	Pro	Business
Widget types	All	All	All
Colors	All	All	All
Typography	All	All	All
Custom CSS	—	✓	✓
White label	—	—	✓
Custom logo	—	—	✓

Preview Changes

Use the live preview in Settings → Design to see your changes in real-time before publishing. The preview shows both the initial banner and the preferences dialog.

Next Steps

Cookie Scanning - Detect cookies on your site
Compliance Frameworks - Configure GDPR, CCPA, or TCF
Integrations - Install the widget on your site

Widget Types