OsirionCookieConsent Component

The OsirionCookieConsent component provides a GDPR-compliant cookie consent banner with customizable categories, granular control options, and server-side rendering compatibility. Perfect for meeting privacy compliance requirements with a professional user experience.

Component Overview

OsirionCookieConsent is designed to help your application comply with GDPR, CCPA, and other privacy regulations. It provides users with clear information about cookie usage and granular control over their privacy preferences, all while maintaining excellent performance and accessibility standards.

Key Features

GDPR Compliance: Full compliance with European privacy regulations Customizable Categories: Define your own cookie categories and descriptions Granular Control: Allow users to customize individual cookie preferences SSR Compatible: Works perfectly with server-side rendering Professional Styling: Clean, non-intrusive design that matches your brand Accessibility Compliant: Full keyboard navigation and screen reader support Form-Based: Uses standard HTML forms for better compatibility Cookie Management: Automatic cookie storage and preference persistence Flexible Positioning: Top or bottom banner positioning Multi-Language Support: Easy localization for international audiences

Parameters

Cookie Categories

The component includes default cookie categories that you can customize:

Basic Usage

Simple Cookie Consent

@using Osirion.Blazor.Components

<OsirionCookieConsent 
    Title="We use cookies"
    Message="This website uses cookies to ensure you get the best experience on our website."
    PolicyLink="/privacy-policy"
    PolicyLinkText="Read our privacy policy" />

Minimalist Consent Banner

<OsirionCookieConsent 
    Title="Cookie Notice"
    Message="We use essential cookies to make our site work. We'd also like to set analytics cookies to help us improve our website."
    ShowDeclineButton="false"
    ShowCustomizeButton="false"
    AcceptButtonText="I Understand"
    PolicyLink="/cookies"
    PolicyLinkText="Cookie Policy" />

Custom Position and Styling

<OsirionCookieConsent 
    Position="top"
    Title="Privacy & Cookies"
    Message="By using our website, you consent to our use of cookies. You can manage your preferences at any time."
    Class="custom-consent-banner"
    PolicyLink="/privacy"
    ConsentEndpoint="/api/privacy/consent" />

<style>
.custom-consent-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.custom-consent-banner .osirion-cookie-consent-link {
    color: #ffeaa7;
    text-decoration: underline;
}

.custom-consent-banner .osirion-cookie-consent-link:hover {
    color: #fdcb6e;
}
</style>

Advanced Usage

Custom Cookie Categories

@using Osirion.Blazor.Components

@{
    var customCategories = new List<CookieCategory>
    {
        new()
        {
            Id = "essential",
            Name = "Essential",
            Description = "These cookies are necessary for the website to function and cannot be switched off in our systems.",
            IsRequired = true,
            IsEnabled = true
        },
        new()
        {
            Id = "performance",
            Name = "Performance & Analytics",
            Description = "These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site.",
            IsRequired = false,
            IsEnabled = false
        },
        new()
        {
            Id = "functional",
            Name = "Functionality",
            Description = "These cookies enable the website to provide enhanced functionality and personalization.",
            IsRequired = false,
            IsEnabled = false
        },
        new()
        {
            Id = "targeting",
            Name = "Targeting & Advertising",
            Description = "These cookies may be set through our site by our advertising partners to build a profile of your interests.",
            IsRequired = false,
            IsEnabled = false
        },
        new()
        {
            Id = "social",
            Name = "Social Media",
            Description = "These cookies are set by social media services that we have added to the site to enable you to share our content.",
            IsRequired = false,
            IsEnabled = false
        }
    };
}

<OsirionCookieConsent 
    Title="Manage Your Privacy Preferences"
    Message="We care about your privacy and data security. You have the right to control how we collect and use your information."
    Categories="customCategories"
    ShowCustomizationPanel="true"
    PolicyLink="/privacy-policy"
    PolicyLinkText="Read our full privacy policy"
    ConsentExpiryDays="180">
    
    <Icon>
        <i class="fas fa-shield-alt text-success"></i>
    </Icon>
