Script Embed

Generate single-line embed scripts for easy integration without npm.

Quick Embed

The simplest way to add the Compliance SDK to any website:

<script
  src="https://cdn.priv.io/compliance-sdk/latest/priv-compliance.umd.js"
  async
  data-priv-config="eyJzaXRlSWQiOiJ5b3VyLXNpdGUtaWQifQ=="
></script>

The data-priv-config attribute contains a base64-encoded configuration object.

Generate Embed Scripts

Using the SDK

import { generateEmbedScript, generateFullEmbed } from '@priv/compliance-sdk';

const config = {
  siteId: 'your-site-id',
  api: {
    endpoint: 'https://api.priv.io/v1',
    apiKey: 'pk_xxx',
  },
  banner: {
    position: 'bottom-right',
    theme: {
      primaryColor: '#2563eb',
    },
  },
};

// Simple script tag
const scriptTag = generateEmbedScript(config);
console.log(scriptTag);
// <script src="..." async data-priv-config="..."></script>

// Full embed with inline initialization
const fullEmbed = generateFullEmbed(config);
console.log(fullEmbed);

Embed Script Options

generateEmbedScript(config, options?)

Generate a simple script tag.

interface EmbedScriptOptions {
  /** CDN version (default: 'latest') */
  version?: string;

  /** Use minified build (default: true) */
  minified?: boolean;

  /** Load async (default: true) */
  async?: boolean;

  /** Load deferred (default: false) */
  defer?: boolean;

  /** Custom CDN base URL */
  cdnBase?: string;

  /** SRI integrity hash */
  integrity?: string;
}

Examples:

// Default (async, minified)
generateEmbedScript(config);
// <script src="https://cdn.priv.io/compliance-sdk/latest/priv-compliance.umd.js" async data-priv-config="..."></script>

// Specific version with SRI
generateEmbedScript(config, {
  version: '1.2.0',
  integrity: 'sha384-...',
});
// <script src="https://cdn.priv.io/compliance-sdk/1.2.0/priv-compliance.umd.js" async integrity="sha384-..." crossorigin="anonymous" data-priv-config="..."></script>

// Custom CDN
generateEmbedScript(config, {
  cdnBase: 'https://assets.yourdomain.com',
});

generateFullEmbed(config, options?)

Generate a complete embed snippet with inline initialization.

const fullEmbed = generateFullEmbed({
  siteId: 'your-site-id',
  banner: {
    position: 'bottom-right',
  },
});

Output:

<!-- PRIV Compliance SDK -->
<script>
(function(w,d,s,c){
  w.PrivComplianceConfig=c;
  var f=d.getElementsByTagName(s)[0],j=d.createElement(s);
  j.async=true;
  j.src="https://cdn.priv.io/compliance-sdk/latest/priv-compliance.umd.js";
  j.onload=function(){
    if(w.PrivCompliance){
      w.privCompliance=PrivCompliance.init(c);
    }
  };
  f.parentNode.insertBefore(j,f);
})(window,document,'script',{
  "siteId": "your-site-id",
  "banner": {
    "position": "bottom-right"
  }
});
</script>

generateInlineScript(config)

Generate an inline initialization script (requires SDK already loaded).

const inlineScript = generateInlineScript(config);

Output:

