Consent

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
1<div id="form"></div>
2

Initialize Component

consent.js
1const consent = oneSdk.component('form', {
2  name: "CONSENT",
3  type: "manual"
4});
5
6### Mount Component
7consent.mount("#form");

Event Handling

Loading Event (form:consent:loaded`)

Screen mounted successfully

1consent.on('form:consent:loaded', () => {
2  console.log('Consent screen mounted successfully');
3});
Interaction Event (form:consent:ready)

User provided consent

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

Screen failed to load

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

Customization Options

1const consent = oneSdk.component('form', {
2  name: "CONSENT",
3  type: "manual",
4  title: {
5    label: "Your consent matters to us",
6    style: { 'ff-title': { color: '#2C3E50' } }
7  },
8  cta: {
9    label: 'I Agree',
10    style: { 'ff-button': { backgroundColor: '#27AE60' } }
11  }
12});

Customizable Elements

1title: {
2  label: "Your consent matters to us",
3  style: {
4    'ff-title': {
5      fontSize: '24px',
6      fontWeight: 'bold',
7      color: '#2C3E50'
8    }
9  }
10}
1descriptions: [
2  {
3    label: 'We need to collect your data for verification',
4    style: {
5      'ff-description': {
6        marginBottom: '1rem',
7        lineHeight: '1.5'
8      }
9    }
10  }
11]
1checkbox: {
2  label: "User Agreement",
3  style: { 'ff-instructions': { /* styles */ } },
4  content: [
5    { label: "I agree to the terms and conditions" },
6    { label: "I consent to data collection" }
7  ]
8}
1cta: {
2  label: 'Continue',
3  style: {
4    'ff-button': {
5      backgroundColor: '#27AE60',
6      color: 'white',
7      padding: '12px 24px',
8      borderRadius: '4px'
9    }
10  }
11}
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.

Built with