Consent

Quick Implementation

Create HTML Container

index.html

<div id="form"></div>

Initialize Component

consent.js

const consent = oneSdk.component('form', {
  name: "CONSENT",
  type: "manual"
});

Mount Component

consent.mount("#form");

Event Handling

Loading Event (form:consent:loaded`)

Screen mounted successfully

consent.on('form:consent:loaded', () => {
  console.log('Consent screen mounted successfully');
});

Interaction Event (form:consent:ready)

User provided consent

consent.on('form:consent:ready', () => {
  // User has provided consent - proceed to next step
  personal.mount("#form");
});

Error Handling (form:consent:failed)

Screen failed to load

consent.on('form:consent:failed', (error) => {
  console.error('Consent screen failed:', error);
  // Implement your error handling logic
});

Customization Options

Basic Configuration
Advanced Configuration

const consent = oneSdk.component('form', {
  name: "CONSENT",
  type: "manual",
  title: {
    label: "Your consent matters to us",
    style: { 'ff-title': { color: '#2C3E50' } }
  },
  cta: {
    label: 'I Agree',
    style: { 'ff-button': { backgroundColor: '#27AE60' } }
  }
});

const consent = oneSdk.component('form', {
  name: "CONSENT",
  type: "manual",
  title: {
    label: "Your consent matters to us",
    style: { 'ff-title': { /* custom styles */ } }
  },
  descriptions: [
    { 
      label: 'We collect your data to verify your identity',
      style: { 'ff-description': { fontSize: '16px' } }
    },
    { 
      label: 'Your information is protected by our privacy policy',
      style: { 'ff-description': { fontSize: '16px' } }
    }
  ],
  checkbox: {
    label: "Consent Acknowledgment",
    content: [
      { label: "I have read and agree to the privacy policy" },
      { label: "I consent to the collection of my personal information" }
    ]
  },
  cta: {
    label: 'Continue',
    style: { 'ff-button': { /* custom styles */ } }
  },
  logo: {
    src: './assets/logo.png' // path to your logo
  },
  style: {
    'ff-logo': {
      'width': '50px'
    }
  }
});

Customizable Elements

Title Customization

title: {
  label: "Your consent matters to us",
  style: {
    'ff-title': {
      fontSize: '24px',
      fontWeight: 'bold',
      color: '#2C3E50'
    }
  }
}

Description Configuration

descriptions: [
  {
    label: 'We need to collect your data for verification',
    style: {
      'ff-description': {
        marginBottom: '1rem',
        lineHeight: '1.5'
      }
    }
  }
]

Checkbox Options

checkbox: {
style: { 'ff-checkbox': { /* style for container of checkbox*/ } },
content: [
{ label: "I agree to the terms and conditions", style: {
  'ff-checkbox-item': { /* style for this particular content checkbox row */ },
  'ff-checkbox-input': { /* style for this particular input element of the checkbox */}
} },
{ label: "I consent to data collection" }
]
}

Button Styling

cta: {
  label: 'Continue',
  style: {
    'ff-button': {
      backgroundColor: '#27AE60',
      color: 'white',
      padding: '12px 24px',
      borderRadius: '4px'
    }
  }
}

Logo

logo: {
  src: './assets/logo.png'
},
style: {
  'ff-logo': {
    'width': '50px'
  }
}

Best Practices

Always maintain clear and concise consent language
Ensure checkbox labels accurately reflect what users are agreeing to
Consider implementing multiple language support for international users
Test the consent flow thoroughly in your development environment

Remember to comply with relevant privacy regulations (GDPR, CCPA, etc.) when customizing consent text and checkboxes.

OneSDK

Smart UI (for deprecation)

Quick Implementation

Event Handling

Loading Event (form:consent:loaded`)

Interaction Event (form:consent:ready)

Error Handling (form:consent:failed)

Customization Options

Customizable Elements

Best Practices

​Quick Implementation

​Event Handling

Loading Event (form:consent:loaded`)

Interaction Event (form:consent:ready)

Error Handling (form:consent:failed)

​Customization Options

​Customizable Elements

Best Practices

Quick Implementation

Event Handling

Customization Options

Customizable Elements