OpenPolicy

https://docs.openpolicy.sh
Admin
OpenPolicy generates privacy policies, terms of service, and cookie policies from TypeScript config...
Tokens:7,109
Snippets:68
Trust Score:3.8
Update:6 months ago
Show doc for...
Tokens:
Raw
### Manual Installation and Setup

Source: https://docs.openpolicy.sh/policies/quick-start

Install the core OpenPolicy packages manually if you prefer not to use shadcn. This approach requires manual configuration and styling of the components.

```bash
bun add @openpolicy/react @openpolicy/sdk
```

--------------------------------

### Install OpenPolicy SDK

Source: https://docs.openpolicy.sh/configuration

Install the OpenPolicy SDK using Bun.

```APIDOC
## Install OpenPolicy SDK

### Description
Install the OpenPolicy SDK using your preferred package manager. This example uses Bun.

### Method
`bun add`

### Endpoint
N/A

### Parameters
N/A

### Request Example
```bash
bun add @openpolicy/sdk
```

### Response
N/A
```

--------------------------------

### Install OpenPolicy CLI

Source: https://docs.openpolicy.sh/generation/cli

Instructions for installing the OpenPolicy CLI using Bun or using npx without installation. This tool allows for policy generation and validation outside of a build tool.

```bash
bun add -D @openpolicy/cli
```

```bash
npx openpolicy --help
```

--------------------------------

### Install OpenPolicy SDK

Source: https://docs.openpolicy.sh/configuration

Installs the required @openpolicy/sdk package using the Bun package manager. This is a prerequisite for defining policies in your project.

```shell
bun add @openpolicy/sdk
```

--------------------------------

### Install @openpolicy/astro

Source: https://docs.openpolicy.sh/generation/astro

Installs the @openpolicy/astro package as a development dependency using Bun.

```bash
bun add -D @openpolicy/astro
```

--------------------------------

### Manual Integration

Source: https://docs.openpolicy.sh/policies/quick-start

Install the core packages manually for full control over styling and rendering.

```APIDOC
## Manual Installation

### Description
Install the base SDK and React components to implement policies with custom renderers or inline styles.

### Installation
`bun add @openpolicy/react @openpolicy/sdk`

### Implementation
Wrap your page or layout with the `<OpenPolicy>` provider and import the desired component (e.g., `PrivacyPolicy`, `TermsOfService`, or `CookiePolicy`).

### Customization
Pass a `components` prop to the policy component to override default HTML elements (headings, paragraphs, etc.) or use the `style` prop for inline styling.
```

--------------------------------

### Install OpenPolicy Vite Plugin

Source: https://docs.openpolicy.sh/generation/vite

Installs the @openpolicy/vite package as a development dependency using the Bun package manager.

```bash
bun add -D @openpolicy/vite
```

--------------------------------

### Create Configuration File

Source: https://docs.openpolicy.sh/configuration

Example of an `openpolicy.ts` configuration file using `defineConfig`.

```APIDOC
## Create Configuration File

### Description
Create your `openpolicy.ts` configuration file using the `defineConfig` function from `@openpolicy/sdk`. This file defines your company information and various policy details.

### Method
`defineConfig`

### Endpoint
N/A

### Parameters
N/A

### Request Example
```typescript
// openpolicy.ts
import { defineConfig } from "@openpolicy/sdk";

export default defineConfig({
  company: {
    name: "Acme Inc.",
    legalName: "Acme Corporation",
    address: "123 Main St, Springfield, USA",
    contact: "privacy@acme.com",
  },
  privacy: {
    effectiveDate: "2026-01-01",
    dataCollected: {
      "Account Information": ["Name", "Email address"],
      "Usage Data": ["Pages visited", "IP address"],
    },
    legalBasis: "Legitimate interests and consent",
    retention: { "Account data": "Until account deletion" },
    cookies: { essential: true, analytics: false, marketing: false },
    thirdParties: [],
    userRights: ["access", "erasure"],
    jurisdictions: ["us", "eu"],
  },
  terms: {
    effectiveDate: "2026-01-01",
    acceptance: { methods: ["using the service", "creating an account"] },
    governingLaw: { jurisdiction: "Delaware, USA" },
  },
});
```

### Response
N/A

### Notes
The `company` block is required. Policy sections like `privacy` and `terms` are optional.
```

--------------------------------

### Install OpenPolicy Dependencies

Source: https://docs.openpolicy.sh/cookies/quick-start

