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.

Esta página documenta opciones de inicialización del SDK. Configuraciones backend de empresa, como privacy_center.allow_required_consent_revocation, se administran fuera del widget y afectan el comportamiento visible en el Privacy Center.

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.
• appearance.config.showConsentManagementHeader: boolean. Muestra u oculta el encabezado de la sección de gestión de consentimientos.
• content.header.title: string. Sobrescribe el título del encabezado.
• content.header.description: string. Sobrescribe la descripción del encabezado.
• content.consentManagement.header.title: string. Sobrescribe el título del encabezado en gestión de consentimientos.
• content.consentManagement.header.description: string. Sobrescribe la descripción del encabezado en gestión de consentimientos.
• 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).
• consentManagement.scopeGroups: array opcional para definir grupos personalizados en los acordeones.
  • Estructura por grupo: { title: string, scopes: [{ scopeType: 'product' | 'branch', scopeId: string }] }.
• consentManagement.allowMultipleOpenScopeGroups: boolean (por defecto true). Requiere groupConsentsByScope: true. Si lo defines como false, abrir un acordeón cierra el resto.

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.
• Si defines consentManagement.scopeGroups, los alcances incluidos en esos grupos se renderizan bajo los títulos personalizados y el resto mantiene el agrupado por alcance por defecto.

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.'
    },
    consentManagement: {
      header: {
        title: 'Gestiona tus permisos',
        description: 'Configura qué autorizaciones quieres mantener activas.'
      }
    },
    rightExamples: {
      access: 'Ejemplo: Quiero conocer qué datos tienen sobre mí.'
    }
  },
  consentMode: 'batch',
  showBatchConsentConfirmation: true,
  consentRetentionPeriod: '30 days',
  allowGranularScopeSelection: true,
  groupConsentsByScope: true,
  consentManagement: {
    allowMultipleOpenScopeGroups: false,
    scopeGroups: [
      {
        title: 'Productos financieros',
        scopes: [
          { scopeType: 'product', scopeId: 'prod_checking_account' },
          { scopeType: 'product', scopeId: 'prod_credit_card' }
        ]
      }
    ]
  },
  appearance: {
    config: {
      showHeader: true,
      showConsentManagementHeader: true
    }
  }
};

Personalización visual (Appearance)

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

Los ejemplos de esta sección están alineados con @soyio/soyio-widget v3+ y @soyio/soyio-rn-sdk v5+.

• Usa theme + mode como modelo principal.
• theme: 'night' sigue funcionando por compatibilidad, pero se considera deprecado.

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',
    mode: 'auto',
    variables: {
      // Colores principales
      colorPrimary: '#f54c27',
      colorSecondary: '#f54c27',
      colorBackground: '#0f172a',
      colorText: '#f8fafc',
      colorTextSecondary: '#cbd5e1',

      // Tipografía
      fontFamily: 'system-ui, sans-serif',
      fontFamilyTitle: 'Manrope, system-ui, sans-serif',

      // Bordes
      borderRadius: '8px',
      borderWidth: '1px',
      borderStyle: 'solid',
    },
    rules: {
      '.Card': {
        boxShadow: '0 12px 24px rgba(15, 23, 42, 0.14)',
      },
      '.DialogContent': {
        boxShadow: '0 18px 48px rgba(15, 23, 42, 0.24)',
      },
      '.CardTitle': {
        letterSpacing: 'inherit',
        textTransform: 'none',
      },
    },
    config: {
      showHeader: true,
      showConsentManagementHeader: true,
      consentControl: 'checkbox',
      mainPageColumns: 2,
      consentManagementColumns: 2,
      brandTheme: 'dark',
      icon: {
        dataUseVariant: 'duotone',
      }
    }
  }
};

Si necesitas sombras (box-shadow), configúralas con appearance.rules. No existe una variable global shadow.

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.

Errores de integración frecuentes

Cuando la configuración del Privacy Center es inválida, el componente muestra mensajes de ayuda orientados a la integración. Los más comunes son:

• Inicialización inválida: debes usar companyId o sessionToken, pero no ambos.
• companyId inválido: el identificador debe ser un token de compañía válido.
• Configuración REDEC incompleta: si habilitas redec en enabledRights, debes enviar redecOperationIds.

Consulta también:

• Obtén un token de sesión para el centro de privacidad
• Actualiza la configuración del Privacy Center