Introduction

The Floating Button is a persistent icon that appears on your website after users dismiss the initial cookie consent banner. It provides continuous access to cookie preferences, allowing visitors to review and change their consent choices at any time – a fundamental GDPR requirement.

This guide covers all aspects of configuring and customizing the floating button to ensure it’s accessible, visible, and aligned with your site’s design while maintaining compliance.

Why the Floating Button is Important

The floating button serves several critical purposes:

  • GDPR Compliance: Provides easy consent withdrawal as required by law
  • User Empowerment: Gives continuous control over privacy preferences
  • Transparency: Always-visible reminder of privacy options
  • Accessibility: Persistent access from any page
  • Trust Building: Demonstrates commitment to privacy rights
GDPR Requirement

GDPR Article 7(3) requires that withdrawing consent must be as easy as giving it. The floating button fulfills this requirement by providing persistent, easy access to cookie preferences.

Accessing Floating Button Settings

  1. Log in to your WordPress admin dashboard
  2. Navigate to Settings → PureDevs GDPR compliance
  3. Click the Floating Button tab
  4. Configure button appearance and behavior
  5. Use Live Preview to see changes
  6. Click Save Changes when done

Enable/Disable Floating Button

Setting: Show Floating Button

Options:

  • Enabled: Button appears after banner is dismissed
  • Disabled: No floating button shown

When to Enable:

  • You want to provide easy access to cookie preferences (recommended)
  • Your site targets EU visitors requiring GDPR compliance
  • You want to demonstrate privacy commitment
  • Users need to frequently change cookie settings

When to Disable:

  • You provide alternative access (footer link, menu item)
  • Floating button conflicts with existing site elements
  • Minimalist design preference (but ensure alternative access)
Recommendation

Keep the floating button enabled for optimal GDPR compliance and user experience. If disabled, provide clear alternative access to cookie preferences.

Button Position

Setting: Screen Position

Available Positions:

Bottom Left

  • Characteristics: Left side, near bottom of viewport
  • Best For: Sites with right-side CTAs or chat widgets
  • Visibility: Good, doesn’t conflict with scroll-to-top buttons
  • Common Usage: Very popular choice

Bottom Right (Most Common)

  • Characteristics: Right side, near bottom of viewport
  • Best For: Most websites, standard position
  • Visibility: High visibility, familiar location
  • Common Usage: Default and most widely used

Top Left

  • Characteristics: Left side, near top of viewport
  • Best For: Sites where bottom is crowded
  • Visibility: Very visible but less common
  • Common Usage: Rarely used

Top Right

  • Characteristics: Right side, near top of viewport
  • Best For: Professional sites, corporate pages
  • Visibility: High but may conflict with navigation
  • Common Usage: Occasionally used

Left Center

  • Characteristics: Left side, vertically centered
  • Best For: Unique positioning, standalone presence
  • Visibility: Good if not covered by content
  • Common Usage: Less common

Right Center

  • Characteristics: Right side, vertically centered
  • Best For: Modern designs, unique layouts
  • Visibility: High visibility position
  • Common Usage: Moderate

Recommendation:

Use bottom right for most websites. It’s the most familiar position for users, doesn’t interfere with navigation, and is easily accessible. Choose bottom left if you have chat widgets or CTAs on the right side.

Button Offset and Spacing

Offset from Edges

Horizontal Offset (from left/right edge):

  • Default: 20-30px from edge
  • Desktop: 20-40px (more space available)
  • Mobile: 15-20px (maximize screen space)
  • Purpose: Prevent button from touching screen edge

Vertical Offset (from top/bottom edge):

  • Default: 20-30px from edge
  • Bottom Position: 20-40px from bottom
  • Top Position: 20-40px from top (clear of navigation)
  • Center Position: No vertical offset needed

Z-Index

  • Setting: Layering priority of floating button
  • Default: 999 or 9999
  • Ensure: Button appears above content but below modals
  • Adjust If: Button is hidden by other elements

Conflict Prevention

Adjust position to avoid conflicts with:

  • Chat widgets (LiveChat, Intercom, etc.)
  • Scroll-to-top buttons
  • Sticky navigation bars
  • Other floating elements
  • Bottom navigation bars (mobile)

Button Appearance

Button Shape

Options:

  • Circle: Round button, icon only, compact
  • Rounded Square: Square with rounded corners
  • Pill: Oval shape, can include text
  • Square: Sharp corners, modern look

Button Size

