tinyconsent
v1.0.1
Published
Lightweight cookie consent banner loader. One-line GDPR/CCPA compliant cookie banner integration for any website.
Maintainers
loganraineyReadme
tinyconsent
The easiest way to add a GDPR/CCPA compliant cookie banner to any website.
A lightweight loader for TinyConsent cookie banners. One function call to add a GDPR/CCPA-style cookie banner to your site.
Why TinyConsent?
- 🚀 One-line integration - Add a cookie banner in seconds
- 📦 Tiny footprint - Under 1KB, loads the actual banner async
- ✅ Cookie consent handling - Loads your TinyConsent banner and lets you wire consent into your tracking scripts
- 🔧 Designed for Google Consent Mode v2 - Works with GA4-style implementations
- 🎨 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
Installation
npm install tinyconsentyarn add tinyconsentpnpm add tinyconsentQuick Start
JavaScript / TypeScript
import { loadTinyConsent } from 'tinyconsent';
// Load your cookie banner
loadTinyConsent('your-script-id');That's it! Your cookie consent banner will appear automatically.
React Hook
import { useTinyConsent } from 'tinyconsent';
function App() {
const { isLoading, isLoaded, error } = useTinyConsent('your-script-id');
return <div>My App</div>;
}With Options
import { loadTinyConsent } from 'tinyconsent';
loadTinyConsent('your-script-id', {
async: true,
onLoad: () => console.log('Cookie banner ready!'),
onError: (err) => console.error('Failed to load:', err)
});API Reference
loadTinyConsent(scriptId, options?)
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>
useTinyConsent(scriptId, options?) (React)
React hook for loading the cookie banner.
const { isLoading, isLoaded, error } = useTinyConsent('your-script-id');Returns: { isLoading: boolean, isLoaded: boolean, error: Error | null }
getTinyConsentScriptUrl(scriptId)
Get the full script URL for manual insertion.
const url = getTinyConsentScriptUrl('your-script-id');
// 'https://scripts.tinyconsent.com/api/scripts/your-script-id'isTinyConsentLoaded(scriptId)
Check if the script is already loaded.
if (!isTinyConsentLoaded('your-script-id')) {
loadTinyConsent('your-script-id');
}Framework Examples
Next.js (App Router)
// 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>
);
}Vue.js
<script setup>
import { onMounted } from 'vue';
import { loadTinyConsent } from 'tinyconsent';
onMounted(() => {
loadTinyConsent('your-script-id');
});
</script>Vanilla JavaScript
<script type="module">
import { loadTinyConsent } from 'https://esm.sh/tinyconsent';
loadTinyConsent('your-script-id');
</script>What is a Cookie Banner?
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?
Cookie Banners vs. Full Compliance
What a Cookie Banner Does
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
What Full Compliance Requires
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
GDPR Cookie Consent Requirements
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
CCPA 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
FAQ
How do I get a script ID?
- Visit tinyconsent.com/cookie-banner-generator
- Enter your email
- Copy your personalized script ID
Does this block tracking scripts?
TinyConsent is built to work with tracking tools like Google Analytics and Facebook Pixel. You can configure your scripts to respect the consent state provided by TinyConsent.
Does it work with Google Analytics 4?
Yes. TinyConsent is designed to work with Google Consent Mode v2 and GA4-style implementations.
How big is the banner script?
The initial loader is under 5KB gzipped. It loads asynchronously and won't affect your page speed.
Can I customize the banner?
Yes! All customization (colors, text, position) is done in your TinyConsent Dashboard. No code changes needed.
Do I need a privacy policy too?
Yes, GDPR requires a privacy policy. Generate one for free: tinyconsent.com/privacy-policy-generator
Troubleshooting
Banner not appearing
- 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
Scripts still running before consent
Make sure loadTinyConsent() is called before your tracking scripts load.
React hydration warnings
Use the useTinyConsent hook or call loadTinyConsent in a useEffect.
TypeScript
Full TypeScript support included:
import {
loadTinyConsent,
useTinyConsent,
getTinyConsentScriptUrl,
isTinyConsentLoaded,
LoadTinyConsentOptions,
UseTinyConsentResult
} from 'tinyconsent';Related Packages
tinyconsent-react- React component for TinyConsenttinyconsent-webcomponent- Web Component for TinyConsent
Resources
- 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
License
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