Welcome

Quick Implementation

<body>
  <div id="form"></div>
</body>

const welcome = oneSdk.component("form", {
  name: "WELCOME",
  type: "manual",
});

welcome.mount("#form");

Event Handling

Available Events

Event Name	Triggered When
`form:welcome:loaded`	Screen is successfully mounted
`form:welcome:ready`	User clicks the continue button
`form:welcome:failed`	Screen encounters an error

Event Usage Example

// Listen for successful screen mount
welcome.on('form:welcome:loaded', () => {
  console.log('Welcome screen ready');
});

// Handle user clicking continue
welcome.on('form:welcome:ready', () => {
  // Load the next screen (e.g., consent form)
  consent.mount("#form");
});

// Handle errors
welcome.on('form:welcome:failed', (error) => {
  console.error('Welcome screen error:', error);
});

Screen Customization

Basic Example
Full Customization

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

// Initialize welcome screen component with form type
const welcome = oneSdk.component('form', {
  // Set screen name and type
  name: "WELCOME",
  type: "manual",
  title: { // Configure title section
    label: "Let's verify your identity",
    style: { 'ff-title': { 
      'font-family': 'Helvetica',
      'font-size': '24px'
    }}
  },
  descriptions: [ // Add descriptive text below title
    {
      label: 'Please have your documents ready',
      style: { 'ff-description': { color: '#4b5563' } }
    }
  ],
  instructions: { // Configure document requirements list
    content: [
      {
        label: "A valid passport OR",
        icon: './assets/bullet-point.svg'  // Bullet point icon for list items
      },
      {
        label: "An Australian driver's license", 
        icon: './assets/bullet-point.svg'
      }
    ],
    logo: { // Add logo to top of the page
      src: './assets/logo.png'
    },
    // Style instructions container
    style: {
      'ff-instructions': {
        'font-family': 'Helvetica',
        'margin-top': '20px'
      },
      'ff-logo': {
        'width': '50px',
      }
    }
  },

  // Configure the call-to-action button
  cta: {
    label: 'Begin Verification',
    style: {
      'ff-button': {
        backgroundColor: '#2563eb',
        padding: '12px 24px'
      }
    }
  }
});

Customization Options

Title Configuration

title: {
  label: "Custom Title",    // The heading text
  style: {                  // Optional styling
    'ff-title': {
      'font-family': 'Arial',
      'font-size': '24px',
      color: '#000000'
    }
  }
}

Descriptions

descriptions: [
  {
    label: 'First description line',
    style: { 'ff-description': {} }
  },
  {
    label: 'Second description line',
    style: { 'ff-description': {} }
  }
]

Instructions

instructions: {
  content: [
    {
      label: "Instruction item 1",
      icon: './assets/icon1.svg'
    },
    {
      label: "Instruction item 2",
      icon: './assets/icon2.svg'
    }
  ],
  style: {
    'ff-instructions': {
      'margin-top': '16px'
    }
  }
}

Button (CTA)

cta: {
  label: 'Continue',
  style: {
    'ff-button': {
      backgroundColor: '#2563eb',
      color: '#ffffff',
      borderRadius: '4px',
      padding: '12px 24px'
    }
  }
}

Logo

logo: {
  src: './assets/logo.png'
},
style: {
  'ff-logo': {
    'width': '50px'
  }
}

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

OneSDK

Smart UI (for deprecation)

Quick Implementation

Event Handling

Screen Customization

Customization Options

Styling Best Practices

UI Structure

​Quick Implementation

​Event Handling

​Screen Customization

​Customization Options

Styling Best Practices

​UI Structure

Quick Implementation

Event Handling

Screen Customization

Customization Options

UI Structure