Dimensions:

  • Small: 40x40px (compact, icon only)
  • Medium: 48x48px (standard, recommended)
  • Large: 56x56px (high visibility)
  • Extra Large: 64x64px (maximum accessibility)

With Text:

  • Width: Auto (based on text length)
  • Height: 40-48px
  • Padding: 12-20px horizontal

Accessibility Requirement:

  • Minimum 44x44px for touch targets
  • 48x48px recommended for mobile
  • Ensure easy clicking/tapping

Icon and Text Options

Icon Selection

Common Icons:

  • Cookie Icon: 🍪 Most recognizable and common
  • Settings/Gear: ⚙ Indicates settings/preferences
  • Shield: Privacy/security symbol
  • Info Icon: ℹ Information/details
  • Sliders: Control/adjustment symbol
  • Lock: Privacy/security indicator
  • Custom Icon: Upload your own SVG/icon

Recommendation: Use cookie icon 🍪 as it’s universally recognized.

Button Text

Icon-Only Button (Recommended):

  • No visible text, just icon
  • Compact and clean
  • Must include aria-label for accessibility
  • Works in all languages

Icon + Text Button:

  • Short Text: “Cookies”, “Privacy”, “Settings”
  • Descriptive: “Cookie Settings”, “Privacy Preferences”
  • Language: Must translate for multilingual sites
  • Size: Requires wider button

Tooltip

  • Enable Tooltip: Show text on hover
  • Tooltip Text: “Cookie Settings”, “Manage Privacy Preferences”
  • Delay: 300-500ms hover delay
  • Position: Above or beside button

Colors and Styling

Background Color

Options:

  • Brand Color: Match site primary color
  • Neutral: Gray (#6c757d), white, black
  • Blue: #0066cc (universal, trust-building)
  • Contrast: Ensure visibility against page background

Icon Color

  • White: On dark background buttons
  • Dark: On light background buttons
  • Brand Color: If using white/transparent background
  • Contrast: Minimum 4.5:1 ratio with background

Border

  • No Border: Clean, modern look
  • Subtle Border: 1-2px, slightly darker than background
  • Contrasting Border: Distinct outline for visibility

Shadow

Box Shadow Options:

/* Subtle shadow */
box-shadow: 0 2px 8px rgba(0,0,0,0.15);

/* Medium shadow (recommended) */
box-shadow: 0 4px 12px rgba(0,0,0,0.2);

/* Strong shadow */
box-shadow: 0 6px 16px rgba(0,0,0,0.3);

/* No shadow (flat design) */
box-shadow: none;

Opacity

  • Fully Opaque: opacity: 1 (default)
  • Semi-Transparent: opacity: 0.9-0.95 (subtle)
  • Lower Opacity: opacity: 0.7-0.8 (when inactive)
  • Hover: opacity: 1 on hover for full visibility

Hover and Interaction Behavior

Hover Effects

Scale Effect:

button:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

Color Change:

button:hover {
    background-color: #0052a3; /* Darker shade */
    transition: background-color 0.2s ease;
}

Shadow Increase:

button:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    transition: box-shadow 0.2s ease;
}

Combined Effects:

button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    background-color: #0052a3;
    transition: all 0.2s ease;
}

Active/Click State

  • Scale Down: transform: scale(0.95)
  • Darker Background: Even darker than hover
  • Reduced Shadow: Less elevation
  • Quick Transition: 0.1s for immediate feedback

Animation

Entrance Animation:

  • Slide In: Slides from edge when page loads
  • Fade In: Gradual opacity increase
  • Scale In: Grows from small to full size
  • Delay: 1-2 seconds after banner dismissed

Attention Animation (Optional):

  • Pulse: Periodic scale/glow effect
  • Bounce: Subtle bounce every few seconds
  • Glow: Periodic shadow/outline glow
  • Use Sparingly: Can be distracting if overused

Mobile-Specific Settings

Mobile Position

  • Same as Desktop: Consistent across devices
  • Different Position: Optimize for mobile layout
  • Common Mobile Position: Bottom right or bottom center
  • Avoid: Positions that block key content or navigation

Mobile Size

  • Larger on Mobile: 48-56px for easy tapping
  • Smaller on Desktop: 40-48px to save space
  • Responsive Sizing: Adjust via CSS media queries

Mobile Offset

  • Reduce offset to 15-20px (save space)
  • Ensure button doesn’t interfere with mobile navigation
  • Account for mobile browser UI (address bar, bottom bar)
  • Test on actual devices