Commands to install the necessary OpenPolicy packages and components. This includes the shadcn registry component and the core React SDK.

```bash
bunx shadcn@latest add @openpolicy/cookie-banner
bun add @openpolicy/react @openpolicy/sdk
```

--------------------------------

### Installing Policy Components via shadcn

Source: https://docs.openpolicy.sh/policies/quick-start

Use the shadcn CLI to add pre-styled policy components to your project.

```APIDOC
## CLI Installation

### Description
Installs pre-configured policy components into your project using the shadcn registry.

### Commands
- `bunx shadcn@latest add @openpolicy/privacy-policy`
- `bunx shadcn@latest add @openpolicy/terms-of-service`
- `bunx shadcn@latest add @openpolicy/cookie-policy`

### Usage
After installation, configure the `openpolicy.ts` file and wrap your application with the `<OpenPolicy>` provider.
```

--------------------------------

### Install OpenPolicy Components via shadcn

Source: https://docs.openpolicy.sh/policies/quick-start

Use the shadcn CLI to add pre-styled Privacy Policy, Terms of Service, and Cookie Policy components to your project. This command automatically installs the necessary base renderer and configuration files.

```bash
# Privacy Policy
bunx shadcn@latest add @openpolicy/privacy-policy

# Terms of Service
bunx shadcn@latest add @openpolicy/terms-of-service

# Cookie Policy
bunx shadcn@latest add @openpolicy/cookie-policy
```

--------------------------------

### Setup OpenPolicy Astro Integration

Source: https://docs.openpolicy.sh/generation/astro

Configures the Astro project to use the OpenPolicy integration by importing and adding it to the defineConfig.

```typescript
import { defineConfig } from "astro/config";
import { openPolicy } from "@openpolicy/astro";

export default defineConfig({
  integrations: [
    openPolicy(),
  ],
});
```

--------------------------------

### Render Policy Components

Source: https://docs.openpolicy.sh/policies/quick-start

Import and render specific policy components within your page files. This example demonstrates rendering the Privacy Policy component.

```typescript
import { PrivacyPolicy } from "@/components/ui/openpolicy/privacy-policy";

export default function PrivacyPolicyPage() {
  return <PrivacyPolicy />;
}
```

--------------------------------

### Reopen Cookie Banner with useCookies Hook

Source: https://docs.openpolicy.sh/cookies/banner

This example demonstrates how to allow users to revisit their cookie consent choices, typically from a footer link. It uses the `setRoute` function from the `useCookies` hook to trigger the reopening of the cookie settings.

```javascript
import { useCookies } from "@openpolicy/react";

function Footer() {
  const { setRoute } = useCookies();
  return <button onClick={() => setRoute("cookie")}>Cookie settings</button>;
}
```

--------------------------------

### Define OpenPolicy Cookie Configuration

Source: https://docs.openpolicy.sh/cookies/quick-start

Example structure for the cookie section within the openpolicy.ts configuration file, defining consent mechanisms and jurisdictions.

```typescript
cookie: {
  effectiveDate: "2026-01-01",
  cookies: {
    essential: true,
    analytics: true,
    functional: false,
    marketing: false,
  },
  consentMechanism: {
    hasBanner: true,
    hasPreferencePanel: true,
    canWithdraw: true,
  },
  jurisdictions: ["us", "eu"],
}
```

--------------------------------

### Initialize OpenPolicy Configuration

Source: https://docs.openpolicy.sh/generation/cli

Command to create a starter policy configuration file interactively. This sets up the basic structure for your OpenPolicy configuration.

```bash
openpolicy init
```

--------------------------------

### Customize OpenPolicy Plugin Options

Source: https://docs.openpolicy.sh/generation/vite

Demonstrates how to pass configuration options to the openPolicy plugin, including custom config paths, output formats, and target directories.

```javascript
openPolicy({
  configPath: "openpolicy.ts",
  formats: ["markdown"],
  outDir: "public/policies"
})
```

--------------------------------

### Generate Policies with OpenPolicy CLI

Source: https://docs.openpolicy.sh/generation/cli

Commands to compile a configuration file into various output formats like markdown, HTML, or PDF. Supports specifying output formats and directories, and watching for file changes.

```bash
openpolicy generate openpolicy.ts
```

```bash
openpolicy generate openpolicy.ts --format html
```

```bash
openpolicy generate openpolicy.ts --format markdown,html,pdf --out dist/policies
```

--------------------------------

### Using AI for Configuration

Source: https://docs.openpolicy.sh/configuration

