Skip to main content

​
Quick Implementation

1

Create HTML Container

index.html
<div id="form"></div>
2

Initialize Component

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

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

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' } }
  }
});

​
Customizable Elements

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

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

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" }
]
}

cta: {
  label: 'Continue',
  style: {
    'ff-button': {
      backgroundColor: '#27AE60',
      color: 'white',
      padding: '12px 24px',
      borderRadius: '4px'
    }
  }
}
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.