The Cookie Consent Banner is a small, customizable notification that appears at the bottom of your site. It informs users that cookies are being used, and allows them to either accept or decline.
1. Consent Duration & Display Behavior
Consent Validity Period: 20 Days
Defines how long the user's cookie preference is remembered.
After 20 days, the banner will appear again unless they accept or decline it once more.
2. Banner Content & Messaging
Banner Title:
🍪 Cookie Settings
The heading shown at the top of the banner.
Title Alignment:Left Aligned
Title Color:#222222 – dark grey for readability.
Message Text:
“We use cookies to optimize your browsing experience. Click 'Allow' to consent to our cookie policy.”
You can format this message with HTML for links, bolding, etc.
Body Text Color:#787878
Message Font Size:16px
You should keep the message clear and polite, without overwhelming the visitor.
3. Banner Appearance – Desktop & Mobile
Maximum Width
Desktop:620px
Mobile:360px
Gradient Background
Enable Gradient Background: ✅
Enables a soft, multi-tone background instead of a solid color.
Primary Gradient Color:#FAFAFA
Secondary Gradient Color:#F7F7F7
Tertiary Gradient Color (optional):#FBFBFB
Gradient Angle:270° – background fades vertically from top to bottom.
Solid Background Fallback:#FCFCFC
Corner Rounding:10
Creates subtle rounded corners for the whole banner.
4. Desktop Banner Padding & Positioning
Top Padding:33px
Bottom Padding:13px
Horizontal Padding:40px
Vertical Offset:30px – distance from the bottom edge of the screen.
Placement:Bottom Left
Appears in the bottom left corner on desktop.
Activate Desktop Banner Slider: ✅
Enables horizontal repositioning using the setting below.
Horizontal Offset:-300px
Pushes the banner left or right (negative values move left, positive = right).
5. Mobile Banner Padding & Positioning
Vertical Offset:100px
Banner Placement:Bottom Center
Activate Mobile Banner Slider: ✅
Horizontal Offset:0 (centered by default)
Padding Inside the Banner (Mobile):
Top:20px
Bottom:20px
Left / Right:51px each
Keeps the text visually balanced and easy to read on mobile screens.
6. Shadow Effect
Shadow Intensity:Medium Shadow
Adds depth and separation between the banner and the rest of the site content.
7. Alternative Layout Options (Desktop Only)
Activate Alternative Desktop Layout: ✅
Moves the accept/decline buttons to the right of the message instead of stacking them below. This creates a sleeker, inline look — ideal for desktop spacing.
8. Accept Button Styling
Label:"Allow"
Background Color:#3A3A3A
Text Color:#FFFFFF
Border Color:#C5C5C5
Border Thickness:1px
Corner Radius:9px
Rounded button with a sleek, minimal design.
9. Decline Button Styling (Optional)
Label:"Decline"
URL for Decline Action: Paste your link (optional – useful for redirecting to a "Learn more" page or custom policy)
Background Color:#FFFFFF
Text Color:#000000
Border Color:#000000
Border Thickness:1px
Corner Radius:7px
Creates a secondary-style, outlined decline button for balance.
Summary
This Cookie Consent Banner system gives you full visual control while ensuring compliance, clarity, and a clean user experience across devices. With:
Gradient or solid backgrounds
Glassy shadows and rounded edges
Adjustable button styling
Separate mobile + desktop positioning
…it’s ideal for modern brands who want to stay compliant without disrupting the design.
