Docs
API ReferenceBook a DemoSupportStart NowLog In ➔
Ask or search…
⌃K
Links
Comment on page

Web SDK customizations

Stages

Stages can be customized by providing stage objects. A state object has two components - name and options.

Name

The name attribute is the stage name. The possible values are: intro, userConsentCapture, documentCapture, faceCapture, poaCapture, and completion.
When the userConsentCapturestage is enabled, the onExit callback must be used to handle instances where your client does not grant their consent to be checked according to our prevailing Terms of Services and Privacy statement. Please refer to SDK Settings for further details on the onExit callback.
Please make sure you pass the clientConsent parameter when consent is granted by your client.

Options

The options object allows the customization of each stage as follows:
Stage Name
Options
intro
​
  • heading: change the intro screen heading
  • message: a list of messages to display on the intro screen. Max size 3.
  • startButtonText: change the text of the start button on the intro screen.
documentCapture
​
  • crossDeviceOnly: a boolean that indicates whether to force users to capture their document using their phone. This removes the document upload option.
  • documentTypes: the list of ID document types visible to the user. Valid document types include:
    • passport
    • driving_license
    • national_identity_card
    • residence_permit
    ​
    The value of each can be either a boolean or a country object. Boolean values toggle the visibility of the document type. The country object allows to specify the issuing country for non-passport document types and thus bypass the country selection screen. The country value is the two-letter country ISO code.
faceCapture
​
  • mode: the mode of the facial capture. Possible values are: photo or video.
poaCapture
​
  • documentTypes: the list of Proof of Address (POA) document types visible to the user. Valid POA document types include:
    • bank_statement
    • utility_bill
The value of each document type is a boolean that toggles the visibility of the document type.
completion
​
  • heading: change the completion screen heading.
  • message: a message to display on the completion screen. Max size 1.

Example options object

stages: [
{
name: "intro",
options: {
heading: "We need to verify your identity",
message: [
"In order to open an account, we need to check a few things.",
"This will take only a moment",
],
startButtonText: "Start Verification"
},
},
"userConsentCapture",
{
name: "documentCapture",
options: {
crossDeviceOnly: true,
documentTypes: {
passport: true,
driving_license: false,
national_identity_card: true,
residence_permit: {
country: "GB",
},
},
},
},
{
name: "faceCapture",
options: {
mode: "video"
},
},
{
name: "poaCapture",
options: {
documentTypes: {
bank_statement: true,
utility_bill: false,
},
},
},
{
name: "completion",
options: {
heading: "Thank you for completing the process",
message: ["we will get in touch shortly"]
},
},
];
​

Branding

If you'd like to customize the look-and-feel of the SDK, you can provide a branding object with the following attributes:

Appearance

The appearance object allows you to customize the color scheme of the SDK with CSS values (e.g. RGBA, Hex). Customizable attributes include:
Attribute
Description
infoPopupColor
Warning popup background color
infoPopupTextColor
Warning popup background color
infoPopupLinkHoverColor
Warning popup fallback Link on hover background color
infoPopupLinkActiveColor
Warning popup fallback Link active background color
errorPopupColor
Error popup background color
errorPopupTextColor
Error popup text color
errorPopupLinkHoverColor
Error popup fallback Link on hover background color
errorPopupLinkActiveColor
Error popup fallback Link active background color
cameraButtonHoverColor
Camera button on hover background color
cameraButtonActiveColor
Camera button active background color
iconButtonActiveColor
Icon button active background color
iconButtonHoverColor
Icon button on hover background color
primaryButtonColor
Primary button background color
primaryButtonTextColor
Primary button text color
primaryButtonActiveColor
Primary button active background color
primaryButtonHoverColor
Primary button on hover background color
primaryButtonBorderColor
Primary button border color
secondaryButtonColor
Secondary button background color
secondaryButtonTextColor
Secondary button text color
secondaryButtonActiveColor
Secondary button active background color
secondaryButtonHoverColor
Secondary button on hover background color
secondaryButtonBorderColor
Secondary button border color
documentSelectorColor
Document selector background color
documentSelectorTextColor
Document selector text color
documentSelectorActiveBorderColor
Document selector active background color
documentSelectorHoverBorderColor
Document selector on the hover background color
linkHoverColor
Link on the hover background color
linkActiveColor
Link active background color
linkUnderlineColor
Link underline color
linkHoverTextColor
Link on the hover text color
bodyTextColor
SDK content text color
headingTextColor
SDK heading text color
subheadingTextColor
SDK subheading text color
The logo object has two attributes:
  • lightLogoUrl: URL for your logo's light version
  • darkLogoUrl: URL for your logo's dark version

Example of logo branding

branding: {
appearance: {
primaryButtonColor: '#FF0000',
},
logo: {
lightLogoUrl: 'light_logo_url',
darkLogoUrl: 'dark_logo_url',
}
},

Text Brand

The textBrand attribute represents the textual format of your brand.

Example of text branding

branding: {
appearance: {
primaryButtonColor: '#FF0000',
},
textBrand: 'Acme Bank'
}
If logo and textBrand attributes are specified at the same time, logo takes precedence.

​

Previous
Web SDK integration guide
Next - Guides
Mobile SDK Quick Guide
Last modified 4mo ago