<script>
(function() {
  var config = {
    "siteId": "your-site-id"
  };

  function init() {
    if (typeof PrivCompliance !== 'undefined') {
      window.privCompliance = PrivCompliance.init(config);
    } else {
      console.error('PRIV Compliance SDK not loaded');
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

NPM Instructions

Generate npm installation instructions:

import { generateNpmInstructions } from '@priv/compliance-sdk';

const instructions = generateNpmInstructions(config);
console.log(instructions);

Output:

// Install via npm
// npm install @priv/compliance-sdk

import { init } from '@priv/compliance-sdk';

const config = {
  "siteId": "your-site-id",
  "api": {
    "endpoint": "https://api.priv.io/v1",
    "apiKey": "pk_xxx"
  }
};

// Initialize the SDK
const priv = init(config);

// The banner will show automatically if consent hasn't been given

// Manual control:
// priv.showBanner();
// priv.hideBanner();
// priv.showPreferences();

// Check consent:
// priv.consent.hasCategory('analytics');

// Listen for changes:
// priv.consent.onConsentChange((preferences) => {
//   console.log('Consent updated:', preferences);
// });

Google Tag Manager

Generate GTM custom HTML tag:

import { generateGTMInstructions } from '@priv/compliance-sdk';

const gtmTag = generateGTMInstructions(config);
console.log(gtmTag);

Output:

<!-- Google Tag Manager Custom HTML Tag -->
<script>
(function() {
  var config = JSON.parse(atob('...encoded config...'));

  // Load PRIV Compliance SDK
  var script = document.createElement('script');
  script.src = 'https://cdn.priv.io/compliance-sdk/latest/priv-compliance.umd.js';
  script.async = true;
  script.onload = function() {
    window.privCompliance = PrivCompliance.init(config);

    // Push consent to dataLayer
    window.privCompliance.consent.onConsentChange(function(prefs) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'consent_update',
        consent: {
          analytics: prefs.categories.analytics,
          marketing: prefs.categories.marketing,
          personalization: prefs.categories.personalization
        }
      });
    });
  };
  document.head.appendChild(script);
})();
</script>

<!-- Trigger: All Pages -->
<!-- Firing Priority: Set high (e.g., 999) to load before other tags -->

Auto-Initialization

The SDK automatically initializes when loaded via script tag with data-priv-config:

import { autoInit, parseEmbedConfig } from '@priv/compliance-sdk';

// Parse config from data attribute
const encoded = 'eyJzaXRlSWQiOiJ0ZXN0In0=';
const config = parseEmbedConfig(encoded);
// { siteId: 'test' }

// Auto-init is called automatically on DOMContentLoaded
// Or manually trigger:
autoInit();

UMD Global Access

When loaded via script tag, the SDK is available globally:

<script src="https://cdn.priv.io/compliance-sdk/latest/priv-compliance.umd.js"></script>
<script>
  // Initialize
  const priv = PrivCompliance.init({
    siteId: 'your-site-id',
    banner: {
      position: 'bottom-right',
    },
  });

  // Access components directly
  const consent = new PrivCompliance.ConsentManager({ siteId: 'test' });
  const audit = new PrivCompliance.AuditLog({ siteId: 'test' });
  const dsar = new PrivCompliance.DSARHandler({ siteId: 'test' });
  const banner = new PrivCompliance.ConsentBanner(consent);
</script>

Self-Hosting

Host the SDK on your own CDN:

const embed = generateEmbedScript(config, {
  cdnBase: 'https://assets.yourdomain.com/priv-sdk',
  version: '1.2.0',
  integrity: 'sha384-...', // Calculate from your hosted file
});

Build the SDK locally:

# Clone and build
git clone https://github.com/priv/compliance-sdk
cd compliance-sdk
npm install
npm run build

# Copy dist/ to your CDN

Security Headers

Ensure your CSP allows the SDK:

Content-Security-Policy: script-src 'self' https://cdn.priv.io;

For inline scripts (generateFullEmbed):

Content-Security-Policy: script-src 'self' 'unsafe-inline' https://cdn.priv.io;

Or use nonces:

<script nonce="abc123">
  // SDK initialization
</script>

Complete Integration Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>

  <!-- PRIV Compliance SDK - Load First -->
  <script>
  (function(w,d,s,c){
    w.PrivComplianceConfig=c;
    var f=d.getElementsByTagName(s)[0],j=d.createElement(s);
    j.async=true;
    j.src="https://cdn.priv.io/compliance-sdk/latest/priv-compliance.umd.js";
    j.onload=function(){
      if(w.PrivCompliance){
        w.privCompliance=PrivCompliance.init(c);

        // Conditionally load analytics
        if(w.privCompliance.consent.hasCategory('analytics')){
          loadGoogleAnalytics();
        }

        // Listen for consent changes
        w.privCompliance.consent.onConsentChange(function(prefs){
          if(prefs.categories.analytics){
            loadGoogleAnalytics();
          }
        });
      }
    };
    f.parentNode.insertBefore(j,f);
  })(window,document,'script',{
    siteId: "your-site-id",
    api: {
      endpoint: "https://api.priv.io/v1",
      apiKey: "pk_xxx"
    },
    banner: {
      position: "bottom-right",
      theme: {
        primaryColor: "#2563eb"
      }
    }
  });

  function loadGoogleAnalytics() {
    // Load GA4 only after consent
  }
  </script>
</head>
<body>
  <!-- Your content -->

  <footer>
    <a href="#" onclick="privCompliance.showPreferences(); return false;">
      Cookie Settings
    </a>
  </footer>
</body>
</html>

Next Steps

Overview - Full SDK documentation
Consent Banner - Customize the banner

Script Embed

On this page