</OsirionCookieConsent>

E-commerce Cookie Consent

@{
    var ecommerceCategories = new List<CookieCategory>
    {
        new()
        {
            Id = "strictly-necessary",
            Name = "Strictly Necessary",
            Description = "These cookies are essential for you to browse the website and use its features, such as accessing secure areas and managing your shopping cart.",
            IsRequired = true,
            IsEnabled = true
        },
        new()
        {
            Id = "shopping",
            Name = "Shopping Experience",
            Description = "These cookies remember your shopping preferences, recently viewed items, and help improve your shopping experience.",
            IsRequired = false,
            IsEnabled = false
        },
        new()
        {
            Id = "analytics",
            Name = "Analytics & Insights",
            Description = "These cookies help us understand how customers use our site, which products are popular, and how we can improve our service.",
            IsRequired = false,
            IsEnabled = false
        },
        new()
        {
            Id = "advertising",
            Name = "Advertising & Personalization",
            Description = "These cookies allow us to show you relevant ads and offers, both on our site and on other websites you visit.",
            IsRequired = false,
            IsEnabled = false
        },
        new()
        {
            Id = "third-party",
            Name = "Third-Party Services",
            Description = "These cookies are set by third-party services like payment processors, shipping providers, and customer support tools.",
            IsRequired = false,
            IsEnabled = false
        }
    };
}

<OsirionCookieConsent 
    Title="🍪 Cookie Preferences"
    Message="Welcome to our store! We use cookies to provide you with the best shopping experience, analyze site performance, and show you personalized offers."
    Categories="ecommerceCategories"
    AcceptButtonText="Accept All & Continue Shopping"
    DeclineButtonText="Essential Only"
    CustomizeButtonText="Customize My Preferences"
    SavePreferencesButtonText="Save My Choices"
    PolicyLink="/privacy-and-cookies"
    PolicyLinkText="View our cookie policy"
    ConsentEndpoint="/api/cookie-preferences"
    Class="ecommerce-consent">
    
    <Icon>
        <div class="consent-icon">
            <i class="fas fa-cookie-bite text-warning"></i>
        </div>
    </Icon>
</OsirionCookieConsent>

<style>
.ecommerce-consent {
    background: #ffffff;
    border-top: 4px solid #28a745;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1);
}

.ecommerce-consent .osirion-cookie-consent-title {
    color: #28a745;
    font-weight: 600;
}

.ecommerce-consent .osirion-cookie-consent-description {
    color: #6c757d;
    line-height: 1.5;
}

