SDK & Installation

Add the Privacy Labs consent banner to your website with a single script tag. Configure behavior with data attributes.

Basic Installation

Add this script tag just before the closing </body> tag:

HTML

<script
  src="https://theprivacylabs.com/sdk/consent-banner.js"
  data-org="YOUR_ORG_SLUG"
  async
></script>

Configuration Attributes

Attribute	Required	Description
data-org	Yes	Your organization slug from the dashboard
data-auto-init	No	Set to "false" to manually initialize. Default: "true"
data-gtm-enabled	No	Enable Google Tag Manager integration. Default: "false"

Framework Guides

Next.js (App Router)

Add the script to your root layout:

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://theprivacylabs.com/sdk/consent-banner.js"
          data-org="YOUR_ORG_SLUG"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

React (Create React App / Vite)

Add the script to your index.html:

public/index.html

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <div id="root"></div>
    <script
      src="https://theprivacylabs.com/sdk/consent-banner.js"
      data-org="YOUR_ORG_SLUG"
      async
    ></script>
  </body>
</html>

Plain HTML

Add the script before the closing body tag:

<!DOCTYPE html>
<html>
  <head>...</head>
  <body>
    <!-- Your content -->
    <script
      src="https://theprivacylabs.com/sdk/consent-banner.js"
      data-org="YOUR_ORG_SLUG"
      async
    ></script>
  </body>
</html>

Shopify

Add the script to your theme's theme.liquid file:

Go to Online Store → Themes → Edit code
Open theme.liquid
Add the script just before </body>

theme.liquid

<script
  src="https://theprivacylabs.com/sdk/consent-banner.js"
  data-org="YOUR_ORG_SLUG"
  async
></script>
</body>
</html>

WordPress

Add the script using your theme's functions.php or a plugin like "Insert Headers and Footers":

functions.php

function add_privacy_labs_consent() {
  ?>
  <script
    src="https://theprivacylabs.com/sdk/consent-banner.js"
    data-org="YOUR_ORG_SLUG"
    async
  ></script>
  <?php
}
add_action('wp_footer', 'add_privacy_labs_consent');

Or use a plugin: Go to Settings → Insert Headers and Footers and paste the script in the Footer section.

Google Tag Manager (GTM)

If you use Google Tag Manager, enable the GTM integration to sync consent with Google Consent Mode v2:

<script
  src="https://theprivacylabs.com/sdk/consent-banner.js"
  data-org="YOUR_ORG_SLUG"
  data-gtm-enabled="true"
  async
></script>

What happens when enabled: When a user gives consent, the SDK calls gtag('consent', 'update', ...) to update Google Consent Mode:

analytics_storage → granted/denied based on Analytics consent
ad_storage → granted/denied based on Marketing consent
ad_user_data → granted/denied based on Marketing consent
ad_personalization → granted/denied based on Marketing consent

It also pushes a consent_update event to the dataLayer for GTM triggers.

Note: Make sure GTM is loaded on your page and gtag is available before consent is given.

SDK Methods

The SDK exposes methods on window.PrivacyLabs:

init(config)

Manually initialize the banner (if data-auto-init="false")

window.theprivacylabs.comit({ org: 'acme-corp' })

getSessionId()

Get the current session ID for consent tracking

const sessionId = window.PrivacyLabs.getSessionId()

withdrawConsent()

Withdraw all consent and show the banner again

window.PrivacyLabs.withdrawConsent()

linkIdentity(userId)

Link consent to a logged-in user ID

window.PrivacyLabs.linkIdentity('user_123')

Troubleshooting

Banner not showing?

Check that your org slug is correct and the domain is whitelisted in your dashboard.

Test in incognito

Use incognito mode to see the banner as a first-time visitor.