Core Features Cookie Consent Banner
Last Updated: Nov 26, 2025
6 min read
Introduction
The Cookie Consent Banner is the cornerstone of PureDevs GDPR Compliance. It’s the visible notice that informs visitors about your site’s cookie usage and requests their consent before tracking technologies are activated. This feature ensures your website complies with GDPR requirements for informed consent.
A properly configured cookie banner protects your visitors’ privacy rights while maintaining transparency about data collection practices.
Why Cookie Banners Are Required
Under GDPR and similar privacy regulations, websites must:
- Inform users: Clearly explain what cookies are used and why
- Obtain consent: Get explicit permission before setting non-essential cookies
- Provide choice: Allow users to accept, decline, or customize preferences
- Respect decisions: Honor user choices and don’t block access for declining
- Allow withdrawal: Let users change their mind at any time
Legal Requirement
Failing to obtain proper cookie consent can result in significant fines under GDPR. The cookie banner is not optional for sites that use tracking cookies or have EU visitors.
Banner Display Types
PureDevs GDPR Compliance offers three banner display styles to suit different needs:
1. Bottom Banner
Characteristics:
- Appears at the bottom of the viewport
- Stays fixed while scrolling
- Doesn’t block main content
- Subtle yet compliant
Best for:
- Content-heavy websites where visibility is important
- Sites wanting better user experience
- Mobile-friendly implementations
- News sites, blogs, portfolio sites
2. Top Banner
Characteristics:
- Appears at the top of the viewport
- More prominent and noticeable
- Can push content down slightly
- Higher visibility
Best for:
- Sites prioritizing compliance visibility
- Corporate or business websites
- Sites with critical compliance requirements
- Government or institutional sites
Characteristics:
- Appears as centered overlay
- Dims background content
- Requires user interaction
- Most intrusive but ensures acknowledgment
Best for:
- Sites requiring explicit consent acknowledgment
- High-compliance environments
- Data-sensitive applications
- Healthcare or financial sites
Recommendation
For most websites, the bottom banner offers the best balance between compliance and user experience. Use popup only when strict compliance acknowledgment is required.
Banner Elements
A complete cookie consent banner includes these essential elements:
1. Consent Message
- Clear explanation of cookie usage
- Simple, non-technical language
- Brief but informative
- Customizable text
Example:
"We use cookies to ensure you get the best experience on our website. By continuing to browse, you agree to our use of cookies."
- Primary action for consent
- Dismisses banner and stores consent
- Enables all approved cookies
- Customizable label and styling
- Allows users to reject non-essential cookies
- Required for full GDPR compliance
- Should be equally prominent as Accept
- Records user’s decline preference
- Opens detailed cookie preferences
- Allows granular control over cookie categories
- Shows cookie descriptions
- Enables partial consent
5. Privacy Policy Link
- Links to full privacy policy
- Provides detailed information
- Required for GDPR compliance
- Opens in new tab or same page
6. Cookie Policy Link (Optional)
- Dedicated page for cookie information
- Lists all cookies used
- Explains cookie purposes
- Provides duration information
Configuring the Cookie Banner
Access Banner Settings
- Go to Settings → PureDevs GDPR compliance
- Click the Banner Settings tab
- You’ll see options for message, buttons, and appearance
Essential Configuration Steps
1. Banner Message
- Enter your cookie notice text in the message field
- Keep it concise (2-3 sentences maximum)
- Mention what cookies are used for
- Reference privacy policy for details
2. Button Labels
- Accept Button: “Accept All”, “I Agree”, “Got It”
- Decline Button: “Decline”, “No Thanks”, “Reject”
- Settings Button: “Cookie Settings”, “Customize”, “Preferences”
3. Button Actions
- Enable/disable each button
- Set button order and positioning
- Configure what happens on click
4. Links Configuration
- Add Privacy Policy URL
- Add Cookie Policy URL (optional)
- Choose link behavior (new tab or same page)
5. Visual Appearance
- Background color
- Text color
- Border styling
- Opacity/transparency
- Font size and family
Banner Behavior and Logic
When Banner Appears
The cookie banner displays:
- First Visit: Always shows to new visitors
- No Consent Stored: When browser has no consent cookie
- Consent Expired: After consent cookie expires (configurable duration)
- Cookies Cleared: If user clears browser cookies
- Policy Updated: Optionally show after privacy policy changes
When Banner Hides
The banner disappears when:
- User clicks Accept button
- User clicks Decline button
- User saves custom preferences
- Consent is recorded and cookie is set
Consent Storage
User consent is stored via:
- Cookie: Browser cookie records consent choice
- Duration: Configurable expiration (default 365 days)
- Scope: Domain-wide or subdomain-specific
- Logging: Optional consent logging to database
Cookie Banner Best Practices
Content Best Practices
- Be Clear: Use simple, jargon-free language
- Be Honest: Accurately describe cookie usage
- Be Concise: Keep banner text brief and scannable
- Be Specific: Mention main purposes (analytics, marketing, etc.)
Design Best Practices
- Readable: Ensure text contrasts with background
- Accessible: Use ARIA labels and keyboard navigation
- Mobile-Friendly: Test on various screen sizes
- On-Brand: Match your site’s visual identity
Compliance Best Practices
- Equal Prominence: Make Decline as easy as Accept
- Pre-Consent Blocking: Don’t load tracking before consent
- Granular Control: Offer cookie category choices
- Easy Withdrawal: Provide clear way to change preferences
UX Best Practices
- Don’t Block Content: Unless legally required
- Show Once: Don’t repeatedly show to same user
- Fast Loading: Ensure banner doesn’t slow page load
- Respect Choice: Don’t shame users for declining
Common Mistakes to Avoid
1. Pre-Ticked Boxes
- Don’t pre-select optional cookie categories
- Consent must be active opt-in, not passive
- Default to “unchecked” for non-essential cookies
2. Cookie Walls
- Don’t block all content if user declines
- Access to content shouldn’t require accepting cookies
- Only block specific features that need cookies
3. Unclear Language
- Avoid technical jargon like “third-party pixels”
- Don’t hide important info in small print
- Be explicit about tracking and profiling
4. Hidden Decline Option
- Don’t make decline harder to find than accept
- Both options should be equally visible
- Don’t use dark patterns to trick users
5. Loading Cookies Before Consent
- Don’t set tracking cookies before user accepts
- Wait for explicit consent
- Only strictly necessary cookies can load pre-consent
Testing Your Cookie Banner
Visual Tests
- Open site in private/incognito window
- Verify banner appears immediately
- Check all text is readable
- Confirm buttons are properly styled
- Test on desktop and mobile
Functionality Tests
- Click Accept – banner should disappear
- Refresh page – banner shouldn’t reappear
- Clear cookies – banner should show again
- Click Decline – verify non-essential cookies aren’t set
- Test Settings button opens preferences
- Verify floating button appears after dismissing banner
Compliance Tests
- Check that tracking scripts don’t load before consent
- Verify decline option is equally prominent
- Confirm privacy policy link works
- Test that preferences can be changed via floating button