Consent
Description
The Consent screen details the purpose and use of the personal information being collected. It provides a link to the Privacy Policy of the organisation. It also contains the option to confirm consent and proceed with the onboarding process.
Default Consent screen
Configuration
Use the following table to learn more about configuration options for the Consent screen.
Attribute | Description | Usage |
---|---|---|
name | The name of the screen you want to load | name: "CONSENT" |
type | The type of flow to be used. In this use case, it needs to be ocr . | type: "ocr" |
title | Title of the page. The default is "Your consent matters". | title: {label: "<Your_TITLE>", style: {'ff-title': {}}} |
label | The text to be displayed in the title | |
style | The styling of the title for this specific page that overrides the general styling | |
descriptions[] | An array of labels/texts for the consent notice and guidelines to be displayed on the page. | descriptions: [{label: "", style: {}}, {label: "", style: {}}] |
label | The text to be displayed | |
style | The styling for this specific label that overrides the general styling | ff-description |
checkbox | The checkbox information to be displayed on the bottom of the page. | |
style | The styling of the checkbox for this specific page | ff-checkbox |
content[] | An array of texts, describing the action to be taken when the call-to-action (CTA) button is selected. The default is: "I have read and agree to the above disclosure." | content: [{label: }, {label: }]\ |
label | The label to be displayed in front of each checkbox | |
cta | The button. | cta: {label: "", style: {'ff-button':{backgroundColor: "red"}}} |
label | The text to be displayed on the button. By default, this is: "Continue" | |
style | ff-button |
Sample code
const form_welcome = oneSdk.component("form", {
name: "CONSENT",
type: "ocr",
descriptions: [
{ label: 'This is a sample dynamic page.', style: {} },
{ label: 'It can contain multiple paragraphs.', style: {} },
],
checkBox: {
style:
},
cta: {lable: "Next", style: {'ff-button':{backgroundColor: "green"}}}
});
Events
Event name | Description | Arguments |
---|---|---|
form:consent:loaded | inputInfo: {type:'ocr'} | |
form:consent:ready | Upon clicking on the button, this event will be triggered, and you can listen to it to load another screen. | inputInfo: {type:'ocr'} |
form:consent:failed | nputInfo: {type:'ocr'}, message?: string |
Styling customisation
You can use the following classes to customise the styling for different elements of the page. These CSS classes apply to the common elements across all the screens. If you want to customise a specific page, you can use the above configuration options to overwrite it.
Item | CSS Class |
---|---|
title | ff-title |
descriptions | ff-description |
checkbox | ff-checkbox |
button | ff-button |
The following code shows you how to style a specific element on the page, in this example the button's background color will be green, instead of the default blue.
<style>
#<you_div_container> .ff-button {
background-color: green;
}
</style>
Updated 12 days ago