Web Integration

On this page you'll find integration guides for web platforms. Use the tabs to pick your framework.

React

React Integration

Consent URL: https://consent.example.com/consent?cr_id=...&callback_url=http://localhost:3000/consent-callback

Basic Implementation

import { useState } from 'react';

export default function ConsentWidget() {
  const openConsent = () => {
    const consentUrl = 'https://consent.example.com/consent?cr_id=...&callback_url=' + 
      encodeURIComponent(window.location.origin + '/consent-callback');
    window.open(consentUrl, 'consentWindow', 'width=500,height=600');
  };

  return (
    <button 
      onClick={openConsent}
      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
    >
      Manage Consent
    </button>
  );
}

Handling Callback Response

Listen for callback messages from the consent window:

import { useEffect, useState } from 'react';

export default function ConsentPage() {
  const [consentStatus, setConsentStatus] = useState(null);

  useEffect(() => {
    const handleMessage = (event) => {
      if (event.origin !== 'https://consent.example.com') return;
      
      const { status, receiptId, crId } = event.data;
      
      if (status && receiptId && crId) {
        setConsentStatus({ status, receiptId, crId });
        console.log('Consent completed:', { status, receiptId, crId });
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <div>
      {consentStatus && (
        <div className="p-4 bg-green-100 text-green-700 rounded">
          Consent Status: {consentStatus.status}
        </div>
      )}
    </div>
  );
}

Vue

Vue Integration

Consent URL: https://consent.example.com/consent?cr_id=...&callback_url=http://localhost:3000/consent-callback

Basic Implementation

<template>
  <button 
    @click="openConsent"
    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
  >
    Manage Consent
  </button>
</template>

<script>
export default {
  methods: {
    openConsent() {
      const consentUrl = 'https://consent.example.com/consent?cr_id=...&callback_url=' + 
        encodeURIComponent(window.location.origin + '/consent-callback');
      window.open(consentUrl, 'consentWindow', 'width=500,height=600');
    }
  }
}
</script>

Handling Callback Response

Create a composable for handling consent messages:

<template>
  <div>
    <button @click="openConsent" class="px-4 py-2 bg-blue-600 text-white rounded">
      Manage Consent
    </button>
    <div v-if="consentStatus" class="p-4 bg-green-100 text-green-700 rounded">
      Consent Status: {{ consentStatus.status }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const consentStatus = ref(null);

    const handleMessage = (event) => {
      if (event.origin !== 'https://consent.example.com') return;
      
      const { status, receiptId, crId } = event.data;
      if (status && receiptId && crId) {
        consentStatus.value = { status, receiptId, crId };
        console.log('Consent completed:', { status, receiptId, crId });
      }
    };

    const openConsent = () => {
      const consentUrl = 'https://consent.example.com/consent?cr_id=...&callback_url=' + 
        encodeURIComponent(window.location.origin + '/consent-callback');
      window.open(consentUrl, 'consentWindow', 'width=500,height=600');
    };

    onMounted(() => {
      window.addEventListener('message', handleMessage);
    });

    return { consentStatus, openConsent };
  }
}
</script>

Angular

Angular Integration

Consent URL: https://consent.example.com/consent?cr_id=...&callback_url=http://localhost:4200/consent-callback

Basic Implementation

import { Component } from '@angular/core';

@Component({
  selector: 'app-consent-widget',
  template: `
    <button 
      (click)="openConsent()"
      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
    >
      Manage Consent
    </button>
  `
})
export class ConsentWidgetComponent {
  openConsent() {
    const consentUrl = 'https://consent.example.com/consent?cr_id=...&callback_url=' + 
      encodeURIComponent(window.location.origin + '/consent-callback');
    window.open(consentUrl, 'consentWindow', 'width=500,height=600');
  }
}

Handling Callback Response

Create a service to handle consent messages:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ConsentService {
  consentStatus$ = new Subject<any>();

  constructor() {
    window.addEventListener('message', (event) => {
      if (event.origin !== 'https://consent.example.com') return;
      
      const { status, receiptId, crId } = event.data;
      if (status && receiptId && crId) {
        this.consentStatus$.next({ status, receiptId, crId });
        console.log('Consent completed:', { status, receiptId, crId });
      }
    });
  }

  openConsent() {
    const consentUrl = 'https://consent.example.com/consent?cr_id=...&callback_url=' + 
      encodeURIComponent(window.location.origin + '/consent-callback');
    window.open(consentUrl, 'consentWindow', 'width=500,height=600');
  }
}

Use in component:

import { Component } from '@angular/core';
import { ConsentService } from './consent.service';

@Component({
  selector: 'app-consent-page',
  template: `
    <button (click)="service.openConsent()" class="px-4 py-2 bg-blue-600 text-white rounded">
      Manage Consent
    </button>
    <div *ngIf="(service.consentStatus$ | async) as status" 
         class="p-4 bg-green-100 text-green-700 rounded">
      Consent Status: {{ status.status }}
    </div>
  `
})
export class ConsentPageComponent {
  constructor(public service: ConsentService) {}
}

Next.js

Next.js Integration

Consent URL: https://consent.example.com/consent?cr_id=...&callback_url=http://localhost:3000/consent-callback

Basic Implementation

'use client';

import { useState } from 'react';

export default function ConsentWidget() {
  const openConsent = () => {
    const consentUrl = 'https://consent.example.com/consent?cr_id=...&callback_url=' + 
      encodeURIComponent(window.location.origin + '/consent-callback');
    window.open(consentUrl, 'consentWindow', 'width=500,height=600');
  };

  return (
    <button 
      onClick={openConsent}
      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
    >
      Manage Consent
    </button>
  );
}

Handling Callback Response

Create a hook for consent handling:

'use client';

import { useEffect, useState } from 'react';

export function useConsent() {
  const [consentStatus, setConsentStatus] = useState(null);

  useEffect(() => {
    const handleMessage = (event) => {
      if (event.origin !== 'https://consent.example.com') return;
      
      const { status, receiptId, crId } = event.data;
      if (status && receiptId && crId) {
        setConsentStatus({ status, receiptId, crId });
        console.log('Consent completed:', { status, receiptId, crId });
      }
    };

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return consentStatus;
}

Use in app:

'use client';

import { useConsent } from '@/hooks/useConsent';

export default function ConsentPage() {
  const consentStatus = useConsent();

  return (
    <div>
      {consentStatus && (
        <div className="p-4 bg-green-100 text-green-700 rounded">
          Consent Status: {consentStatus.status}
        </div>
      )}
    </div>
  );
}

Nuxt

Nuxt Integration

Consent URL: https://consent.example.com/consent?cr_id=...&callback_url=http://localhost:3000/consent-callback

Basic Implementation

<template>
  <button 
    @click="openConsent"
    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
  >
    Manage Consent
  </button>
</template>

<script setup>
const openConsent = () => {
  const consentUrl = 'https://consent.example.com/consent?cr_id=...&callback_url=' + 
    encodeURIComponent(window.location.origin + '/consent-callback');
  window.open(consentUrl, 'consentWindow', 'width=500,height=600');
};
</script>

Handling Callback Response

Create a composable for consent handling:

export const useConsent = () => {
  const consentStatus = ref(null);

  const handleMessage = (event) => {
    if (event.origin !== 'https://consent.example.com') return;
    
    const { status, receiptId, crId } = event.data;
    if (status && receiptId && crId) {
      consentStatus.value = { status, receiptId, crId };
      console.log('Consent completed:', { status, receiptId, crId });
    }
  };

  onMounted(() => {
    window.addEventListener('message', handleMessage);
  });

  onUnmounted(() => {
    window.removeEventListener('message', handleMessage);
  });

  return { consentStatus };
};

Use in component:

<template>
  <div>
    <button @click="openConsent" class="px-4 py-2 bg-blue-600 text-white rounded">
      Manage Consent
    </button>
    <div v-if="consentStatus" class="p-4 bg-green-100 text-green-700 rounded">
      Consent Status: {{ consentStatus.status }}
    </div>
  </div>
</template>

<script setup>
import { useConsent } from '@/composables/useConsent';

const { consentStatus } = useConsent();

const openConsent = () => {
  const consentUrl = 'https://consent.example.com/consent?cr_id=...&callback_url=' + 
    encodeURIComponent(window.location.origin + '/consent-callback');
  window.open(consentUrl, 'consentWindow', 'width=500,height=600');
};
</script>

Svelte

Svelte Integration

Consent URL: https://consent.example.com/consent?cr_id=...&callback_url=http://localhost:5173/consent-callback

Basic Implementation

<script>
  let consentStatus = null;

  function openConsent() {
    const consentUrl = 'https://consent.example.com/consent?cr_id=...&callback_url=' + 
      encodeURIComponent(window.location.origin + '/consent-callback');
    window.open(consentUrl, 'consentWindow', 'width=500,height=600');
  }

  function handleMessage(event) {
    if (event.origin !== 'https://consent.example.com') return;
    
    const { status, receiptId, crId } = event.data;
    if (status && receiptId && crId) {
      consentStatus = { status, receiptId, crId };
      console.log('Consent completed:', { status, receiptId, crId });
    }
  }

  onMount(() => {
    window.addEventListener('message', handleMessage);
  });

  onDestroy(() => {
    window.removeEventListener('message', handleMessage);
  });
</script>

<button 
  on:click={openConsent}
  class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
>
  Manage Consent
</button>

{#if consentStatus}
  <div class="p-4 bg-green-100 text-green-700 rounded">
    Consent Status: {consentStatus.status}
  </div>
{/if}

<style>
  :global(body) {
    font-family: sans-serif;
  }
</style>

## Handling Callback Response