PrivacyPact Integration Guide

Quick Start

Add PrivacyPact to your website with just two lines of code. The widget automatically handles cookie consent, privacy requests, and opt-out management.

<script src="https://www.privacy-pact.com/widget/privacy-portal.min.js"></script>
<script>
  PrivacyPactPortal.init({
    apiKey: "pk_live_your_api_key_here"
  });
</script>

💡 Tip: Get your API key from your dashboard after signing up.

Step-by-Step Instructions

Step 1: Get Your API Key

Step 2: Add the Script Tag

Add the PrivacyPact script to your website's <head> section, just before the closing </head> tag.

<head>
  <!-- Other head content -->
  <script src="https://www.privacy-pact.com/widget/privacy-portal.min.js"></script>
</head>

Step 3: Initialize the Widget

Add the initialization script with your API key. You can place this anywhere on your page, but we recommend placing it right after the script tag.

<script>
  PrivacyPactPortal.init({
    apiKey: "pk_live_your_api_key_here"
  });
</script>

Step 4: Test It Out

Visit your website. If you're in the EU or UK, you should see a cookie consent banner. The widget automatically detects your location and applies the appropriate privacy laws.

Configuration Options

Customize the widget behavior with these configuration options:

PrivacyPactPortal.init({
  // Required: Your API key
  apiKey: "pk_live_your_api_key_here",
  
  // Optional: Custom API endpoint (defaults to https://www.privacy-pact.com)
  apiEndpoint: "https://your-custom-endpoint.com",
  
  // Optional: Theme (light, dark, or auto - defaults to auto)
  theme: "auto",
  
  // Optional: Enable debug mode (defaults to false)
  debug: false,
  
  // Optional: Auto-detect user location (defaults to true)
  autoDetectState: true,
  
  // Optional: Test state override (for testing)
  testState: "CA", // Override detected state for testing
  
  // Optional: Enable cookie consent (defaults to true)
  enableCookieConsent: true,
  
  // Optional: Custom cookie categories
  cookieCategories: {
    essential: ["session", "auth"],
    analytics: ["_ga", "_gid"],
    marketing: ["_fbp", "ads_id"],
    functional: ["preferences"]
  },
  
  // Optional: Respect Global Privacy Control (defaults to true)
  respectGPC: true,
  
  // Optional: Respect Do Not Track (defaults to true)
  respectDNT: true
});

Framework Examples

Next.js

// app/layout.tsx or pages/_app.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://www.privacy-pact.com/widget/privacy-portal.min.js"
          strategy="afterInteractive"
        />
        <Script id="privacypact-init" strategy="afterInteractive">
          {`
            PrivacyPactPortal.init({
              apiKey: "pk_live_your_api_key_here"
            });
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  );
}

React

// App.jsx or App.tsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Load script
    const script = document.createElement('script');
    script.src = 'https://www.privacy-pact.com/widget/privacy-portal.min.js';
    script.async = true;
    script.onload = () => {
      // Initialize after script loads
      if (window.PrivacyPactPortal) {
        window.PrivacyPactPortal.init({
          apiKey: "pk_live_your_api_key_here"
        });
      }
    };
    document.head.appendChild(script);
  }, []);

  return <div>Your app content</div>;
}

Vanilla HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <script src="https://www.privacy-pact.com/widget/privacy-portal.min.js"></script>
  <script>
    PrivacyPactPortal.init({
      apiKey: "pk_live_your_api_key_here"
    });
  </script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

What Happens Next?

Once integrated, PrivacyPact automatically:

Detects user location and applies appropriate privacy laws
Shows cookie consent banners for EU/UK users
Blocks non-essential cookies until consent is given
Provides privacy request forms (access, deletion, portability)
Handles opt-out requests for CCPA and state laws
Logs all consent decisions and requests for compliance

Integration Guide