Next.js Integration

Consent URL: https://www.indiaconsent.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 = CONSENT_URL + '?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 !== CONSENT_BASE_URL) 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>
  );
}