Privacy Policy Generator

Overview

The Privacy Policy Management components provide a comprehensive solution for creating, previewing, and exporting customized, NDPA-compliant privacy policies for your website or application. The system includes three main components: PolicyGenerator, PolicyPreview, and PolicyExporter, which work together to create professional, enterprise-ready privacy policies with variable support.

Installation

Install the NDPR Toolkit package which includes the Privacy Policy Generator components:

pnpm add @tantainnovative/ndpr-toolkit

Components

The Privacy Policy Management system includes three main components that work together to create, preview, and export NDPA-compliant privacy policies:

import { PolicyGenerator } from '@tantainnovative/ndpr-toolkit';

<PolicyGenerator
  sections={policySections}
  variables={policyVariables}
  onGenerate={(policy) => {
    // policy.sections - Updated sections
    // policy.variables - Updated variables with values
    // policy.content - Generated policy content in markdown format
    setPolicyContent(policy.content);
  }}
  title="Privacy Policy Generator"
  description="Create your NDPA-compliant privacy policy"
  showPreview={true}
  allowEditing={true}
/>

import { PolicyPreview } from '@tantainnovative/ndpr-toolkit';

<PolicyPreview
  content={policyContent}
  title="Privacy Policy"
  showTableOfContents={true}
  className="policy-preview"
  onContentChange={(updatedContent) => {
    setPolicyContent(updatedContent);
  }}
/>

import { PolicyExporter } from '@tantainnovative/ndpr-toolkit';

<PolicyExporter
  content={policyContent}
  title="Privacy Policy"
  filename="privacy-policy"
  formats={{
    pdf: true,
    markdown: true,
    html: true
  }}
  companyInfo={{
    name: "Your Company Name",
    logo: "/path/to/logo.png",
    website: "https://example.com",
    email: "privacy@example.com"
  }}
/>

Variable Support

The Privacy Policy Management system supports variables in templates, allowing for dynamic and enterprise-ready policies. Variables are defined with specific types and can be edited through the PolicyGenerator interface, making it easy to customize the policy for different organizations and use cases.

Defining Variables

Variables are defined as an array of PolicyVariable objects, each with properties like id, name, description, defaultValue, inputType, and required status. These variables can then be referenced in your policy sections using the {{ and }} syntax.

const policyVariables = [
  {
    id: 'companyName',
    name: 'Company Name',
    description: 'The legal name of your organization',
    defaultValue: 'Your Company',
    value: '',
    inputType: 'text',
    required: true
  },
  {
    id: 'contactEmail',
    name: 'Contact Email',
    description: 'Email address for privacy inquiries',
    defaultValue: 'privacy@example.com',
    value: '',
    inputType: 'email',
    required: true
  },
  {
    id: 'effectiveDate',
    name: 'Effective Date',
    description: 'When this privacy policy takes effect',
    defaultValue: new Date().toISOString().split('T')[0],
    value: '',
    inputType: 'date',
    required: true
  },
  {
    id: 'dataRetentionPeriod',
    name: 'Data Retention Period',
    description: 'How long you retain user data',
    defaultValue: '12 months',
    value: '',
    inputType: 'text',
    required: true
  }
];

const policySections = [
  {
    id: 'introduction',
    title: 'Introduction',
    content: '# Privacy Policy for {{companyName}}\n\nLast Updated: {{effectiveDate}}\n\n{{companyName}} ("we", "us", or "our") is committed to protecting your privacy.',
    enabled: true,
    order: 1
  }
];

Variable Validation

The generatePolicyText utility also provides validation to help you identify missing variables:

const result = generatePolicyText(policyTemplate, variables);

// The full generated text
console.log(result.fullText);

// Any missing variables that weren't provided
console.log(result.missingVariables); // e.g., ['phoneNumber']

// Individual section texts if using PolicySection[] input
console.log(result.sectionTexts);

Using with PolicySection Array

import { generatePolicyText, PolicySection } from '@tantainnovative/ndpr-toolkit';

