The easiest way to add a GDPR/CCPA compliant cookie banner to any website.
A lightweight cookie consent banner loader for JavaScript and TypeScript projects. One function call, full compliance.
- 🚀 One-line integration - Add a cookie banner in seconds
- 📦 Tiny footprint - Under 1KB, loads the actual banner async
- ✅ Cookie consent handling - Blocks scripts until user consents
- 🔧 Google Consent Mode v2 - Automatic GA4/Google Ads integration
- 🎨 Customizable - Configure via dashboard, no code changes
- 📱 Works everywhere - Vanilla JS, React, Vue, Next.js, and more
Get your script ID: tinyconsent.com/cookie-banner-generator
npm install tinyconsentyarn add tinyconsentpnpm add tinyconsentimport { loadTinyConsent } from 'tinyconsent';
// Load your cookie banner
loadTinyConsent('your-script-id');That's it! Your cookie consent banner will appear automatically.
import { useTinyConsent } from 'tinyconsent';
function App() {
const { isLoading, isLoaded, error } = useTinyConsent('your-script-id');
return <div>My App</div>;
}import { loadTinyConsent } from 'tinyconsent';
loadTinyConsent('your-script-id', {
async: true,
onLoad: () => console.log('Cookie banner ready!'),
onError: (err) => console.error('Failed to load:', err)
});Loads the TinyConsent cookie consent banner script.
| Parameter | Type | Description |
|---|---|---|
scriptId |
string |
Your unique script ID from tinyconsent.com |
options.async |
boolean |
Load asynchronously (default: true) |
options.defer |
boolean |
Defer execution (default: false) |
options.onLoad |
() => void |
Callback when loaded |
options.onError |
(error: Error) => void |
Callback on error |
Returns: Promise<void>
React hook for loading the cookie banner.
const { isLoading, isLoaded, error } = useTinyConsent('your-script-id');Returns: { isLoading: boolean, isLoaded: boolean, error: Error | null }
Get the full script URL for manual insertion.
const url = getTinyConsentScriptUrl('your-script-id');
// 'https://scripts.tinyconsent.com/api/scripts/your-script-id'Check if the script is already loaded.
if (!isTinyConsentLoaded('your-script-id')) {
loadTinyConsent('your-script-id');
}// app/layout.tsx
'use client';
import { useEffect } from 'react';
import { loadTinyConsent } from 'tinyconsent';
export default function RootLayout({ children }) {
useEffect(() => {
loadTinyConsent('your-script-id');
}, []);
return (
<html lang="en">
<body>{children}</body>
</html>
);
}<script setup>
import { onMounted } from 'vue';
import { loadTinyConsent } from 'tinyconsent';
onMounted(() => {
loadTinyConsent('your-script-id');
});
</script><script type="module">
import { loadTinyConsent } from 'https://esm.sh/tinyconsent';
loadTinyConsent('your-script-id');
</script>A cookie banner (also called a cookie consent banner or cookie notice) is a UI element that:
- Informs users about cookies and tracking on your website
- Collects consent before setting non-essential cookies
- Provides control for users to accept, reject, or customize preferences
Learn more: What is a Cookie Banner?
A cookie banner handles the consent collection part of privacy compliance:
- Displays a notice about cookies and tracking
- Collects user consent preferences
- Blocks non-essential scripts until consent is given
- Stores and respects consent choices
Cookie consent is just one part of privacy law compliance. Full compliance also includes:
- Privacy Policy - Document explaining your data practices
- Data Processing Records - Internal documentation of data handling
- User Rights Handling - Processes for data access/deletion requests
- Legal Basis Documentation - Justification for each type of data processing
TinyConsent helps with cookie consent. For your privacy policy, use: tinyconsent.com/privacy-policy-generator
The GDPR requires specific handling for cookies:
- Get consent BEFORE setting non-essential cookies
- Users must be able to reject cookies easily
- Consent must be freely given, specific, and informed
- Must provide granular consent options (analytics, marketing, etc.)
- No pre-ticked boxes allowed
Learn more: GDPR Cookie Requirements
The CCPA (California Consumer Privacy Act) requires:
- Disclose what personal information you collect
- Provide "Do Not Sell My Personal Information" option
- Cannot discriminate against users who opt out
Learn more: CCPA Cookie Requirements
- Visit tinyconsent.com/cookie-banner-generator
- Enter your email
- Copy your personalized script ID
Yes! TinyConsent automatically blocks Google Analytics, Facebook Pixel, and other tracking scripts until the user consents.
Yes. TinyConsent integrates with Google Consent Mode v2, automatically signaling consent status to GA4 and Google Ads.
The initial loader is under 5KB gzipped. It loads asynchronously and won't affect your page speed.
Yes! All customization (colors, text, position) is done in your TinyConsent Dashboard. No code changes needed.
Yes, GDPR requires a privacy policy. Generate one for free: tinyconsent.com/privacy-policy-generator
- Check your script ID is correct
- Ensure the script isn't being blocked by ad blockers
- Clear localStorage and test in incognito mode
- Check browser console for errors
Make sure loadTinyConsent() is called before your tracking scripts load.
Use the useTinyConsent hook or call loadTinyConsent in a useEffect.
Full TypeScript support included:
import {
loadTinyConsent,
useTinyConsent,
getTinyConsentScriptUrl,
isTinyConsentLoaded,
LoadTinyConsentOptions,
UseTinyConsentResult
} from 'tinyconsent';tinyconsent-react- React component for TinyConsenttinyconsent-webcomponent- Web Component for TinyConsent
- Cookie Banner Generator: tinyconsent.com/cookie-banner-generator
- Privacy Policy Generator: tinyconsent.com/privacy-policy-generator
- Dashboard: tinyconsent.com/dashboard
- GDPR Guide: tinyconsent.com/gdpr-cookie-requirements
- Documentation: github.com/TinyConsent/tinyconsent-embed
MIT © TinyConsent
Keywords: cookie banner, cookie consent, GDPR, CCPA, cookie banner generator, cookie consent script, GDPR cookie banner, one line cookie banner, lightweight cookie consent, cookie banner npm, cookie banner react, privacy, consent management