Leverage AI coding agents to automatically generate your `openpolicy.ts` configuration file.

```APIDOC
## Using AI for Configuration

### Description
Utilize AI coding agents to quickly generate your `openpolicy.ts` configuration file by pointing the agent to your codebase. The AI can analyze your project's dependencies, environment variables, data models, and existing legal documents to create a tailored configuration.

### Method
AI Agent Interaction

### Endpoint
N/A

### Parameters
N/A

### Request Example
Instruct your AI coding agent to generate an `openpolicy.ts` file based on your codebase analysis.

### Response
An `openpolicy.ts` configuration file tailored to your project.

### Notes
AI agents are effective for this task due to the typed nature of the configuration and its direct mapping to elements within your code.
```

--------------------------------

### Configure OpenPolicy Astro Options

Source: https://docs.openpolicy.sh/generation/astro

Demonstrates how to configure the OpenPolicy Astro integration with custom options such as config file path, output formats, and output directory.

```typescript
openPolicy({
  configPath: "openpolicy.ts",   // path to your config file
  formats: ["markdown"],         // "markdown" | "html" | "pdf"
  outDir: "public/policies",     // output directory
})
```

--------------------------------

### Configure and Integrate OpenPolicy Provider

Source: https://docs.openpolicy.sh/cookies/quick-start

Demonstrates how to wrap a React application with the OpenPolicy provider and include the cookie banner components in the root layout.

```typescript
import { OpenPolicy } from "@openpolicy/react";
import { CookieBanner, CookiePreferences } from "@/components/ui/cookie-banner";
import openpolicy from "@/openpolicy";

export default function RootLayout({ children }) {
  return (
    <OpenPolicy config={openpolicy}>
      {children}
      <CookieBanner />
      <CookiePreferences />
    </OpenPolicy>
  );
}
```

--------------------------------

### Build Custom Cookie Banner with useCookies Hook

Source: https://docs.openpolicy.sh/cookies/quick-start

Shows how to create a custom banner UI using the useCookies hook to manage user consent states programmatically.

```typescript
import { OpenPolicy, useCookies } from "@openpolicy/react";
import openpolicy from "@/openpolicy";

function Banner() {
  const { route, acceptAll, acceptNecessary, setRoute } = useCookies();
  if (route !== "cookie") return null;

  return (
    <div>
      <p>We use cookies to improve your experience.</p>
      <button onClick={acceptAll}>Accept all</button>
      <button onClick={acceptNecessary}>Accept necessary only</button>
      <button onClick={() => setRoute("preferences")}>Preferences</button>
    </div>
  );
}

export default function RootLayout({ children }) {
  return (
    <OpenPolicy config={openpolicy}>
      {children}
      <Banner />
    </OpenPolicy>
  );
}
```

--------------------------------

### Define OpenPolicy Configuration

Source: https://docs.openpolicy.sh/configuration

Demonstrates how to structure the openpolicy.ts file using the defineConfig function. It includes mandatory company information and optional sections for privacy and terms of service policies.

```typescript
import { defineConfig } from "@openpolicy/sdk";

export default defineConfig({
  company: {
    name: "Acme Inc.",
    legalName: "Acme Corporation",
    address: "123 Main St, Springfield, USA",
    contact: "privacy@acme.com",
  },
  privacy: {
    effectiveDate: "2026-01-01",
    dataCollected: {
      "Account Information": ["Name", "Email address"],
      "Usage Data": ["Pages visited", "IP address"],
    },
    legalBasis: "Legitimate interests and consent",
    retention: { "Account data": "Until account deletion" },
    cookies: { essential: true, analytics: false, marketing: false },
    thirdParties: [],
    userRights: ["access", "erasure"],
    jurisdictions: ["us", "eu"],
  },
  terms: {
    effectiveDate: "2026-01-01",
    acceptance: { methods: ["using the service", "creating an account"] },
    governingLaw: { jurisdiction: "Delaware, USA" },
  },
});
```

--------------------------------

### Implementing CookiePreferences in Root Layout

Source: https://docs.openpolicy.sh/cookies/preferences

Shows how to integrate the CookiePreferences component into the application's root layout. This component should be placed alongside the CookieBanner within the OpenPolicy provider.

```javascript
import { CookiePreferences } from "@/components/ui/cookie-banner";

// Place inside <OpenPolicy> in your root layout, alongside CookieBanner
<CookiePreferences />
```

--------------------------------

### Validate Policies with OpenPolicy CLI