Hide on Mobile (Optional)

  • When to Hide: If mobile layout is too crowded
  • Alternative: Provide footer link or menu item
  • Consideration: Reduces accessibility of preferences

Accessibility Settings

ARIA Labels

<button aria-label="Cookie Settings"
        aria-describedby="cookie-tooltip">
    <svg>...</svg>
</button>
  • Always include aria-label for icon-only buttons
  • Descriptive text for screen readers
  • Clear purpose indication

Keyboard Navigation

  • Tab Accessible: Button must be in tab order
  • Enter/Space: Activate button with keyboard
  • Focus Indicator: Clear visual focus state
  • Skip to Content: Don’t trap focus

Focus State

button:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

Color Contrast

  • Icon vs background: 3:1 minimum (WCAG Level AA)
  • Button vs page background: Ensure visibility
  • Test with color blindness simulators

Behavior Settings

When to Show

Visibility Conditions:

  • After Banner Dismissed: Only show after user makes choice
  • Always Visible: Show even before consent given
  • Delay: Wait 1-2 seconds after banner dismissed
  • Scroll Trigger: Show after user scrolls X pixels

Click Behavior

What happens when clicked:

  • Open Privacy Overview: Shows cookie preferences modal (recommended)
  • Open Banner: Re-shows the cookie consent banner
  • Navigate to Page: Go to dedicated privacy page
  • Custom Action: Trigger custom JavaScript function

Auto-Hide

  • Hide on Scroll: Disappear when scrolling (reappears when stopped)
  • Hide After Time: Fade out after X seconds of inactivity
  • Always Visible: Never hide (recommended for compliance)

Example Configurations

Position: Bottom Right
Offset: 20px from right, 20px from bottom
Size: 48x48px
Shape: Circle
Icon: Cookie emoji 🍪
Background: #0066cc
Icon Color: #ffffff
Shadow: 0 4px 12px rgba(0,0,0,0.2)
Hover: Scale(1.1) + darker background
Tooltip: "Cookie Settings"
ARIA Label: "Manage cookie preferences"

Minimal/Subtle Configuration

Position: Bottom Right
Offset: 20px from edges
Size: 44x44px
Shape: Circle
Icon: Settings gear ⚙
Background: #ffffff
Icon Color: #6c757d
Border: 1px solid rgba(0,0,0,0.1)
Shadow: 0 2px 8px rgba(0,0,0,0.1)
Opacity: 0.8 (1.0 on hover)
Tooltip: "Privacy"

High Visibility Configuration

Position: Bottom Right
Offset: 30px from edges
Size: 56x56px
Shape: Rounded square
Icon + Text: 🍪 "Cookies"
Background: Brand color (#e63946)
Text Color: #ffffff
Shadow: 0 6px 16px rgba(230,57,70,0.3)
Hover: Scale(1.15) + pulse animation
Border: 2px solid rgba(255,255,255,0.3)

Best Practices

  • ✅ Enable floating button for easy consent withdrawal
  • ✅ Use bottom right position (most familiar to users)
  • ✅ Minimum 44x44px size for accessibility
  • ✅ Include clear ARIA labels for screen readers
  • ✅ Ensure good color contrast with page background
  • ✅ Add visible focus state for keyboard users
  • ✅ Use recognizable cookie icon 🍪
  • ✅ Test on mobile devices for proper positioning
  • ✅ Make button always visible (don’t auto-hide)
  • ✅ Provide tooltip for icon-only buttons
  • ❌ Don’t make button too small (below 40px)
  • ❌ Don’t hide button or make it hard to find
  • ❌ Don’t use low contrast that makes it invisible
  • ❌ Don’t let button cover important content
  • ❌ Don’t use distracting animations

Common Issues and Solutions

Button not appearing

  • Ensure “Show Floating Button” is enabled
  • Check z-index isn’t too low
  • Verify no CSS conflicts hiding the button
  • Clear cache and test in incognito mode

Button covered by other elements

  • Increase z-index value
  • Change position to avoid conflict
  • Adjust offset to move button away
  • Check for overlapping chat widgets

Button not clickable on mobile

  • Increase button size (minimum 44x44px)
  • Check for overlapping elements
  • Verify touch target is large enough
  • Test on actual mobile devices

Button looks bad on mobile

  • Adjust mobile-specific size settings
  • Reduce offset for mobile screens
  • Test different positions
  • Consider hiding text on small screens