Checkbox de Consentimiento

<form id="contact-form">
  <input type="text" id="nombre" name="nombre" required />
  <input type="email" id="email" name="email" required />
 
  <!-- Checkbox de consentimiento DPOLab -->
  <div id="dpolab-consent"></div>
 
  <button type="submit" id="submit-btn">Enviar</button>
</form>
 
<script src="https://api.dpolab.com/sdk/cmp-sdk.js"></script>
<script>
  // Inicializar SDK (requerido una vez por pagina)
  DPOLab.init({
    widgetKey: 'WIDGET_KEY_DEL_BANNER_COOKIES',
    apiUrl: 'https://api.dpolab.com',
  });
 
  // Renderizar checkbox de consentimiento
  DPOLab.renderConsentCheckbox({
    widgetKey: 'WIDGET_KEY_DE_LA_PLANTILLA',
    purpose: 'privacy_policy',
    label: 'He leido y acepto la',
    linkText: 'Politica de Privacidad',
    linkUrl: '/privacidad',
    required: true,
    submitButtonId: 'submit-btn',
    emailFieldId: 'email',
  }, 'dpolab-consent');
</script>

DPOLab.renderConsentCheckbox({
  // ── Identificacion ──
  widgetKey: 'abc-123-xyz',         // Opcional — widgetKey de la plantilla. Si no se pasa, usa el de init()
  purpose: 'privacy_policy',        // Requerido — slug del proposito definido en la plantilla
 
  // ── Texto del checkbox ──
  label: 'He leido y acepto la',    // Texto principal del checkbox
  linkText: 'Politica de Privacidad', // Texto que se renderiza como hipervinculo despues del label
  linkUrl: '/privacidad',           // URL del hipervinculo. Si linkText esta vacio, no se muestra link
 
  // ── Comportamiento ──
  required: true,                   // Si es obligatorio aceptar para enviar el formulario
  submitButtonId: 'submit-btn',     // ID del boton submit — se deshabilita hasta que se acepte
  emailFieldId: 'email',            // ID del campo email — captura el email del titular (IDV nivel 1+)
 
  // ── Verificacion de identidad (IDV) ──
  idvLevel: 1,                      // Nivel de verificacion (ver tabla abajo). Si no se pasa, se lee de la plantilla
 
  // ── Cuando grabar el consentimiento ──
  recordOn: 'submit',               // 'submit' (default) | 'change'. Ver seccion abajo.
 
  // ── Apariencia ──
  showBranding: true,               // Muestra "Protegido por DPOLab" debajo del checkbox
 
  // ── Callback ──
  onChange: function(checked) {     // Se ejecuta cada vez que el checkbox cambia de estado
    console.log('Consent:', checked);
  }
}, 'id-del-contenedor');            // ID del div donde se renderiza el checkbox

// Con link:
label: 'Acepto el tratamiento de mis datos conforme a la',
linkText: 'Politica de Privacidad',
linkUrl: '/privacidad',
// Renderiza: "Acepto el tratamiento de mis datos conforme a la [Politica de Privacidad]"
 
// Sin link:
label: 'Deseo recibir comunicaciones sobre ciberseguridad (opcional)',
// linkText no se pasa o se pasa vacio
// Renderiza: "Deseo recibir comunicaciones sobre ciberseguridad (opcional)"

DPOLab.renderConsentCheckbox({
  purpose: 'privacy_policy',
  required: true,
  submitButtonId: 'submit-btn',  // El boton con este ID se deshabilita
}, 'dpolab-consent');

// IDV nivel 1: captura email del formulario
DPOLab.renderConsentCheckbox({
  purpose: 'privacy_policy',
  required: true,
  idvLevel: 1,                    // Captura email
  emailFieldId: 'email',          // Lee del campo con id="email"
  submitButtonId: 'submit-btn',
}, 'dpolab-consent');

<!-- Privacidad (requerido) -->
<div id="dpolab-consent"></div>
 
<!-- Comunicaciones (opcional) -->
<div id="dpolab-marketing"></div>
 
<script>
  DPOLab.init({
    widgetKey: 'WIDGET_COOKIES',
    apiUrl: 'https://api.dpolab.com',
  });
 
  // Checkbox 1: Politica de privacidad — requerido, bloquea submit
  DPOLab.renderConsentCheckbox({
    widgetKey: 'WIDGET_PRIVACIDAD',
    purpose: 'privacy_policy',
    label: 'Acepto el tratamiento de mis datos conforme a la',
    linkText: 'Politica de Privacidad',
    linkUrl: '/privacidad',
    required: true,
    submitButtonId: 'submit-btn',
    emailFieldId: 'email',
  }, 'dpolab-consent');
 
  // Checkbox 2: Comunicaciones — opcional, sin link, sin branding duplicado
  DPOLab.renderConsentCheckbox({
    widgetKey: 'WIDGET_COMUNICACIONES',
    purpose: 'comunicaciones',
    label: 'Deseo recibir comunicaciones sobre ciberseguridad y proteccion de datos (opcional)',
    required: false,
    emailFieldId: 'email',
    showBranding: false,
  }, 'dpolab-marketing');
</script>

document.getElementById('contact-form').addEventListener('submit', async function(e) {
  e.preventDefault();
 
  // 1. Validar que el checkbox este marcado (muestra error visual si no)
  if (!DPOLab.validateConsent('privacy_policy')) return;
 
  // 2. Grabar el consentimiento ANTES de enviar tu form al backend.
  //    Lee el email del campo configurado en `emailFieldId` (IDV nivel 1+).
  //    Retorna false si falta el email obligatorio, si el checkbox no esta
  //    marcado o si el endpoint del backend falla.
  const recorded = await DPOLab.recordConsent('privacy_policy');
  if (!recorded) return;
 
  // 3. Enviar tu formulario normalmente
  fetch('/api/contact', {
    method: 'POST',
    body: new FormData(document.getElementById('contact-form')),
  });
});

DPOLab.renderConsentCheckbox({
  purpose: 'privacy_policy',
  recordOn: 'change',  // Opt-in legacy
  ...
}, 'dpolab-consent');