Source: https://docs.openpolicy.sh/generation/cli

Commands to check configuration files for compliance issues. Supports validation against specific jurisdictions like GDPR or CCPA. Exits with a non-zero code on errors, suitable for CI.

```bash
openpolicy validate openpolicy.ts
```

```bash
openpolicy validate openpolicy.ts --jurisdiction gdpr
```

--------------------------------

### Render Cookie Policy Component in React

Source: https://docs.openpolicy.sh/policies/cookies

Demonstrates how to wrap the application with the OpenPolicy provider and render the CookiePolicy component. It requires the configuration object imported from the openpolicy file.

```jsx
import { OpenPolicy, CookiePolicy } from "@openpolicy/react";
import openpolicy from "@/openpolicy";

export function CookiePolicyPage() {
  return (
    <OpenPolicy config={openpolicy}>
      <CookiePolicy />
    </OpenPolicy>
  );
}
```

--------------------------------

### Configure Terms of Service in openpolicy.ts

Source: https://docs.openpolicy.sh/policies/terms

This code snippet demonstrates how to define the terms of service configuration in your openpolicy.ts file. It includes settings for effective date, acceptance methods, eligibility, prohibited uses, termination clauses, disclaimers, limitation of liability, governing law, and changes policy.

```typescript
terms: {
  effectiveDate: "2026-01-01",
  acceptance: { methods: ["using the service", "creating an account"] },
  eligibility: { minimumAge: 13 },
  prohibitedUses: [
    "Violating any applicable laws or regulations",
    "Transmitting spam or malicious content",
  ],
  termination: {
    companyCanTerminate: true,
    userCanTerminate: true,
  },
  disclaimers: {
    serviceProvidedAsIs: true,
    noWarranties: true,
  },
  limitationOfLiability: {
    excludesIndirectDamages: true,
  },
  governingLaw: { jurisdiction: "Delaware, USA" },
  changesPolicy: {
    noticeMethod: "email or prominent notice on our website",
    noticePeriodDays: 30,
  },
}
```

--------------------------------

### Privacy Policy Configuration and Rendering

Source: https://docs.openpolicy.sh/policies/privacy

This section explains how to configure your `openpolicy.ts` file with privacy policy details and how to render the policy component in your React application.

```APIDOC
## Privacy Policy Configuration and Rendering

### Description
Configure your `openpolicy.ts` file with the `privacy` section to define your policy details. Then, use the `OpenPolicy` and `PrivacyPolicy` components from `@openpolicy/react` to render the policy page in your application.

### Method
N/A (Configuration and Component Usage)

### Endpoint
N/A

### Parameters
#### Request Body (Configuration in `openpolicy.ts`)
- **privacy** (object) - Required - Configuration for the privacy policy.
  - **effectiveDate** (string) - Required - The date the policy becomes effective (YYYY-MM-DD).
  - **dataCollected** (object) - Required - Details about the data collected.
    - **[Category Name]** (array of strings) - Description of data types collected in this category.
  - **legalBasis** (string) - Required - The legal basis for data processing.
  - **retention** (object) - Required - Information on data retention periods.
    - **[Data Type]** (string) - Description of the retention period.
  - **cookies** (object) - Optional - Cookie settings.
    - **essential** (boolean) - Whether essential cookies are used.
    - **analytics** (boolean) - Whether analytics cookies are used.
    - **marketing** (boolean) - Whether marketing cookies are used.
  - **thirdParties** (array of strings) - Optional - List of third parties with whom data is shared.
  - **userRights** (array of strings) - Optional - List of user rights available.
  - **jurisdictions** (array of strings) - Optional - Applicable jurisdictions for the policy.

#### Request Body (Rendering in React Component)
- **OpenPolicy** (component) - Required - Wraps the application with OpenPolicy context.
  - **config** (object) - Required - The OpenPolicy configuration object (e.g., imported from `openpolicy.ts`).
- **PrivacyPolicy** (component) - Required - Renders the privacy policy content.

### Request Example
```typescript
// openpolicy.ts
privacy: {
  effectiveDate: "2026-01-01",
  dataCollected: {
    "Account Information": ["Name", "Email address"],
    "Usage Data": ["Pages visited", "IP address"],
  },
  legalBasis: "Legitimate interests and consent",
  retention: {
    "Account data": "Until account deletion",
    "Usage logs": "90 days",
  },
  cookies: { essential: true, analytics: false, marketing: false },
  thirdParties: [],
  userRights: ["access", "erasure"],
  jurisdictions: ["us", "eu"],
},
```

```typescript
// Your React Component
import { OpenPolicy, PrivacyPolicy } from "@openpolicy/react";
import openpolicy from "@/openpolicy";

