Skip to main content
The Consent screen is a crucial component that handles user privacy acknowledgment and data collection permissions. It displays your organization’s privacy policy and captures user consent before proceeding with onboarding.

​
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"  
});  

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: {  
  label: "User Agreement",  
  style: { 'ff-instructions': { /* styles */ } },  
  content: [  
    { label: "I agree to the terms and conditions" },  
    { 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.