Get started with WebSDK customization

Create your own customization.

SDK customization allows for visual adjustments in the verification process. For the WebSDK 1.0, the styling is customizable exclusively via Custom CSS. In contrast, WebSDK 2.0 only supports a no-code approach, enabling customization through the Dashboard interface.

🚧

Attention

  • To allow applying of a new version of customization, go to the created verification level and on the General tab, enable the New version of WebSDK toggle.
  • Make sure to update an NPM-dependency to the latest version (2.0.1).

To customize WebSDK 2.0:

  1. In the Dashboard, go to the Customizations page.
  2. In the top-right, click Create customization and select New customization.
  3. In the Customization name field, enter a name for the new customization. Mind that once you have saved the customization, you will not be able to change its name.
  4. In the Customization description field, enter an optional description.
  5. In the top-right, select Import website styles. Here, you can paste a website address and our system will automatically pick up the style of appearance for your customization such as colors, texts etc. This functionality may not work in some cases, therefore customizations should be set up manually.
  6. On the General tab, set up Theme mode (light, dark, or both at the same time to follow your website current theme) and Additional tweaks (the screens that will be shown to your applicants during verification):
    • Skip warning screen. Informs applicants about the organization they are going to be verified for. The warning screen is designed to confirm the authenticity of the verification procedure and prevent phishing attacks.
    • Skip welcome screen. Represents the summary of the verification procedure. Enabled by default.
    • Skip agreements screen. Displays the agreements that you want your applicants to accept before proceeding to verification.
    • Skip review screen. Requests applicants to review submitted information. If enabled, the verification begins once all required steps are complete.
    • Force mobile devices. Forces applicants to complete verification on a mobile device only. Works in combination with the welcome screen.
    • Disable continuing on mobile. Hides the option to continue on mobile. It disables QR codes that the system generates for switching between desktop and mobile devices.
    • Use global branding logo. Allows to use the custom set logo from Branding.
  7. Select the supported languages.
  8. Enter the sevice name. It will be shown in the warning screen.
  9. Navigate to the Logo and colors, Texts, Images, Buttons, and Other tabs to apply the appearance settings.
  10. Click Create to save the customization.
  11. Add your customization to any of your verification levels.

To customize WebSDK:

  1. In the Dashboard, go to the Customizations page.
  2. In the top-right, click Create customization and select Old customization.
  3. In the Customization name field, enter a name for the new customization. Mind that once you have saved the customization, you will not be able to change its name.
  4. In the Description field, enter an optional description.
  5. From the Integration type drop-down list, select WebSDK.
  6. Configure navigation screens by enabling the associated checkboxes:
    • Skip warning screen. Informs applicants about the organization they are going to be verified for. The warning screen is designed to confirm the authenticity of the verification procedure and prevent phishing attacks.
    • Skip welcome screen. Represents the summary of the verification procedure. Enabled by default.
    • Skip agreements screen. Displays the agreements that you want your applicants to accept before proceeding to verification.
    • Skip review screen. Requests applicants to review submitted information. If enabled, the verification begins once all required steps are complete.
    • Force mobile devices. Forces applicants to complete verification on a mobile device only. Works in combination with the welcome screen.
    • Disable continuing on mobile. Hides the option to continue on mobile. It disables QR codes that the system generates for switching between desktop and mobile devices.
  7. In the Required steps customization section, you can change the default settings for the verification steps:
    • In the Top level parameters section, customize which file formats should be accepted, define custom CSS to be applied, and specify which languages should be available to applicants.
      • Select the Allow files of all formats checkbox to allow applicants to upload files of any formats.
      • In the Сustom CSS field, provide a path to your CSS file if you want to override the default CSS.
      • In the Сustom CSS string field, provide a CSS content if you want to override the default content.
      • From the Selectable languages drop-down list, choose languages that an applicant can select during verification. If not specified, the default language will be used, as defined by the target system. For example, the browser language.
    • In the Company section, customize the KYB flow of individual applicants.
      • Select the Require UBO info checkbox to force collecting UBOs information.
      • Select the Require shareholders info checkbox to force collecting shareholders information.
      • Select the Skip emails screen checkbox If you do not want to send emails to applicants.
      • In the Link lifetime (in sec.) field, specify the time period for which the link sent to applicants should be valid.
    • In the Payment methods section, customize the payment method submission page.
      • Select the Allow edit approved payment method checkbox if you want to allow editing the approved payment method.
      • Select the Disable an option to add other payments checkbox if you do not want your applicants to add payment methods.
      • Select the Hide method payment type selectors checkbox if you want to hide payment method selectors in case you have only one payment method configured, such as, for example, VISA cards.
  8. Click Add to save the customization.
  9. Add your customization to any of your verification levels.

To customize MobileSDK:

  1. In the Dashboard, go to the Customizations page.
  2. In the top-right, click Create customization and select Old customization.
  3. In the Customization name field, enter a name for the new customization. Mind that once you have saved the customization, you will not be able to change its name.
  4. In the Description field, enter an optional description.
  5. From the Integration type drop-down list, select MobileSDK.
  6. Configure navigation screens by enabling the associated checkboxes:
    • Disable steps screen. If enabled, applicants will not see the verification steps that they should undergo during verification.
    • Disable pending screen. If enabled, applicant will not see the screen displaying processing of the submitted data.
  7. In the Required steps customization section, you can select a verification step to which the intro screen will be added. Select the step and click the + icon to adjust the changes.
  8. Add your customization to any of your verification levels.

Manage customization

You can manage your customizations in any of the following ways:

  • Edit. Lets you edit an existing customization in case you want to change certain parameters. For example, you may want to change the customization description, type, navigation screen, and so on.
  • Copy. Copying a customization allows you to inherit the selected customization settings in case you want to create a new customization but with some differences to the parent one.
  • Delete. Lets you remove a customization in case you no longer need it.