Consent Banner

Configure your DPDP-compliant consent banner. Customize categories, text, colors, and behavior.

Cookie Categories

The banner supports four standard cookie categories. Configure which are enabled in your dashboard.

Category	Default	Description
Necessary	Always On	Essential for site functionality. Cannot be disabled.
Analytics	Off	Track usage patterns, page views, performance metrics.
Marketing	Off	Advertising, retargeting, personalized ads.
Functional	Off	Enhanced features, preferences, chat widgets.

Blocking Scripts Until Consent

Use the data-consent-category attribute to block scripts until the user consents to that category.

HTML

<!-- Google Analytics - only loads after analytics consent -->
<script
  data-consent-category="analytics"
  type="text/plain"
  src="https://www.googletagmanager.com/gtag/js?id=GA_ID"
></script>

<!-- Facebook Pixel - only loads after marketing consent -->
<script
  data-consent-category="marketing"
  type="text/plain"
>
  // Facebook Pixel code here
</script>

Important: Set type="text/plain" to prevent the script from executing before consent. The SDK will change it to text/javascript after consent.

Customization

Configure these settings in your admin dashboard under Consent > Banner Settings:

Text & Copy

• Banner title and description
• Accept/Reject button text
• Category descriptions
• Privacy policy link text

Appearance

• Primary color (buttons, links)
• Position (bottom, top, center modal)
• Logo display

Behavior

• Show on every page vs first visit only
• Consent expiry duration
• Require explicit action (no implied consent)

Translations

The banner supports multiple languages. Configure translations in your dashboard.

Language	Status
English	Default
Hindi	Available
Tamil, Telugu, Kannada, etc.	Coming Soon

Mobile vs Desktop

The banner automatically adapts to screen size:

Desktop

• Full-width banner at bottom
• Side-by-side buttons
• Expandable category details

Mobile

• Compact modal view
• Stacked buttons
• Touch-friendly toggles

JavaScript Events

Listen for consent changes in your application:

window.addEventListener('privacylabs:consent', (event) => {
  const { analytics, marketing, functional } = event.detail;
  
  if (analytics) {
    // Initialize analytics
  }
  
  if (marketing) {
    // Initialize marketing pixels
  }
});