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

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

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