const policySections: PolicySection[] = [
  {
    id: 'introduction',
    title: 'Introduction',
    content: '{{organizationName}} ("we", "us", or "our") operates the {{websiteUrl}} website.'
  },
  {
    id: 'contact',
    title: 'Contact Us',
    content: 'If you have any questions, please contact us at {{contactEmail}}.'
  }
];

const variables = {
  organizationName: 'Acme Corporation',
  websiteUrl: 'https://acme.com',
  contactEmail: 'privacy@acme.com'
};

const result = generatePolicyText(policySections, variables);

console.log(result.fullText);
console.log(result.sectionTexts.introduction);
console.log(result.sectionTexts.contact);

Usage

Here's a complete example of how to implement the Privacy Policy Generator in your application:

import { useState } from 'react';
import {
  PolicyGenerator,
  PolicyPreview,
  PolicyExporter,
  generatePolicyText,
} from '@tantainnovative/ndpr-toolkit';
import type { PolicySection } from '@tantainnovative/ndpr-toolkit';

const policyTemplates = [
  {
    id: 'standard',
    name: 'Standard Privacy Policy',
    description: 'A comprehensive privacy policy suitable for most websites and applications.',
    sections: [
      {
        id: 'introduction',
        title: 'Introduction',
        content: '{{organizationName}} ("we", "us", or "our") operates the {{websiteUrl}} website.'
      },
      // More sections...
    ]
  }
];

function PrivacyPolicyPage() {
  const [generatedPolicy, setGeneratedPolicy] = useState(null);
  const [selectedTemplate, setSelectedTemplate] = useState('standard');
  const [policyData, setPolicyData] = useState({
    organizationName: '',
    organizationWebsite: '',
    organizationContact: '',
  });
  const [variables, setVariables] = useState({
    organizationName: '',
    websiteUrl: '',
    contactEmail: '',
    lastUpdated: new Date().toLocaleDateString()
  });

  const handlePolicyGenerated = (data) => {
    setPolicyData(data);
    setVariables({
      ...variables,
      organizationName: data.organizationName,
      websiteUrl: data.organizationWebsite,
      contactEmail: data.organizationContact
    });

    const template = policyTemplates.find(t => t.id === selectedTemplate);
    const result = generatePolicyText(template.sections, variables);

    setGeneratedPolicy({
      title: `Privacy Policy for ${data.organizationName}`,
      content: result.fullText,
      sections: template.sections.map(section => ({
        ...section,
        content: result.sectionTexts[section.id] || section.content
      })),
      lastUpdated: new Date()
    });
  };

  return (
    <div>
      {!generatedPolicy ? (
        <PolicyGenerator
          onComplete={handlePolicyGenerated}
          templates={policyTemplates}
          initialValues={policyData}
          onTemplateSelect={(templateId) => setSelectedTemplate(templateId)}
          variables={variables}
        />
      ) : (
        <div>
          <PolicyPreview
            policy={generatedPolicy}
            onEdit={() => setGeneratedPolicy(null)}
            variables={variables}
          />
          <div className="mt-6">
            <PolicyExporter
              policy={generatedPolicy}
              formats={['html', 'pdf', 'markdown']}
              filename={`privacy-policy-${policyData.organizationName.toLowerCase().replace(/\s+/g, '-')}`}
            />
          </div>
        </div>
      )}
    </div>
  );
}

API Reference

PolicyGenerator Props

generatePolicyText Function

/**
 * Generates policy text by replacing variables in a template
 *
 * @param sectionsOrTemplate - Either an array of PolicySection objects or a template string
 * @param organizationInfoOrVariables - Either an OrganizationInfo object or a variables object
 * @returns Either a string (if no variables used) or an object with fullText, sectionTexts, and missingVariables
 */
function generatePolicyText(
  sectionsOrTemplate: PolicySection[] | string,
  organizationInfoOrVariables: OrganizationInfo | Record<string, string>
): string | {
  fullText: string;
  sectionTexts: Record<string, string>;
  missingVariables: string[];
}

PolicyTemplate Type

type PolicyTemplate = {
  id: string;
  name: string;
  description: string;
  sections: PolicySection[];
};

PolicySection Type

type PolicySection = {
  id: string;
  title: string;
  content: string;
  required?: boolean;
};

