Consent Banner

Cookie Categories

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

Blocking Scripts Until Consent

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

<!-- 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>

Customization

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

Layered Consent (Purpose-Based Prompts)

The base banner asks for consent once, up-front, for broad categories. Layered consent goes further: it asks at the exact moment data is collected, scoped to a specific purpose you define (e.g. marketing_emails, biometric_login, location_tracking). This maps directly to the DPDP Act's requirement that consent be free, specific, informed, and unambiguous for a defined purpose (§6).

How it works

1. 1. Enable layered consent in your admin dashboard under Cookies → Consent Data.
2. 2. Define your purposes — give each one a stable key and a user-facing display name.
3. 3. Go to Integration Settings — pick your platform and copy the SDK snippet for the page-level banner (same as normal).
4. 4. Add a requestPurpose() call everywhere your code is about to collect data for that purpose — before a form submit, before kicking off an analytics event, etc. The SDK shows a one-off prompt only if the user hasn't already decided.
5. 5. Branch on the result — if granted is true, proceed with the collection. Otherwise, do not.

Where to place the code

Wherever the data collection actually happens. Common spots:

• The click handler for a "Subscribe" or "Sign up" button
• The submit handler of a contact / lead form
• Just before initialising a third-party SDK that processes PII (chat widget, heatmap, etc.)
• Before firing a custom analytics event
• Before requesting geolocation, camera, contacts on mobile

Web example (JavaScript)

// Before submitting a lead-capture form
document.getElementById('lead-form').addEventListener('submit', function (e) {
  e.preventDefault();

  DPDPConsent.requestPurpose('marketing_emails', { context: 'lead_form' })
    .then(function (granted) {
      if (granted) {
        submitLead();   // user said yes — collect the email
      }
      // else: don't collect.
    });
});

Mobile example (React Native)

import { PrivacyLabsConsent } from '@theprivacylabs/react-native-consent';

async function onEnableLocation() {
  const granted = await PrivacyLabsConsent.requestPurpose(
    'location_tracking',
    { context: 'home_screen' }
  );
  if (granted) {
    startLocationUpdates();
  }
}

Flutter, Next.js, Shopify and WordPress snippets are auto-generated in Admin → Cookies → Integration Settings → Purpose integration for your specific purpose keys.

Listening for consent changes

If you need to react when a user grants, denies, or withdraws a purpose elsewhere (e.g. via the preferences modal), subscribe to the event:

window.addEventListener('dpdp:purpose-status', function (e) {
  // e.detail.purposeKey, e.detail.status
  if (e.detail.purposeKey === 'analytics_collection' &&
      e.detail.status === 'withdrawn') {
    stopAnalytics();
  }
});

Translations

The banner supports all 22 scheduled languages of India (Eighth Schedule of the Constitution), as required by the DPDP Act. You write the banner copy once in English, the platform auto-translates it into the languages you enable, and you can review or override any translation from the dashboard.

See the Automation docs for the full workflow (add languages, generate, review, publish, re-translate when source changes).

Mobile vs Desktop

The banner automatically adapts to screen size: