Skip to main content
Start screen

​
Quick Implementation

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

​
Event Handling

Event NameTriggered When
form:start:loadedScreen is successfully mounted
form:start:readyUser clicks the start button
form:start:failedScreen encounters an error
// Listen for successful screen mount
start.on('form:start:loaded', () => {
  console.log('Start screen ready');
});

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

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

​
Screen Customization

const start = oneSdk.component('form', {
  name: "START", // Set the screen name identifier
  type: "manual",  // Set form type to manual input
  logo: { // Configure the title section
    src: "./assets/logo.png"
  },
});

​
Customization Options

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