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'  
    }  
  }  
}