.consent-icon {
    background: rgba(255, 193, 7, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ecommerce-consent .osirion-cookie-consent-category {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

.ecommerce-consent .osirion-cookie-consent-category:hover {
    border-color: #28a745;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
}

.ecommerce-consent .osirion-cookie-consent-category-name {
    font-weight: 600;
    color: #495057;
}

.ecommerce-consent .osirion-cookie-consent-required {
    color: #dc3545;
    font-size: 0.85em;
}
</style>

SaaS Application Consent

@{
    var saasCategories = new List<CookieCategory>
    {
        new()
        {
            Id = "system",
            Name = "System & Security",
            Description = "Essential cookies for authentication, session management, and security features.",
            IsRequired = true,
            IsEnabled = true
        },
        new()
        {
            Id = "product-analytics",
            Name = "Product Analytics",
            Description = "Help us understand feature usage and improve our product based on user behavior.",
            IsRequired = false,
            IsEnabled = false
        },
        new()
        {
            Id = "customer-support",
            Name = "Customer Support",
            Description = "Enable chat support, help documentation, and customer service features.",
            IsRequired = false,
            IsEnabled = false
        },
        new()
        {
            Id = "integrations",
            Name = "Third-Party Integrations",
            Description = "Connect with external services like Slack, Google Drive, and other productivity tools.",
            IsRequired = false,
            IsEnabled = false
        }
    };
}

<OsirionCookieConsent 
    Title="Privacy Settings"
    Message="We're committed to transparency about the data we collect and how it's used to improve your experience."
    Categories="saasCategories"
    AcceptButtonText="Accept & Continue"
    DeclineButtonText="Essential Only"
    CustomizeButtonText="Advanced Settings"
    SavePreferencesButtonText="Save Settings"
    CustomizePanelTitle="Advanced Privacy Settings"
    PolicyLink="/privacy"
    PolicyLinkText="Privacy Policy"
    ConsentEndpoint="/api/privacy/consent"
    ConsentExpiryDays="90"
    Class="saas-consent">
    
    <Icon>
        <div class="saas-icon">
            <i class="fas fa-user-shield"></i>
        </div>
    </Icon>
</OsirionCookieConsent>

<style>
.saas-consent {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    margin: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.saas-consent .osirion-cookie-consent-container {
    padding: 1.5rem;
}

.saas-icon {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border-radius: 8px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.saas-consent .osirion-cookie-consent-title {
    color: #212529;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.saas-consent .osirion-cookie-consent-description {
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.saas-consent .osirion-cookie-consent-customize {
    background: white;
    border-top: 1px solid #dee2e6;
    margin: 1.5rem -1.5rem -1.5rem;
    padding: 1.5rem;
    border-radius: 0 0 12px 12px;
}

.saas-consent .osirion-cookie-consent-category {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.saas-consent .osirion-cookie-consent-category-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
}

.saas-consent .osirion-cookie-consent-category input[type="checkbox"] {
    margin-right: 1rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.saas-consent .osirion-cookie-consent-category-name {
    font-weight: 600;
    color: #495057;
    display: block;
    margin-bottom: 0.25rem;
}

.saas-consent .osirion-cookie-consent-category-description {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.saas-consent .osirion-cookie-consent-required {
    color: #fd7e14;
    font-weight: 500;
}

@media (max-width: 768px) {
    .saas-consent {
        margin: 0.5rem;
        border-radius: 8px;
    }
    
    .saas-consent .osirion-cookie-consent-container {
        padding: 1rem;
    }
    
    .saas-consent .osirion-cookie-consent-customize {
        margin: 1rem -1rem -1rem;
        padding: 1rem;
    }
}
</style>

Multilingual Consent

@using System.Globalization

@{
    var currentCulture = CultureInfo.CurrentCulture.TwoLetterISOLanguageName;
    
    var titles = new Dictionary<string, string>
    {
        ["en"] = "Cookie Consent",
        ["es"] = "Consentimiento de Cookies",
        ["fr"] = "Consentement aux Cookies",
        ["de"] = "Cookie-Einwilligung",
        ["it"] = "Consenso ai Cookie"
    };
    
    var messages = new Dictionary<string, string>
    {
        ["en"] = "We use cookies to improve your browsing experience, serve personalized content, and analyze our traffic.",
        ["es"] = "Utilizamos cookies para mejorar su experiencia de navegación, ofrecer contenido personalizado y analizar nuestro tráfico.",
        ["fr"] = "Nous utilisons des cookies pour améliorer votre expérience de navigation, fournir du contenu personnalisé et analyser notre trafic.",
        ["de"] = "Wir verwenden Cookies, um Ihr Browsing-Erlebnis zu verbessern, personalisierte Inhalte anzubieten und unseren Traffic zu analysieren.",
        ["it"] = "Utilizziamo i cookie per migliorare la tua esperienza di navigazione, fornire contenuti personalizzati e analizzare il nostro traffico."
    };
    
    var acceptTexts = new Dictionary<string, string>
    {
        ["en"] = "Accept All",
        ["es"] = "Aceptar Todo",
        ["fr"] = "Tout Accepter",
        ["de"] = "Alle Akzeptieren",
        ["it"] = "Accetta Tutto"
    };
    
    var declineTexts = new Dictionary<string, string>
    {
        ["en"] = "Decline",
        ["es"] = "Rechazar",
        ["fr"] = "Refuser",
        ["de"] = "Ablehnen",
        ["it"] = "Rifiuta"
    };
    
    var customizeTexts = new Dictionary<string, string>
    {
        ["en"] = "Customize",
        ["es"] = "Personalizar",
        ["fr"] = "Personnaliser",
        ["de"] = "Anpassen",
        ["it"] = "Personalizza"
    };
    
    var policyTexts = new Dictionary<string, string>
    {
        ["en"] = "Privacy Policy",
        ["es"] = "Política de Privacidad",
        ["fr"] = "Politique de Confidentialité",
        ["de"] = "Datenschutzrichtlinie",
        ["it"] = "Politica sulla Privacy"
    };
}

<OsirionCookieConsent 
    Title="@(titles.GetValueOrDefault(currentCulture, titles["en"]))"
    Message="@(messages.GetValueOrDefault(currentCulture, messages["en"]))"
    AcceptButtonText="@(acceptTexts.GetValueOrDefault(currentCulture, acceptTexts["en"]))"
    DeclineButtonText="@(declineTexts.GetValueOrDefault(currentCulture, declineTexts["en"]))"
    CustomizeButtonText="@(customizeTexts.GetValueOrDefault(currentCulture, customizeTexts["en"]))"
    PolicyLinkText="@(policyTexts.GetValueOrDefault(currentCulture, policyTexts["en"]))"
    PolicyLink="@($"/privacy-policy?lang={currentCulture}")"
    ConsentEndpoint="/api/cookie-consent"
    Class="multilingual-consent" />

<style>
.multilingual-consent {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.multilingual-consent .osirion-cookie-consent-description {
    text-align: justify;
    hyphens: auto;
}

@media (max-width: 768px) {
    .multilingual-consent .osirion-cookie-consent-description {
        text-align: left;
    }
}
</style>

Backend Integration

ASP.NET Core Controller

[ApiController]
[Route("api/[controller]")]
public class CookieConsentController : ControllerBase
{
    private const string ConsentCookieName = "osirion_cookie_consent";
    
    [HttpPost]
    public IActionResult HandleConsent([FromForm] CookieConsentRequest request)
    {
        var consentData = new
        {
            Version = "1.0",
            Timestamp = DateTime.UtcNow,
            Consent = request.Consent,
            Categories = request.Categories ?? new Dictionary<string, bool>(),
            UserAgent = Request.Headers["User-Agent"].ToString(),
            IpAddress = HttpContext.Connection.RemoteIpAddress?.ToString()
        };
        
        var cookieOptions = new CookieOptions
        {
            Expires = DateTime.UtcNow.AddDays(365),
            HttpOnly = true,
            Secure = true,
            SameSite = SameSiteMode.Strict,
            IsEssential = true
        };
        
        Response.Cookies.Append(ConsentCookieName, 
            JsonSerializer.Serialize(consentData), 
            cookieOptions);
        
        // Log consent for compliance auditing
        LogConsentDecision(consentData);
        
        // Apply user preferences to analytics and marketing tools
        ApplyConsentPreferences(request);
        
        var returnUrl = request.ReturnUrl ?? "/";
        return Redirect(returnUrl);
    }
    
    private void LogConsentDecision(object consentData)
    {
        // Implement your audit logging here
        // This helps demonstrate compliance with privacy regulations
    }
    
    private void ApplyConsentPreferences(CookieConsentRequest request)
    {
        // Configure analytics, marketing, and other tracking based on consent
        switch (request.Consent?.ToLower())
        {
            case "accepted":
                // Enable all tracking
                EnableAllTracking();
                break;
                
            case "declined":
                // Disable all non-essential tracking
                DisableNonEssentialTracking();
                break;
                
            case "save-preferences":
                // Apply granular preferences
                ApplyGranularPreferences(request.Categories);
                break;
        }
    }
    
    private void EnableAllTracking()
    {
        // Enable Google Analytics, Facebook Pixel, etc.
    }
    
    private void DisableNonEssentialTracking()
    {
        // Disable tracking scripts
    }
    
    private void ApplyGranularPreferences(Dictionary<string, bool>? categories)
    {
        if (categories == null) return;
        
        foreach (var category in categories)
        {
            switch (category.Key)
            {
                case "category_analytics":
                    if (category.Value) EnableAnalytics();
                    else DisableAnalytics();
                    break;
                    
                case "category_marketing":
                    if (category.Value) EnableMarketing();
                    else DisableMarketing();
                    break;
                    
                // Handle other categories...
            }
        }
    }
}

public class CookieConsentRequest
{
    public string? Consent { get; set; }
    public string? ReturnUrl { get; set; }
    public Dictionary<string, bool>? Categories { get; set; }
}

JavaScript Integration (Optional)

// Optional: Enhanced client-side integration
class CookieConsentManager {
    constructor() {
        this.consentData = this.getConsentData();
        this.initializeTracking();
    }
    
    getConsentData() {
        const cookie = document.cookie
            .split('; ')
            .find(row => row.startsWith('osirion_cookie_consent='));
            
        if (cookie) {
            try {
                return JSON.parse(decodeURIComponent(cookie.split('=')[1]));
            } catch (e) {
                return null;
            }
        }
        return null;
    }
    
    initializeTracking() {
        if (!this.consentData) return;
        
        if (this.hasConsent('analytics')) {
            this.loadGoogleAnalytics();
        }
        
        if (this.hasConsent('marketing')) {
            this.loadMarketingScripts();
        }
        
        if (this.hasConsent('social')) {
            this.loadSocialWidgets();
        }
    }
    
    hasConsent(category) {
        if (!this.consentData) return false;
        
        if (this.consentData.Consent === 'accepted') return true;
        if (this.consentData.Consent === 'declined') return false;
        
        return this.consentData.Categories[`category_${category}`] === true;
    }
    
    loadGoogleAnalytics() {
        // Load GA4 script
        const script = document.createElement('script');
        script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID';
        document.head.appendChild(script);
        
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'GA_MEASUREMENT_ID');
    }
    
    loadMarketingScripts() {
        // Load marketing and advertising scripts
    }
    
    loadSocialWidgets() {
        // Load social media widgets
    }
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    new CookieConsentManager();
});

Best Practices

Legal Compliance

1. Clear Language: Use plain, understandable language in your consent messages
2. Granular Control: Allow users to choose specific cookie categories
3. Easy Withdrawal: Provide easy ways to change or withdraw consent
4. Audit Trail: Log consent decisions for compliance auditing
5. Regular Updates: Keep cookie policies and categories up to date

User Experience

1. Non-Intrusive Design: Don't block content unnecessarily
2. Mobile Optimization: Ensure the banner works well on mobile devices
3. Performance: Minimize impact on page load times
4. Accessibility: Support keyboard navigation and screen readers
5. Clear Actions: Make button actions and consequences clear

Technical Implementation

1. SSR Compatibility: Ensure the component works with server-side rendering
2. Progressive Enhancement: Work without JavaScript when possible
3. Secure Cookies: Use secure, HTTP-only cookies for consent storage
4. Version Control: Track consent format versions for future updates
5. Testing: Test across different browsers and devices

Privacy by Design

1. Data Minimization: Only collect necessary consent information
2. Transparent Processing: Be clear about what data is collected and why
3. User Control: Give users meaningful choices about their data
4. Secure Storage: Protect consent data with appropriate security measures
5. Regular Review: Periodically review and update privacy practices

The OsirionCookieConsent component provides a solid foundation for privacy compliance while maintaining an excellent user experience and professional appearance.