Introduction

The Privacy Overview is a detailed modal or expandable section that provides comprehensive information about your website’s privacy practices and cookie usage. When users click “Cookie Settings” or “Customize” on the cookie banner, they access the Privacy Overview, which displays all cookie categories and allows granular consent control.

This feature is essential for GDPR compliance, as it gives users the detailed information and control they need to make informed decisions about their data and privacy preferences.

What is the Privacy Overview?

The Privacy Overview serves multiple purposes:

  • Information Hub: Provides detailed explanation of data practices
  • Control Center: Allows users to customize cookie preferences
  • Transparency Tool: Shows all cookie categories with descriptions
  • Compliance Feature: Demonstrates GDPR-required granular consent
  • Trust Builder: Shows commitment to user privacy and transparency
GDPR Requirement

GDPR requires that users can give consent on a granular level – they should be able to accept some cookie categories while rejecting others. The Privacy Overview provides this capability.

Accessing Privacy Overview Settings

  1. Log in to your WordPress admin dashboard
  2. Navigate to Settings → PureDevs GDPR compliance
  3. Click the Privacy Overview tab
  4. Configure the overview content and appearance
  5. Click Save Changes when done

Privacy Overview Content

Overview Title

Description: The main heading displayed at the top of the privacy overview

Recommended Titles:

  • “Privacy Overview” – Standard, clear
  • “Cookie Settings” – Focused on cookies
  • “Privacy Preferences” – User-centric language
  • “Manage Cookies” – Action-oriented
  • “Your Privacy Choices” – Emphasizes user control

Overview Description

Purpose: Introductory paragraph explaining the purpose of cookies and privacy practices

What to Include:

  • Brief explanation of what cookies are
  • Why your site uses cookies
  • User’s right to control cookie preferences
  • How to change settings later
  • Link to full privacy policy

Example Overview Description:

This website uses cookies to improve your experience while you navigate
through the website. Cookies categorized as necessary are stored on your
browser as they are essential for basic functionalities. We also use
third-party cookies for analytics and advertising, which are only set
with your consent. You can change your preferences at any time by clicking
the cookie icon at the bottom of your screen.
  • Include prominent link to full privacy policy
  • Make it clearly visible in the overview header
  • Consider “Read Full Privacy Policy” as link text
  • Opens in new tab or modal for easy access

Configuring Individual Categories

Category Name

  • Short, descriptive title
  • Use standard terminology users recognize
  • Examples: “Analytics”, “Marketing”, “Functional”

Category Description

  • Explain what cookies in this category do
  • Why they’re used on your site
  • Specific services that set these cookies
  • Keep it 2-4 sentences for readability

Enable/Disable Category

  • Show or hide this category in the overview
  • Only display categories you actually use
  • Don’t show empty categories

Always Active Setting

  • Mark as “Always Active” if strictly necessary
  • Toggle will be disabled with “Always Active” label
  • Use only for truly essential cookies

Default State

  • On or off by default (before user interaction)
  • Must be “Off” for non-essential cookies
  • Only necessary cookies should default to “On”

Cookie Details (Optional)

  • List specific cookies in this category
  • Include cookie name, provider, purpose, duration
  • Provides transparency about exact cookies used
  • Can be shown in expandable subsection

Privacy Overview Display Options

Display Type

Choose how the Privacy Overview appears to users:

Modal/Popup (Recommended)

  • Behavior: Opens as overlay window over current page
  • Pros: Focused experience, doesn’t navigate away
  • Pros: Modern, clean appearance
  • Pros: Easy to close and return to banner
  • Best For: Most websites

Slide-Out Panel

  • Behavior: Slides in from side of screen
  • Pros: Doesn’t cover entire page
  • Pros: Smooth, modern animation
  • Cons: May be harder to read on mobile
  • Best For: Desktop-focused sites

Expandable Section

  • Behavior: Expands within cookie banner itself
  • Pros: No separate window needed
  • Cons: Can make banner very tall
  • Cons: May be cramped on mobile
  • Best For: Simple sites with few cookie categories

Full Page

  • Behavior: Navigates to separate page
  • Pros: Maximum space for content
  • Pros: Can include extensive information
  • Cons: User navigates away from current page
  • Best For: Sites with many complex cookie categories

Visual Customization

Background and Colors

  • Background Color: Overview modal background
  • Text Color: Primary text color
  • Header Background: Top section background
  • Link Color: Privacy policy and other links
  • Toggle Colors: On/off states for category toggles

Typography

  • Title Font Size: Main “Privacy Overview” heading
  • Description Font Size: Intro text
  • Category Title Font Size: Individual category names
  • Font Family: Match site fonts or use system fonts

Spacing and Layout

  • Padding: Space inside overview container
  • Category Spacing: Gap between category sections
  • Modal Width: How wide the overview appears
  • Modal Height: Maximum height (scrollable if longer)

Borders and Effects

  • Border Radius: Rounded corners on modal
  • Box Shadow: Drop shadow effect
  • Category Separators: Lines between categories
  • Overlay Opacity: Background dimming when modal is open

Privacy Overview Action Buttons

Button Configuration

The Privacy Overview includes action buttons for user decisions:

1. Accept All Button

  • Function: Enables all cookie categories
  • Label: “Accept All”, “Accept All Cookies”, “Enable All”
  • Styling: Primary button style (prominent)
  • Behavior: Saves preferences, closes overview, enables all

