๐Ÿ“š Examples

Explore real-world examples and learn how to implement Extended Cookie Consent

๐ŸŽฏ Example Categories

Choose from different categories based on your needs and experience level.

๐ŸŸข Basic Examples

Perfect for getting started - simple configurations that work out of the box.

Basic
Simple Popup

Minimal configuration

Basic Cookie Consent

The simplest possible implementation with default settings.

Easy Setup 5 minutes Default Theme
View Example View Code
Themed
Styled Popup

With beautiful themes

Theme Showcase

Interactive demo showing all 21 available themes and positioning options.

21 Themes 10 Positions Interactive
View Example View Code

๐ŸŸก Intermediate Examples

More advanced configurations with granular controls and integrations.

Advanced
Granular Controls

Category management

Advanced Configuration

Complete example with category controls, analytics integration, and custom callbacks.

Cookie Categories Analytics Callbacks
View Example View Code
Framework
React Integration

Component-based

React Component

How to integrate Extended Cookie Consent with React applications.

React Components Hooks
View Example View Code

๐Ÿ”ด Advanced Examples

Complex implementations for enterprise use cases and special requirements.

Enterprise
Full Integration

Production ready

Enterprise Setup

Complete production implementation with GTM, GA4, compliance features, and audit trails.

GTM GA4 Audit Trail GDPR
View Example View Code
Custom
Custom Themes

Brand styling

Custom Branding

Create custom themes that match your brand colors and styling guidelines.

Custom CSS Brand Colors CSS Variables
View Example View Code

๐ŸŽฏ Use Case Examples

Real-world scenarios and specific implementation patterns.

๐Ÿ›’ E-commerce Site

Shopping cart preservation, marketing cookies, conversion tracking.

View
๐Ÿ“ฐ News Website

Content personalization, reading analytics, ad consent.

View
๐Ÿข Corporate Site

GDPR compliance, contact forms, lead tracking.

View
๐Ÿ“ฑ Mobile App Landing

App install tracking, mobile optimization, touch interfaces.

View
๐ŸŽ“ Educational Platform

Learning analytics, progress tracking, COPPA compliance.

View
๐Ÿ’ผ SaaS Application

User analytics, feature usage, subscription tracking.

View

๐Ÿ“ Code Snippets

Quick copy-paste solutions for common requirements.

โšก Quick Start
cookieconsent.extended.init({
  ui: { theme: 'github-dark' },
  content: {
    header: 'We use cookies',
    message: 'For better experience.'
  }
});
๐Ÿ“Š Google Analytics
// GA4 with consent mode
gtag('consent', 'default', {
  'analytics_storage': 'denied'
});

cookieconsent.extended.init({
  callbacks: {
    onAcceptAll: () => gtag('consent', 'update', {
      'analytics_storage': 'granted'
    })
  }
});

๐Ÿงช Testing & Development

Tools to help you test and debug your implementation.

Testing
Test Harness

Debug & validate

Testing Environment

Comprehensive testing page with diagnostic tools and validation.

Diagnostics Console Tools Validation
Open Testing
Debug
Browser Tools

Console helpers

Debug Console

Browser console commands for debugging and troubleshooting.

Console DevTools Troubleshooting
View Tools

๐Ÿš€ Ready to implement?

Start with our quick guide or explore the full API documentation.

Quick Start Guide API Reference