Welcome

The Welcome screen serves as the entry point of your onboarding flow, providing users with essential information and instructions before they begin the verification process.

Quick Implementation

1<body>
2  <div id="form"></div>
3</body>

Event Handling

Event NameTriggered When
form:welcome:loadedScreen is successfully mounted
form:welcome:readyUser clicks the continue button
form:welcome:failedScreen encounters an error
1// Listen for successful screen mount
2welcome.on('form:welcome:loaded', () => {
3  console.log('Welcome screen ready');
4});
5
6// Handle user clicking continue
7welcome.on('form:welcome:ready', () => {
8  // Load the next screen (e.g., consent form)
9  consent.mount("#form");
10});
11
12// Handle errors
13welcome.on('form:welcome:failed', (error) => {
14  console.error('Welcome screen error:', error);
15});

Screen Customization

1const welcome = oneSdk.component('form', {
2  name: "WELCOME", // Set the screen name identifier
3  type: "manual",  // Set form type to manual input
4  title: { // Configure the title section
5    label: "Let's Get Started!",
6    style: { 'ff-title': { color: '#2563eb' } } // Style title color
7  },
8  cta: { // Configure the call-to-action button
9    label: "Continue",
10    style: { 'ff-button': { backgroundColor: '#2563eb' } } // button bg color
11  }
12});

Customization Options

1title: {
2  label: "Custom Title",    // The heading text
3  style: {                  // Optional styling
4    'ff-title': {
5      'font-family': 'Arial',
6      'font-size': '24px',
7      color: '#000000'
8    }
9  }
10}
1descriptions: [
2  {
3    label: 'First description line',
4    style: { 'ff-description': {} }
5  },
6  {
7    label: 'Second description line',
8    style: { 'ff-description': {} }
9  }
10]
1instructions: {
2  content: [
3    {
4      label: "Instruction item 1",
5      icon: './assets/icon1.svg'
6    },
7    {
8      label: "Instruction item 2",
9      icon: './assets/icon2.svg'
10    }
11  ],
12  style: {
13    'ff-instructions': {
14      'margin-top': '16px'
15    }
16  }
17}
1cta: {
2  label: 'Continue',
3  style: {
4    'ff-button': {
5      backgroundColor: '#2563eb',
6      color: '#ffffff',
7      borderRadius: '4px',
8      padding: '12px 24px'
9    }
10  }
11}
Styling Best Practices
  • Use consistent colors and fonts across your implementation
  • Ensure sufficient contrast for accessibility
  • Maintain padding and spacing for readability
  • Test your customizations across different screen sizes

All styling should be applied through the appropriate style objects (ff-title, ff-description, ff-instructions, ff-button). Direct CSS manipulation isn’t recommended.

UI Structure

Welcome Screen Layout
Welcome Screen Components
Built with