2. Decline/Reject All Button

  • Function: Disables all non-essential cookies
  • Label: “Reject All”, “Decline Non-Essential”, “Necessary Only”
  • Styling: Secondary button (equally prominent as Accept)
  • Behavior: Keeps only necessary cookies, closes overview

3. Save Preferences Button

  • Function: Saves custom selection made via toggles
  • Label: “Save Preferences”, “Save Settings”, “Confirm Choices”
  • Styling: Primary button style
  • Behavior: Stores individual category choices, closes overview

4. Close/Cancel Button

  • Function: Close overview without saving changes
  • Label: X icon or “Cancel”, “Close”
  • Styling: Icon button or tertiary text button
  • Behavior: Returns to banner, doesn’t change preferences
Best Practice

Place “Accept All”, “Reject All”, and “Save Preferences” buttons at the bottom of the Privacy Overview. Make them equally prominent to ensure users don’t feel pressured into accepting all cookies.

Mobile Responsiveness

Mobile Optimization

Ensure the Privacy Overview works well on mobile devices:

Layout Adjustments

  • Full-Screen Modal: Use entire screen on small devices
  • Scrollable Content: Make categories vertically scrollable
  • Stacked Buttons: Stack action buttons vertically on narrow screens
  • Larger Touch Targets: Make toggles and buttons easier to tap

Typography for Mobile

  • Slightly larger font sizes for readability
  • Shorter line lengths (easier to read)
  • Increased line height for better spacing
  • Reduce text amount if necessary

Interaction Improvements

  • Larger toggle switches for easy tapping
  • Swipe-to-close gesture support
  • Prevent body scrolling when modal is open
  • Easy-to-reach close button at top

Accessibility Considerations

Keyboard Navigation

  • All toggles accessible via keyboard (Tab, Space, Enter)
  • Logical tab order through categories
  • ESC key closes overview modal
  • Focus trap within modal (can’t tab to page behind)
  • Visible focus indicators on all interactive elements

Screen Reader Support

  • Proper ARIA roles (role=”dialog”, aria-modal=”true”)
  • aria-label on toggles describing what they control
  • Announce when toggles change state
  • Clear heading hierarchy (h2 for overview title, h3 for categories)
  • Descriptive button labels (not just icons)

Visual Accessibility

  • Sufficient color contrast (WCAG AA: 4.5:1)
  • Don’t rely solely on color to indicate toggle state
  • Use text labels in addition to visual indicators
  • Scalable text that responds to browser zoom

Example Privacy Overview Configuration

Complete Setup Example

Privacy Overview Settings:
Title: "Privacy Preferences"
Display Type: Modal/Popup
Width: 600px (desktop), 100% (mobile)
Background: #ffffff
Text Color: #333333

Overview Description:
"We use cookies to enhance your browsing experience, analyze site
traffic, and personalize content. Below you can customize which cookies
we can use. Your choices will be saved for 365 days."

Cookie Categories (4 enabled):

1. Strictly Necessary Cookies
   - Status: Always Active (no toggle)
   - Description: "Essential cookies required for the website to function
     properly. These include session cookies, security cookies, and basic
     functionality cookies."

2. Functional Cookies
   - Toggle: Enabled, Default: Off
   - Description: "These cookies remember your preferences like language
     and region settings to provide a personalized experience."

3. Analytics Cookies
   - Toggle: Enabled, Default: Off
   - Description: "We use Google Analytics to understand how visitors
     interact with our website. This helps us improve our content and
     user experience."

4. Marketing Cookies
   - Toggle: Enabled, Default: Off
   - Description: "These cookies track your browsing to show you relevant
     ads on other websites. They are set by our advertising partners."

Action Buttons:
- Accept All: Enabled, Label: "Accept All Cookies"
- Reject All: Enabled, Label: "Only Necessary Cookies"
- Save Preferences: Enabled, Label: "Save My Preferences"
- Close Button: X icon, top-right corner

Testing the Privacy Overview

Functionality Tests

  1. Click “Cookie Settings” button on banner – overview should open
  2. Toggle each category on/off – toggles should respond
  3. Click “Accept All” – all categories should enable
  4. Click “Reject All” – only necessary cookies should remain
  5. Make custom selection and click “Save” – preferences should save
  6. Close overview and reopen – saved preferences should persist
  7. Test privacy policy link – should open correctly

Visual Tests

  1. Test on various screen sizes (mobile, tablet, desktop)
  2. Verify all text is readable and properly styled
  3. Check that toggles are clearly on/off
  4. Ensure buttons are properly aligned and sized
  5. Verify modal centers properly on screen
  6. Check background overlay appears and dims page

Accessibility Tests

  1. Navigate entire overview using only keyboard
  2. Test with screen reader (NVDA, JAWS, VoiceOver)
  3. Verify focus indicators are visible
  4. Check color contrast with accessibility tools
  5. Test ESC key closes modal

Best Practices Summary

  • ✅ Provide clear, honest descriptions for each cookie category
  • ✅ Make “Reject All” as prominent as “Accept All”
  • ✅ Only mark truly essential cookies as “Always Active”
  • ✅ Default all non-essential categories to disabled/off
  • ✅ Include link to full privacy policy
  • ✅ Make overview mobile-responsive
  • ✅ Ensure keyboard and screen reader accessibility
  • ✅ Use clear category names users understand
  • ✅ Test all toggles and buttons work correctly
  • ✅ Save user preferences and respect their choices
  • ❌ Don’t pre-select non-essential cookies
  • ❌ Don’t hide “Reject All” or make it harder to find
  • ❌ Don’t use confusing or misleading category names
  • ❌ Don’t make overview inaccessible on mobile