Welcome

1
// Listen for successful screen mount
2
welcome.on('form:welcome:loaded', () => {
3
  console.log('Welcome screen ready');
4
});
5
6
// Handle user clicking continue
7
welcome.on('form:welcome:ready', () => {
8
  // Load the next screen (e.g., consent form)
9
  consent.mount("#form");
10
});
11
12
// Handle errors
13
welcome.on('form:welcome:failed', (error) => {
14
  console.error('Welcome screen error:', error);
15
});

1
title: {
2
  label: "Custom Title",    // The heading text
3
  style: {                  // Optional styling
4
    'ff-title': {
5
      'font-family': 'Arial',
6
      'font-size': '24px',
7
      color: '#000000'
8
    }
9
  }
10
}

1
descriptions: [
2
  {
3
    label: 'First description line',
4
    style: { 'ff-description': {} }
5
  },
6
  {
7
    label: 'Second description line',
8
    style: { 'ff-description': {} }
9
  }
10
]

1
instructions: {
2
  content: [
3
    {
4
      label: "Instruction item 1",
5
      icon: './assets/icon1.svg'
6
    },
7
    {
8
      label: "Instruction item 2",
9
      icon: './assets/icon2.svg'
10
    }
11
  ],
12
  style: {
13
    'ff-instructions': {
14
      'margin-top': '16px'
15
    }
16
  }
17
}

1
cta: {
2
  label: 'Continue',
3
  style: {
4
    'ff-button': {
5
      backgroundColor: '#2563eb',
6
      color: '#ffffff',
7
      borderRadius: '4px',
8
      padding: '12px 24px'
9
    }
10
  }
11
}

1
logo: {
2
  src: './assets/logo.png'
3
},
4
style: {
5
  'ff-logo': {
6
    'width': '50px'
7
  }
8
}