Documentation
Complete guide to implementing CookieSeal cookie consent management. Get started in minutes with our platform-specific guides.
Getting Started
Follow these steps to add CookieSeal to your website in under 10 minutes.
Create Your Account
Sign up for a free CookieSeal account and add your first website domain.
Create AccountConfigure Your Banner
Customize the banner text, colors, and position to match your brand. Configure cookie categories and consent options.
- • Choose banner position and style
- • Customize colors and branding
- • Set up cookie categories
- • Configure consent options
Install the Script
Copy the CookieSeal script and paste it into your website's <head> section. The banner will start showing immediately.
<script src="https://cdn.cookieseal.com/v1/cookieseal.js"
data-site-key="your-site-key-here"
async></script>You're Done!
Your cookie consent banner is now live. Monitor analytics and manage settings from your CookieSeal dashboard.
View DashboardPlatform Integration
WordPress
Add CookieSeal to WordPress using plugin or manual method.
Method 1: Plugin Installation (Recommended)
- Download the CookieSeal WordPress plugin
- Upload and activate in your WordPress admin
- Enter your site key in plugin settings
- Configure banner options
Method 2: Manual Installation
- Go to Appearance → Theme Editor
- Edit header.php file
- Add CookieSeal script before closing </head>
- Save changes
Shopify
Integrate CookieSeal into your Shopify store theme.
Theme Integration
- Go to Online Store → Themes
- Click Actions → Edit Code
- Open theme.liquid file
- Add CookieSeal script before </head>
- Save changes
{{ '//cdn.cookieseal.com/v1/cookieseal.js' | script_tag }}
<script>
window.CookieSeal = window.CookieSeal || {};
window.CookieSeal.siteKey = 'your-site-key';
</script>React
Use CookieSeal React hooks and components for seamless integration.
NPM Installation
npm install @cookieseal/react
Component Usage
import { CookieSealProvider, useCookieConsent } from '@cookieseal/react';
function App() {
return (
<CookieSealProvider siteKey="your-site-key">
<YourApp />
</CookieSealProvider>
);
}
function YourComponent() {
const { consent, updateConsent } = useCookieConsent();
if (consent.analytics) {
// Load analytics scripts
}
}Next.js
Server-side rendering compatible implementation for Next.js apps.
App Router (Next.js 13+)
import { CookieSealScript } from '@cookieseal/nextjs';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<head>
<CookieSealScript siteKey={process.env.COOKIESEAL_SITE_KEY} />
</head>
<body>{children}</body>
</html>
);
}Pages Router (Next.js 12)
import { Head, Html, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html>
<Head>
<script
src="https://cdn.cookieseal.com/v1/cookieseal.js"
data-site-key={process.env.COOKIESEAL_SITE_KEY}
async
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}HTML/JavaScript
Direct integration for static websites and custom applications.
Basic Integration
<!DOCTYPE html>
<html>
<head>
<!-- CookieSeal Script -->
<script src="https://cdn.cookieseal.com/v1/cookieseal.js"
data-site-key="your-site-key-here"
async></script>
</head>
<body>
<!-- Your website content -->
</body>
</html>Advanced Configuration
<script>
window.CookieSeal = window.CookieSeal || {};
window.CookieSeal.config = {
siteKey: 'your-site-key',
position: 'bottom',
theme: 'light',
categories: {
analytics: true,
marketing: false,
preferences: true
}
};
</script>Vue.js
Vue 3 composition API integration with reactive consent state.
Plugin Installation
npm install @cookieseal/vue
Plugin Setup
import { createApp } from 'vue';
import { CookieSealPlugin } from '@cookieseal/vue';
import App from './App.vue';
const app = createApp(App);
app.use(CookieSealPlugin, {
siteKey: 'your-site-key'
});
app.mount('#app');Component Usage
<script setup>
import { useCookieConsent } from '@cookieseal/vue';
const { consent, updateConsent } = useCookieConsent();
// Reactive consent state
watchEffect(() => {
if (consent.value.analytics) {
// Load analytics
}
});
</script>Configuration
Banner Styles
Position Options
- •
bottom- Bottom of screen (default) - •
top- Top of screen - •
center- Center modal overlay - •
corner- Bottom right corner
Theme Options
- •
light- Light theme (default) - •
dark- Dark theme - •
auto- Follows system preference - •
custom- Custom color scheme
Cookie Categories
Necessary
Essential cookies required for website functionality. Always enabled and cannot be disabled.
Examples: Session management, authentication, security, basic functionality
Analytics
Cookies used to understand how visitors interact with your website.
Examples: Google Analytics, Adobe Analytics, Mixpanel, Hotjar
Marketing
Cookies used for advertising, remarketing, and tracking across websites.
Examples: Facebook Pixel, Google Ads, LinkedIn Insight Tag, Twitter Pixel
Preferences
Cookies that enhance user experience and remember visitor preferences.
Examples: Language settings, theme preferences, personalization features
API Reference
Authentication
API access requires a valid site key and API token (Business plan only).
curl -H "Authorization: Bearer your-api-token" \
-H "Content-Type: application/json" \
https://api.cookieseal.com/v1/consentsJavaScript API
Check Consent Status
// Check if user has given consent for analytics
if (CookieSeal.hasConsent('analytics')) {
// Load analytics scripts
gtag('config', 'GA_MEASUREMENT_ID');
}
// Get all consent preferences
const consent = CookieSeal.getConsent();
console.log(consent); // { analytics: true, marketing: false, ... }Update Consent
// Update specific category consent
CookieSeal.updateConsent('marketing', true);
// Update multiple categories
CookieSeal.updateConsent({
analytics: true,
marketing: false,
preferences: true
});Event Listeners
// Listen for consent changes
CookieSeal.on('consentChanged', (consent) => {
if (consent.analytics) {
loadAnalytics();
}
});
// Listen for banner interactions
CookieSeal.on('bannerShown', () => {
console.log('Banner displayed');
});
CookieSeal.on('consentGiven', (categories) => {
console.log('Consent given for:', categories);
});Compliance Guides
GDPR Checklist
DPDPA Checklist
Troubleshooting
Banner Not Showing
1. Check that the script is loaded in the <head> section
2. Verify your site key is correct and the site is active
3. Check browser console for JavaScript errors
4. Ensure no ad blockers are interfering
Consent Not Working
1. Check that scripts have the correct data-cookieseal attributes
2. Verify script loading order (CookieSeal first, then tagged scripts)
3. Test consent status with CookieSeal.getConsent()
4. Check network requests are being blocked correctly
Performance Issues
1. Use the async attribute on the script tag
2. Ensure scripts are loaded conditionally based on consent
3. Consider lazy loading non-essential resources
4. Monitor Core Web Vitals in your analytics
Need More Help?
Can't find what you're looking for? Our support team is here to help with implementation and configuration.