# GDPR Compliance Kit
A comprehensive toolkit for making your websites GDPR compliant.
## Contents
```
gdpr-compliance-kit/
├── README.md # This file
├── PRIVACY_POLICY_TEMPLATE.md # Customizable privacy policy
├── NETCUP_DPA_ANNEX3_GUIDE.md # Guide for Netcup DPA form
├── RECORDS_OF_PROCESSING_ACTIVITIES.md # ROPA template (Art. 30)
└── components/
├── CookieConsent.tsx # React cookie banner component
└── GDPRAnalytics.tsx # Consent-aware analytics wrapper
```
## Quick Start
### 1. Add Cookie Consent to Your Site
Copy the components to your Next.js project:
```bash
cp components/CookieConsent.tsx your-project/components/
cp components/GDPRAnalytics.tsx your-project/components/
```
Add to your `app/layout.tsx`:
```tsx
import { CookieConsent } from "@/components/CookieConsent";
import { GDPRAnalytics } from "@/components/GDPRAnalytics";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
**Remove** the standard Analytics import from your layout:
```diff
- import { Analytics } from "@vercel/analytics/next";
...
-
+
```
### 2. Create Your Privacy Policy
1. Copy `PRIVACY_POLICY_TEMPLATE.md` to your project
2. Replace all `[PLACEHOLDERS]` with your actual info:
- `[DATE]` - Current date
- `[WEBSITE_NAME]` - Your site name
- `[WEBSITE_URL]` - Your domain
- `[CONTACT_EMAIL]` - Your contact email
3. Review and customize based on your specific data processing
4. Add as a page at `/privacy` on your site
### 3. Complete Netcup DPA
1. Log into Netcup CCP
2. Go to Master Data → Agreement on contract data processing
3. Follow `NETCUP_DPA_ANNEX3_GUIDE.md` to fill out the form
4. Submit the agreement
5. Save a copy for your records
### 4. Maintain Records of Processing
1. Customize `RECORDS_OF_PROCESSING_ACTIVITIES.md` with your specific activities
2. Store it securely (not publicly accessible)
3. Review and update annually or when processing changes
## Component Details
### CookieConsent.tsx
Features:
- Three-tier consent (Necessary, Analytics, Preferences)
- Customizable appearance via Tailwind classes
- Stores consent in localStorage
- Provides hooks for checking consent status
**Custom styling:**
The component uses Tailwind CSS classes. Customize by editing the className props.
**Integration with other consent managers:**
The component stores consent in localStorage under `gdpr_consent`. You can read this from other parts of your app:
```tsx
const consent = JSON.parse(localStorage.getItem('gdpr_consent') || '{}');
if (consent.analytics) {
// Load analytics
}
```
### GDPRAnalytics.tsx
Wraps Vercel Analytics and only loads it after consent:
```tsx
// Instead of:
import { Analytics } from "@vercel/analytics/react";
// Use:
import { GDPRAnalytics } from "@/components/GDPRAnalytics";
```
For Google Analytics, use `GDPRGoogleAnalytics`:
```tsx
```
### ConsentGate Component
Conditionally render content based on consent:
```tsx
import { ConsentGate } from "@/components/CookieConsent";
function MyComponent() {
return (
Analytics disabled}>
);
}
```
## Checklist
### Technical Implementation
- [ ] Cookie consent banner added to all sites
- [ ] Analytics wrapped with consent check
- [ ] Privacy policy page created at `/privacy`
- [ ] Cookie settings accessible from footer
- [ ] Contact forms have privacy notice
### Legal/Administrative
- [ ] Netcup DPA Annex 3 completed and submitted
- [ ] Records of Processing Activities created
- [ ] Privacy policy reviewed for accuracy
- [ ] Data retention periods documented
- [ ] Data breach response plan documented
### Ongoing Maintenance
- [ ] Annual privacy policy review scheduled
- [ ] ROPA review scheduled
- [ ] Processor agreements reviewed
- [ ] Staff awareness training (if applicable)
## Deployment Script
To add GDPR compliance to all your sites at once:
```bash
#!/bin/bash
# deploy-gdpr.sh
SITES=(
"mycofi-earth-website"
"canvas-website"
# Add more sites
)
for site in "${SITES[@]}"; do
echo "Adding GDPR components to $site..."
cp components/CookieConsent.tsx /opt/websites/$site/components/
cp components/GDPRAnalytics.tsx /opt/websites/$site/components/
echo "Done with $site"
done
```
## FAQ
**Q: Do I need a cookie banner if I don't use cookies?**
A: If you use ANY analytics (even Vercel Analytics), you should have consent. Many analytics tools set cookies or use similar tracking technologies.
**Q: What about Cloudflare's cookies?**
A: Cloudflare sets some strictly necessary cookies for security (like `__cf_bm`). These don't require consent but should be mentioned in your privacy policy.
**Q: Do I need a DPO?**
A: Likely not. A Data Protection Officer is required only if:
- You're a public authority
- Your core activities involve large-scale monitoring
- You process special categories of data at large scale
**Q: What if someone requests data deletion?**
A: You have 30 days to respond. Delete from:
1. Your databases
2. Backups (when they rotate)
3. Notify any processors (they should delete too)
**Q: Is this enough for full GDPR compliance?**
A: This covers the major technical requirements. Full compliance also requires:
- Organizational measures (policies, training)
- Proper contracts with processors
- Breach response procedures
- Ongoing compliance monitoring
Consider consulting a legal professional for your specific situation.
## Resources
- [GDPR Full Text](https://gdpr-info.eu/)
- [ICO Guide to GDPR](https://ico.org.uk/for-organisations/guide-to-data-protection/guide-to-the-general-data-protection-regulation-gdpr/)
- [Netcup DPA Information](https://www.netcup.de/dsgvo-gdpr-processing)
- [Cloudflare GDPR](https://www.cloudflare.com/gdpr/introduction/)
## License
This kit is provided as-is for informational purposes. Not legal advice. Consult with a legal professional for your specific compliance needs.