export function PrivacyPolicyPage() {
  return (
    <OpenPolicy config={openpolicy}>
      <PrivacyPolicy />
    </OpenPolicy>
  );
}
```

### Response
#### Success Response (200)
- The `PrivacyPolicy` component renders the formatted privacy policy based on the provided configuration.

#### Response Example
(The rendered HTML/UI of the privacy policy, not a JSON response)
```

--------------------------------

### Configure OpenPolicy in Vite

Source: https://docs.openpolicy.sh/generation/vite

Integrates the OpenPolicy plugin into the Vite configuration file. This enables automatic policy generation during the build and development cycles.

```typescript
import { defineConfig } from "vite";
import { openPolicy } from "@openpolicy/vite";

export default defineConfig({
  plugins: [
    openPolicy(),
  ],
});
```

--------------------------------

### Opening CookiePreferences Programmatically

Source: https://docs.openpolicy.sh/cookies/preferences

Demonstrates how to trigger the CookiePreferences modal programmatically using the setRoute function from the useCookies hook. This allows developers to open the preferences panel from custom UI elements like buttons.

```javascript
import { useCookies } from "@openpolicy/react";

function Footer() {
  const { setRoute } = useCookies();
  return <button onClick={() => setRoute("preferences")}>Cookie preferences</button>;
}
```

--------------------------------

### Render Terms of Service Page in React

Source: https://docs.openpolicy.sh/policies/terms

This code snippet shows how to integrate and render the TermsOfService component within a React application. It utilizes the OpenPolicy provider to pass the configuration and displays the terms of service page.

```typescript
import { OpenPolicy, TermsOfService } from "@openpolicy/react";
import openpolicy from "@/openpolicy";

export function TermsPage() {
  return (
    <OpenPolicy config={openpolicy}>
      <TermsOfService />
    </OpenPolicy>
  );
}
```

--------------------------------

### Manual Component Rendering

Source: https://docs.openpolicy.sh/policies/quick-start

Render policy components manually by wrapping them with the OpenPolicy provider. This method allows for custom styling by passing a components prop or using the style prop.

```typescript
import { OpenPolicy, PrivacyPolicy, TermsOfService, CookiePolicy } from "@openpolicy/react";
import openpolicy from "@/openpolicy";

export function PrivacyPolicyPage() {
  return (
    <OpenPolicy config={openpolicy}>
      <PrivacyPolicy />
    </OpenPolicy>
  );
}
```

--------------------------------

### Configure OpenPolicy Provider in React

Source: https://docs.openpolicy.sh/policies/quick-start

Wrap your application root layout with the OpenPolicy provider to inject the configuration. This ensures that policy components have access to the required settings throughout the component tree.

```typescript
import { OpenPolicy } from "@openpolicy/react";
import openpolicy from "@/openpolicy";

export default function RootLayout({ children }) {
  return (
    <OpenPolicy config={openpolicy}>
      {children}
    </OpenPolicy>
  );
}
```

--------------------------------

### Render Privacy Policy Page with React

Source: https://docs.openpolicy.sh/policies/privacy

Renders a privacy policy page within a React application using the OpenPolicy component. It requires importing the `OpenPolicy` and `PrivacyPolicy` components from `@openpolicy/react` and passing the application's OpenPolicy configuration to the `OpenPolicy` provider.

```typescript
import { OpenPolicy, PrivacyPolicy } from "@openpolicy/react";
import openpolicy from "@/openpolicy";

export function PrivacyPolicyPage() {
  return (
    <OpenPolicy config={openpolicy}>
      <PrivacyPolicy />
    </OpenPolicy>
  );
}
```

--------------------------------

### Accessing Consent State with useCookies Hook

Source: https://docs.openpolicy.sh/cookies/hooks

The useCookies hook provides access to the current consent state, UI routing, and helper functions to manage user preferences. It must be used within an OpenPolicy provider.

```javascript
import { useCookies } from "@openpolicy/react";

const { route, categories, acceptAll, acceptNecessary, setRoute, has } = useCookies();
```

--------------------------------

### useCookies Hook

Source: https://docs.openpolicy.sh/cookies/hooks

The primary hook for interacting with cookie consent state, providing methods to manage categories and UI routes.

