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

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