Cookie Banner Templates

Overview

The Consent Management module provides 4 professionally designed cookie banner templates that automatically adapt to different regulatory requirements and user preferences.

Available Templates

1. Simple Template

Best For: Basic websites, minimal compliance needs

Features:

1. Clean, minimal design
2. Single “Accept All” button
3. Optional “Settings” link
4. Small, unobtrusive banner
5. Quick dismissal

Compliance: Basic consent collection

Customization Options:

6. Banner position (top, bottom, corner)
7. Background color
8. Text color
9. Button styling
10. Font size

2. GDPR Template


Best For: EU websites, comprehensive GDPR compliance

Features:

11. Detailed consent categories
12. Granular consent options
13. “Accept All”, “Reject All”, “Customize” buttons
14. Cookie category breakdown
15. Privacy Policy link
16. Data processing information

Compliance: Full GDPR Article 7 requirements

Cookie Categories:

17. Essential (always required)
18. Analytics & Performance
19. Marketing & Advertising
20. Functional & Preferences
21. Social Media

3. CCPA Template


Best For: California businesses, CCPA compliance

Features:

22. “Do Not Sell My Personal Information” link
23. Opt-out preference signals
24. Business purpose disclosures
25. Data sharing information
26. Consumer rights information

Compliance: California Consumer Privacy Act

Key Elements:

27. Clear privacy notice
28. Opt-out mechanisms
29. Data collection categories
30. Business purposes
31. Third-party sharing

4. Advanced Template


Best For: Enterprise websites, maximum customization

Features:

32. Fully customizable consent matrix
33. Advanced cookie categorization
34. Vendor management
35. Consent duration settings
36. Advanced analytics integration
37. Multi-language support

Compliance: GDPR, CCPA, LGPD, PIPEDA

Advanced Features:

38. Cookie-by-cookie consent
39. Vendor-specific consents
40. Consent validity periods
41. Withdrawal mechanisms
42. Audit trail integration

Template Selection Logic


Automatic Selection


The system automatically selects the appropriate template based on:

43. Geo Location Detection

– EU → GDPR Template
– California → CCPA Template
– Brazil → LGPD Template
– Other → Simple Template

44. Manual Override

– Admin can force specific template
– Per-region configuration
– A/B testing variants

45. Dynamic Switching

– Template changes based on user location
– Seamless transition
– Consent preservation

Customization Options


Visual Customization


Colors:

46. Primary color (buttons, links)
47. Secondary color (accents)
48. Background color
49. Text color
50. Border colors

Typography:

51. Font family
52. Font size
53. Font weight
54. Line height
55. Text alignment

Layout:

56. Banner position
57. Banner width
58. Button layout
59. Content spacing
60. Mobile responsiveness

Content Customization


Text Content:

61. Main message
62. Cookie categories
63. Button labels
64. Privacy policy links
65. Legal text

Links:

66. Privacy Policy URL
67. Cookie Policy URL
68. Terms of Service URL
69. Contact information

Legal Text:

70. Data controller information
71. Processing purposes
72. Retention periods
73. User rights information

A/B Testing


Variant Creation


74. Create Variants

– Duplicate existing template
– Modify colors, text, layout
– Different consent flows

75. Traffic Distribution

– Percentage-based splitting
– Geographic targeting
– Device-based targeting

76. Performance Tracking

– Consent rates
– Bounce rates
– Conversion impact
– User engagement

Testing Metrics


Primary Metrics:

77. Consent acceptance rate
78. Banner dismissal rate
79. Time to consent
80. Consent withdrawal rate

Secondary Metrics:

81. Page load impact
82. Mobile conversion
83. Cross-device consistency
84. Legal compliance rate

Mobile Optimization


Responsive Design


Breakpoint Adaptation:

85. Desktop (>1024px)
86. Tablet (768px-1023px)
87. Mobile (<767px)

Mobile-Specific Features:

88. Touch-friendly buttons (44px minimum)
89. Optimized text size
90. Swipe gestures
91. Bottom sheet presentation
92. Full-screen overlay option

Performance Considerations


Mobile Optimization:

93. Reduced JavaScript bundle
94. Lazy loading
95. Minimal animations
96. Battery-friendly
97. Network-efficient

Accessibility Features


WCAG 2.1 AA Compliance


Keyboard Navigation:

98. Tab order through all elements
99. Enter/Space to activate
100. Escape to dismiss
101. Focus indicators

Screen Reader Support:

102. ARIA labels and roles
103. Semantic HTML structure
104. Alternative text
105. Live regions for updates

Visual Accessibility:

106. High contrast options
107. Large text support
108. Reduced motion support
109. Color-blind friendly

Integration Points


WordPress Integration


Theme Compatibility:

110. Works with all themes
111. No theme modifications needed
112. CSS isolation
113. JavaScript namespacing

Plugin Compatibility:

114. Tested with popular plugins
115. No conflicts with caching plugins
116. Compatible with page builders
117. CDN-friendly

External Services


Analytics Integration:

118. Google Analytics 4
119. Google Tag Manager
120. Facebook Pixel
121. Custom analytics

Consent Management Platforms:

122. OneTrust integration
123. Cookiebot compatibility
124. Custom CMP support

Template Management


Creating Custom Templates


125. Base Template Selection

– Start from existing template
– Modify HTML structure
– Customize CSS styling
– Add JavaScript logic

126. Template Registration

– Register via hooks
– Add to template list
– Configure options
– Test functionality

127. Validation & Testing

– Cross-browser testing
– Accessibility validation
– Performance testing
– Legal compliance review

Template Updates


Version Management:

128. Template versioning
129. Backward compatibility
130. Update notifications
131. Migration paths

Change Tracking:

132. Modification history
133. Approval workflows
134. Testing requirements
135. Rollback capabilities

Best Practices


Design Principles


136. Clarity: Clear, concise language
137. Transparency: Explain data usage
138. Choice: Easy consent options
139. Control: Simple withdrawal
140. Trust: Professional appearance

Implementation Tips


141. Test Thoroughly: All devices and browsers
142. Monitor Performance: Impact on page speed
143. Regular Updates: Keep legal text current
144. User Feedback: Monitor consent patterns
145. Compliance Review: Regular legal audits

Common Mistakes


146. Overly Complex: Too many options confuse users
147. Poor Visibility: Banner too subtle
148. Blocking Content: Interferes with user experience
149. Outdated Text: Legal requirements change
150. No Testing: Not tested on real users

Troubleshooting


Template Not Loading


Common Causes:

151. JavaScript disabled
152. CSS conflicts
153. Theme interference
154. Plugin conflicts

Solutions:

155. Check browser console
156. Disable other plugins
157. Test in incognito mode
158. Verify theme compatibility

Consent Not Recording


Common Causes:

159. Database connection issues
160. JavaScript errors
161. Form validation failures
162. Server-side processing errors

Solutions:

163. Check server logs
164. Verify database tables
165. Test form submission
166. Review error logs

Mobile Display Issues


Common Causes:

167. CSS media queries
168. Theme overrides
169. Plugin interference
170. Viewport settings

Solutions:

171. Test on actual devices
172. Check responsive design
173. Override theme styles
174. Use browser dev tools

Related Documentation


175. Consent Management Overview
176. Cookie Scanner
177. Consent Tracking
178. Regional Compliance
179. Configuration Guide