Documentation
API ReferenceChangelogFAQDashboard

Customization

Customize the appearance of your SDK interface.

Sumsub customization lets you adjust the look and feel of your applicants' journey while they pass verification in WebSDK and MobileSDK.

When configuring customization, you will be able to set colors and styles exactly as you want them to appear to your applicants. You can also add instructions and tips for each of your verification steps and then preview the resulting verification flow with just a few clicks.

SDK customization in the Dashboard.
No code

Get started with SDK customization

🚧

Attention

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.
    • 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.
    • Hide header progress bar. Removes the bar in the header indicating the completion progress of verification.
    • Hide widget border for desktop version. Disables the widget border in the desktop version of the SDK.
  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.

📘

Info

  • There is an option to specify a customization name when setting up the WebSDK integration, so you can override the level customization for a specific SDK run.
  • The import styles from website setting may not work due to the website limitations. Therefore, you will have to set up customizations manually.

To customize WebSDK 1.0:

  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 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 customizations in any of the following ways:

  • Edit. Lets you edit 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.
  • Duplicate. Lets you copy customization settings in case you want to create a new customization but with some differences to the parent one.
  • Delete. Lets you remove customization in case you no longer need it.
  • Import styles. Lets you transfer your preferred appearance settings from the WebSDK 1.0 or from a website.

Updated about 2 months ago