Saltar al contenido principal

Apariencia y comportamiento

Apariencia y comportamiento

Al igual que los otros componentes de Soyio, el Privacy Center se puede personalizar tanto en su aspecto visual como en su comportamiento funcional.

Configuración de comportamiento​

El Privacy Center ofrece opciones avanzadas para adaptar su funcionamiento a tus necesidades de negocio. Estas opciones se configuran directamente en el objeto de opciones del widget.

Controles de consentimiento​

Define qué tipo de control visual utilizar para la gestión de consentimientos.

  • consentControl: 'switch' (por defecto) | 'checkbox'

Encabezado y textos personalizados​

Permite controlar la visibilidad del encabezado del Privacy Center y personalizar los textos mostrados para solicitudes ARSOP/REDEC.

  • appearance.config.showHeader: boolean. Muestra u oculta el encabezado principal del componente.
  • content.header.title: string. Sobrescribe el título del encabezado.
  • content.header.description: string. Sobrescribe la descripción del encabezado.
  • content.rightExamples: object. Sobrescribe ejemplos de derechos por tipo de solicitud.
    • Claves soportadas: access, opposition, rectification, suppression, portability, redec_update, redec_rectification, redec_complementation, redec_cancellation.

Modo de operación de consentimiento (modo batch)​

Permite agrupar múltiples cambios de consentimiento y guardarlos en una sola acción.

  • consentMode: 'immediate' (por defecto) | 'batch'
  • showBatchConsentConfirmation: boolean. Muestra un diálogo de confirmación antes de guardar en modo batch.

Selección granular de alcance​

Permite que el usuario seleccione o deseleccione alcances específicos dentro de un mismo consentimiento cuando la plantilla tiene múltiples alcances (scopes).

  • allowGranularScopeSelection: boolean (por defecto false).

Cuando esta opción está habilitada:

  • El detalle del consentimiento muestra una casilla de verificación por alcance (producto/sucursal).
  • La casilla principal refleja estado parcial cuando hay solo algunos alcances seleccionados.
  • Si la plantilla no tiene múltiples alcances, el comportamiento visual se mantiene igual.

Visualización agrupada por alcance​

Muestra los consentimientos agrupados por alcance (producto/sucursal) para que el usuario navegue más fácil cuando existen múltiples templates.

  • groupConsentsByScope: boolean (por defecto false).

Cuando esta opción está habilitada:

  • Los consentimientos con alcance se muestran en acordeones por alcance.
  • Los consentimientos sin alcance se muestran en un grupo general.
  • Puedes combinarla con allowGranularScopeSelection para agrupar y, al mismo tiempo, permitir selección por alcance dentro de cada consentimiento.

Periodo de retención​

Establece un tiempo mínimo durante el cual un consentimiento otorgado no puede ser revocado.

  • consentRetentionPeriod: string (e.g. '30 days', '1 week'). Unidades soportadas: day, week, month, year.
const privacyCenterOptions = {
  // ...
  consentControl: 'checkbox',
  content: {
    header: {
      title: 'Centro de privacidad',
      description: 'Gestiona tus solicitudes y preferencias de consentimiento.'
    },
    rightExamples: {
      access: 'Ejemplo: Quiero conocer qué datos tienen sobre mí.'
    }
  },
  consentMode: 'batch',
  showBatchConsentConfirmation: true,
  consentRetentionPeriod: '30 days',
  allowGranularScopeSelection: true,
  groupConsentsByScope: true,
  appearance: {
    config: {
      showHeader: true
    }
  }
};

Personalización visual (Appearance)​

El parámetro appearance permite configurar detalladamente el aspecto visual del componente.

Variables de personalización​

Personaliza la apariencia del Privacy Center usando variables CSS:

Personalización avanzada
const privacyCenterOptions = {
  // ... configuración básica
  appearance: {
    theme: 'soyio',
    variables: {
      // Colores principales
      colorPrimary: '#f54c27',
      colorSecondary: '#f54c27',
      colorBackground: '#ffffff',
      colorText: '#1A1F36',

      // Tipografía
      fontFamily: 'system-ui, sans-serif',
      fontSize: '14px',

      // Bordes y espaciado
      borderRadius: '8px',
      borderWidth: '1px',
      spacing: '16px',

      // Sombras
      shadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
    },
    rules: {
      '.DataSubjectRequestForm': {
        backgroundColor: 'var(--colorBackground)',
        border: '1px solid #e0e0e0',
        borderRadius: 'var(--borderRadius)'
      },
      '.ConsentManagement': {
        padding: 'var(--spacing)'
      }
    }
  }
};

Para obtener más información sobre las variables y reglas de personalización, consulta nuestra guía de personalización de apariencia. Para detalles técnicos adicionales, revisa la documentación oficial del SDK web de Soyio.

Asegúrate de mantener los elementos de accesibilidad como el contraste adecuado y el tamaño de fuente legible al personalizar el componente.