```APIDOC
## useCookies Hook

### Description
Provides access to the cookie consent state and management functions. Must be used within an <OpenPolicy> provider.

### Return Value
- **route** (string) - Current UI screen: "cookie", "preferences", or "closed".
- **categories** (array) - List of consent categories with their enabled/locked status.
- **acceptAll** (function) - Enables all categories and closes the UI.
- **acceptNecessary** (function) - Enables only essential categories and closes the UI.
- **toggle** (function) - Toggles a specific category by key.
- **save** (function) - Persists current toggle state and closes the UI.
- **reject** (function) - Disables all non-essential categories and closes the UI.
- **setRoute** (function) - Programmatically sets the active UI screen.
- **has** (function) - Checks consent for a category or expression.

### Usage Example
```javascript
import { useCookies } from "@openpolicy/react";
const { route, categories, acceptAll, has } = useCookies();
```
```

--------------------------------

### Implement Cookie Banner Component

Source: https://docs.openpolicy.sh/cookies/banner

This snippet shows how to import and render the CookieBanner component in a React application. It should be placed within an <OpenPolicy> provider to function correctly. The banner automatically reads consent categories from your openpolicy.ts configuration.

```javascript
import { CookieBanner } from "@/components/ui/cookie-banner";

// Place inside <OpenPolicy> in your root layout
<CookieBanner />
```

--------------------------------

### ConsentGate Component

Source: https://docs.openpolicy.sh/cookies/hooks

A component that conditionally renders children based on whether the required consent has been granted.

```APIDOC
## ConsentGate Component

### Description
Renders children only if the consent requirements are met. Otherwise, renders the fallback component.

### Props
- **requires** (string | ConsentExpr) - Required. The category key or logical expression ({and}/{or}) to check.
- **fallback** (ReactNode) - Optional. Component to render if consent is not granted (default: null).

### Usage Example
```jsx
<ConsentGate requires="analytics">
  <GoogleAnalytics />
</ConsentGate>

<ConsentGate 
  requires={{ and: ["analytics", "marketing"] }} 
  fallback={<p>Consent required.</p>}
>
  <RetargetingPixel />
</ConsentGate>
```
```

--------------------------------

### Configure Privacy Policy in openpolicy.ts

Source: https://docs.openpolicy.sh/policies/privacy

Defines the structure for a privacy policy by specifying details such as effective date, data collected, legal basis, data retention periods, cookie preferences, third-party information, user rights, and applicable jurisdictions. This configuration serves as the source of truth for the generated policy.

```typescript
privacy: {
  effectiveDate: "2026-01-01",
  dataCollected: {
    "Account Information": ["Name", "Email address"],
    "Usage Data": ["Pages visited", "IP address"],
  },
  legalBasis: "Legitimate interests and consent",
  retention: {
    "Account data": "Until account deletion",
    "Usage logs": "90 days",
  },
  cookies: { essential: true, analytics: false, marketing: false },
  thirdParties: [],
  userRights: ["access", "erasure"],
  jurisdictions: ["us", "eu"],
}
```

--------------------------------

### Configure Cookie Policy in openpolicy.ts

Source: https://docs.openpolicy.sh/policies/cookies

Defines the cookie policy settings including effective date, enabled cookie categories, third-party services, and consent mechanism features. This configuration object is used by the OpenPolicy provider to generate the policy page.

```typescript
cookie: {
  effectiveDate: "2026-01-01",
  cookies: {
    essential: true,
    analytics: true,
    functional: false,
    marketing: false,
  },
  thirdParties: [
    {
      name: "Google Analytics",
      purpose: "Website analytics and performance monitoring",
      policyUrl: "https://policies.google.com/privacy",
    },
  ],
  consentMechanism: {
    hasBanner: true,
    hasPreferencePanel: true,
    canWithdraw: true,
  },
  jurisdictions: ["us", "eu"],
};
```

--------------------------------

### Conditional Rendering with ConsentGate Component

Source: https://docs.openpolicy.sh/cookies/hooks

The ConsentGate component conditionally renders its children only when the specified consent requirements are met. It supports complex expressions and custom fallback content.

```javascript
import { ConsentGate } from "@openpolicy/react";

<ConsentGate requires="analytics">
  <GoogleAnalytics />
</ConsentGate>

<ConsentGate requires={{ and: ["analytics", "marketing"] }} fallback={<p>Consent required.</p>}>
  <RetargetingPixel />
</ConsentGate>
```
Tokens:
Raw