A free, lightweight and customizable consent manager for websites, designed to help you comply with GDPR and other privacy regulations.
Learn more or Configure it with our wizard
- Customizable Design: Easily customize the appearance to match your website's design
- Multiple Positioning Options: Choose from different positions for the prompt and icon
- Granular Consent Control: Allow users to accept or reject different types of consent (essential, analytics, marketing, etc.)
- Automatic Script Injection: Automatically load third-party scripts when consent is granted
- Analytics Integration: Built-in support for Google Tag Manager and Silktide Analytics
- Event Callbacks: Trigger custom JavaScript functions when users accept or reject consent
- Accessibility: Fully accessible with keyboard navigation, focus traps, and ARIA labels
To use the Silktide Consent Manager, include the following files in your project:
- JavaScript File:
silktide-consent-manager.js - CSS File:
silktide-consent-manager.css
You can either download these files and host them yourself, or use a CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="path/to/silktide-consent-manager.css">
</head>
<body>
<script src="path/to/silktide-consent-manager.js"></script>
<script>
// Initialize the consent manager
window.silktideConsentManager.init({
consentTypes: [
{
id: 'essential',
label: 'Essential',
description: 'These are necessary for the website to function and cannot be switched off.',
required: true,
},
{
id: 'analytics',
label: 'Analytics',
description: 'These help us understand how visitors interact with the website.',
defaultValue: true,
gtag: 'analytics_storage', // Automatic Google Tag Manager / Silktide Analytics integration
},
{
id: 'marketing',
label: 'Marketing',
description: 'These are used to deliver personalized advertisements.',
defaultValue: false,
gtag: ['ad_storage', 'ad_user_data', 'ad_personalization'],
onAccept: function() {
console.log('Marketing accepted');
},
onReject: function() {
console.log('Marketing rejected');
},
},
],
});
</script>
</body>
</html>An array of consent type objects. Each object may include:
id(string, required): Unique identifier for the consent typelabel(string, required): Display name shown to usersdescription(string, required): Description shown in the preferences modalrequired(boolean): Whether this consent is essential and cannot be rejected (default: false)defaultValue(boolean): Default state when user hasn't made a choice (default: false)gtag(string or array): Google Tag Manager consent parameter(s) to update automaticallyscripts(array): Scripts to inject when consent is granted (see Script Injection below)onAccept(function): Callback triggered when consent is grantedonReject(function): Callback triggered when consent is rejected
If you're using Google Tag Manager, the consent manager fires a custom event to the dataLayer whenever consent changes. By default, this event is called stcm_consent_update, but you can override it:
eventName: 'my_custom_consent_event'If you're not using Google Tag Manager, you can ignore this option.
Customize all text displayed to users:
text: {
prompt: {
description: '<p>We use cookies to enhance your experience.</p>',
acceptAllButtonText: 'Accept all',
acceptAllButtonAccessibleLabel: 'Accept all cookies',
rejectNonEssentialButtonText: 'Reject non-essential',
rejectNonEssentialButtonAccessibleLabel: 'Reject all non-essential cookies',
preferencesButtonText: 'Preferences',
preferencesButtonAccessibleLabel: 'Manage cookie preferences',
},
preferences: {
title: 'Customize your preferences',
description: '<p>Choose which cookies you want to accept.</p>',
saveButtonText: 'Save and close',
saveButtonAccessibleLabel: 'Save your cookie preferences',
creditLinkText: 'Get this consent manager for free',
creditLinkAccessibleLabel: 'Visit Silktide Consent Manager',
},
}Configure the initial consent prompt:
prompt: {
position: 'bottomRight' // Options: 'center', 'bottomLeft', 'bottomCenter', 'bottomRight'
}Configure the cookie icon that appears after initial consent:
icon: {
position: 'bottomLeft' // Options: 'bottomLeft', 'bottomRight'
}Configure the backdrop shown behind the prompt/modal:
backdrop: {
show: true // Show a backdrop behind the consent prompt (default: false)
}autoShow(boolean): Whether to automatically show the prompt on first visit (default: true)namespace(string): Namespace for localStorage keys to support multiple consent managers on one domaindebug(boolean): Enable console logging for GTM events and consent updates (default: false)onAcceptAll(function): Callback when user accepts all consent typesonRejectAll(function): Callback when user rejects all non-essential consent typesonPromptOpen(function): Callback when consent prompt is shownonPromptClose(function): Callback when consent prompt is closedonPreferencesOpen(function): Callback when preferences modal is openedonPreferencesClose(function): Callback when preferences modal is closedonBackdropOpen(function): Callback when backdrop is shownonBackdropClose(function): Callback when backdrop is hidden
Automatically load third-party scripts when consent is granted:
{
id: 'analytics',
label: 'Analytics',
description: 'Google Analytics tracking',
scripts: [
{
url: 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID',
load: 'async', // Options: 'async', 'defer', or omit for default
type: 'text/javascript',
crossorigin: 'anonymous',
integrity: 'sha384-...' // Optional SRI hash
}
],
onAccept: function() {
// Initialize analytics
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
}
}Scripts will only be injected once when consent is granted. If consent is later revoked, the page will automatically reload to remove the scripts.
The consent manager automatically integrates with Google Tag Manager in two ways:
When consent changes, the manager automatically calls gtag('consent', 'update', {...}):
{
id: 'analytics',
label: 'Analytics',
description: 'Analytics tracking',
gtag: 'analytics_storage', // Single parameter
},
{
id: 'marketing',
label: 'Marketing',
description: 'Advertising and marketing',
gtag: ['ad_storage', 'ad_user_data', 'ad_personalization'], // Multiple parameters
}The consent manager fires a single custom event to GTM's dataLayer whenever consent changes:
window.dataLayer.push({ 'event': 'stcm_consent_update' });This event fires when:
- User accepts or rejects consent from the innitial prompt
- User changes and saves preferences in the modal
- Page loads with existing granted consents
Setting up GTM tags:
- In Google Tag Manager, create a Custom Event trigger
- Set event name to
stcm_consent_update(or your customeventName) - Configure your tags (GA4, Google Ads, etc.) to fire on this trigger
You can customize the event name:
window.silktideConsentManager.init({
eventName: 'my_custom_consent_event',
consentTypes: [/* ... */]
});Initialize the consent manager with a configuration object:
window.silktideConsentManager.init({
consentTypes: [/* ... */],
// ... other options
});Update the configuration by merging with existing config:
window.silktideConsentManager.update({
text: {
prompt: {
description: '<p>New description</p>'
}
}
});Clear all consent choices and show the prompt again:
window.silktideConsentManager.resetConsent();Get the current consent manager instance for advanced usage:
const manager = window.silktideConsentManager.getInstance();
// Access consent choices
const analyticsConsent = manager.getConsentChoice('analytics'); // true, false, or null
// Get all accepted consents
const accepted = manager.getAcceptedConsents(); // { essential: true, analytics: true, ... }The consent manager uses CSS variables for easy customization. Override these in your own stylesheet:
#stcm-wrapper {
--fontFamily: 'Your Font', sans-serif;
--primaryColor: #533BE2;
--backgroundColor: #FFFFFF;
--textColor: #253B48;
--boxShadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;
--backdropBackgroundColor: #00000077;
--backdropBackgroundBlur: 5px;
--iconColor: #533BE2;
--iconBackgroundColor: #FFFFFF;
}All CSS classes and IDs use the stcm- prefix to avoid conflicts with your site's styles.
This project is licensed under the MIT License.
Contributions are welcome! If you have suggestions, bug reports, or feature requests, please open an issue or submit a pull request.
Created with love by Silktide.