PolicyData Type

type PolicyData = {
  organizationName: string;
  organizationWebsite: string;
  organizationContact: string;
  dpoName?: string;
  dpoEmail?: string;
  dataCollectionMethods: string[];
  personalDataTypes: string[];
  sensitiveDataTypes?: string[];
  legalBasisForProcessing: string[];
  dataUsagePurposes: string[];
  automaticDecisionMaking: boolean;
  thirdPartySharing: boolean;
  thirdPartyCategories?: string[];
  internationalTransfers: boolean;
  transferSafeguards?: string;
  dataSubjectRightsProcess: string;
  securityMeasures: string[];
  retentionPeriod: string;
  usesCookies: boolean;
  cookieTypes?: string[];
  lastUpdated: Date;
  effectiveDate: Date;
  additionalInformation?: string;
};

PolicyPage — drop-in renderer

<PolicyPage /> (added in v3.4.0) renders a fully-styled privacy policy from a typed PrivacyPolicy object. Pair it with useDefaultPrivacyPolicy for a zero-config compliance page:

// app/privacy/page.tsx
'use client';
import { useDefaultPrivacyPolicy, PolicyPage } from '@tantainnovative/ndpr-toolkit';

export default function PrivacyPage() {
  const { policy } = useDefaultPrivacyPolicy({
    orgInfo: {
      name: 'Acme Nigeria Ltd',
      email: 'privacy@acme.ng',
      website: 'https://acme.ng',
      address: '12 Marina, Lagos',
    },
  });

  return policy ? <PolicyPage policy={policy} /> : null;
}

Render mode: shadow vs inline

Inline mode + typography pairing

Inline mode defaults includeStyles: falseso bare element selectors don't leak. Pair with your own typography library:

// Tailwind + @tailwindcss/typography
<article className="prose prose-slate dark:prose-invert max-w-3xl mx-auto">
  <PolicyPage policy={policy} mode="inline" />
</article>

// shadcn-ui Card
<Card>
  <CardContent className="prose dark:prose-invert">
    <PolicyPage policy={policy} mode="inline" />
  </CardContent>
</Card>

// Raw CSS (target the data attribute)
[data-ndpr-component="policy-page"] article {
  font-family: Georgia, serif;
  line-height: 1.7;
}

Theme: light / dark / auto

Theme defaults to 'light' (added in v3.4.1). Shadow DOM does not isolate prefers-color-scheme, so before 3.4.1 every visitor on macOS dark mode saw a dark policy bleed through any light-only host. Default light is safer for embedded widgets — opt in to OS-driven theming when you actively want it:

// Default — no prefers-color-scheme: dark block emitted.
<PolicyPage policy={policy} />

// Force dark.
<PolicyPage policy={policy} options={{ theme: 'dark' }} />

// Follow OS preference.
<PolicyPage policy={policy} options={{ theme: 'auto' }} />

TOC anchor links work in Shadow DOM

The exported policy includes a table-of-contents nav with intra-document anchors. Browser default anchor behaviour can't traverse Shadow DOM boundaries, so as of v3.5.1 PolicyPage installs a click delegate on the shadow root that intercepts these clicks and scrolls the matching <section> into view. No consumer code required.

Custom CSS injection

// Brand without leaving shadow mode.
<PolicyPage
  policy={policy}
  options={{
    customCSS: ':root { --color-accent: #1d4ed8; --max-width: 64rem; }',
  }}
/>

Best Practices

• Clear Language: Ensure your privacy policy is written in clear, plain language that is easy for data subjects to understand.
• Regular Updates: Review and update your privacy policy regularly, especially when there are changes to your data processing activities.
• Accessibility: Make your privacy policy easily accessible on your website or application, typically through a link in the footer.
• Customization: While the generator provides a solid template, customize the policy to accurately reflect your specific data practices.
• Legal Review: Have your generated privacy policy reviewed by a legal professional familiar with the NDPA to ensure compliance.
• Use Variables: Leverage the variable system to create reusable templates that can be easily updated when your organization information changes.

Need Help?

If you have questions about implementing the Privacy Policy Generator or need assistance with NDPA compliance, check out these resources: