Start

The Start screen shows the logo of your organization.
Start screen

Quick Implementation

1<body>
2 <div id="form"></div>
3</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
1// Listen for successful screen mount
2start.on('form:start:loaded', () => {
3 console.log('Start screen ready');
4});
5
6// Handle user clicking start
7start.on('form:start:ready', () => {
8 // Load the next screen (e.g., consent form)
9 consent.mount("#form");
10});
11
12// Handle errors
13start.on('form:start:failed', (error) => {
14 console.error('Start screen error:', error);
15});

Screen Customization

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

Customization Options

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}