Cookie Consent Banner implementation for website (GDPR)

Implementing Cookie Consent Banner for website (GDPR)

Cookie consent banner is a component that obtains informed user consent before setting optional cookies. Required by GDPR (Article 7) and ePrivacy Directive for all websites accessible to EU users.

Cookie classification

By GDPR, cookies are divided into categories:

Technical banner requirements

• Consent before cookie installation (not after)
• Rejection as simple as acceptance
• Granular consent per category
• Ability to withdraw consent anytime
• Storage of consent record with timestamp

Implementation via Cookiebot / OneTrust

Ready solutions for GDPR compliance:

Cookiebot:

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js"
        data-cbid="YOUR-CBID"
        data-blockingmode="auto"
        type="text/javascript">
</script>

Custom implementation (React)

interface ConsentState {
  analytics: boolean;
  marketing: boolean;
  functional: boolean;
}

export function CookieConsentProvider({ children }: { children: ReactNode }) {
  const [consent, setConsent] = useState<ConsentState>({
    analytics: false,
    marketing: false,
    functional: false,
  });
  const [hasResponded, setHasResponded] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem('cookie_consent');
    if (stored) {
      const data = JSON.parse(stored);
      setConsent(data.preferences);
      setHasResponded(true);
    }
  }, []);

  const updateConsent = (updates: Partial<ConsentState>) => {
    const newConsent = { ...consent, ...updates };
    const record = {
      preferences: newConsent,
      timestamp: new Date().toISOString(),
      version: '1.0',
    };
    localStorage.setItem('cookie_consent', JSON.stringify(record));
    setConsent(newConsent);
    setHasResponded(true);

    fetch('/api/consent', {
      method: 'POST',
      body: JSON.stringify(record),
    });
  };

  return (
    <CookieConsentContext.Provider value={{ consent, updateConsent, hasResponded }}>
      {children}
    </CookieConsentContext.Provider>
  );
}

Storing consent records

By GDPR you must keep proof of consent:

Schema::create('consent_records', function (Blueprint $table) {
    $table->id();
    $table->string('user_identifier');
    $table->json('preferences');
    $table->string('version');
    $table->ipAddress('ip_address');
    $table->timestamp('consented_at');
    $table->timestamp('withdrawn_at')->nullable();
});

Implementation Timeline

• Ready solution (Cookiebot/CookieYes): 1 day
• Custom banner with script blocking: 3–5 days
• Storing consent records + API: +1 day