Web and Mobile SDK customization
Tailor colors, styles, and step instructions to match your brand across Web and Mobile SDKs.
Sumsub customization lets you tailor the look and feel of the verification flow your applicants see in WebSDK and MobileSDK. Set colors and styles to match your brand, add step-level instructions and tips, and preview the result before going live.
Customize WebSDK
To customize WebSDK:
- In the Dashboard, go to the Customizations page.
- In the top-right, click Create customization and select Create WebSDK customization.
- 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.
- In the Customization description field, enter an optional description.
- In the top-right, select Import 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 and so on. This functionality may not work in some cases, therefore customizations should be set up manually.
- 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 instructions screen. Provides tips and guidelines for the Identity and Liveness step.
- 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. Disables the widget border in the desktop version of the SDK.
- Select the supported languages.
- Enter the sevice name. It will be shown in the warning screen.
- Navigate to the Logo and colors, Texts, Images, Buttons, and Other tabs to apply the appearance settings.
- Click Create to save the customization.
- Add your customization to any of your verification levels.
Important
- To allow applying of a new version of customization, go to the created verification level and on the Steps tab, select the Enable WebSDK 2.0 for this level toggle.
- Make sure to update an NPM-dependency to the latest version (2.0.1).
Note
- 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.
Customize MobileSDK
To customize MobileSDK:
- In the Dashboard, go to the Customizations page.
- In the top-right, click Create customization and select Create MobileSDK customization.
- 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.
- In the Description field, enter an optional description.
- Configure navigation screens by enabling the associated checkboxes:
- Disable steps screen. If selected, applicant will not see the verification steps that they should undergo during verification.
- Disable pending screen. If selected, applicant will not see the screen displaying processing of the submitted data.
- Disable final status screen. If selected, applicant will not see the screen displaying the final state status of the verification.
- Disable temporarily rejected status screen. If selected, applicant will not see the screen displaying the temporarily rejected status indicating that document or Video Ident resubmission is requested.
- 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.
- Add your customization to any of your verification levels.
Manage customization
You can manage customizations in any of the following ways:
- Edit. Configure 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. Copy customization settings in case you want to create a new customization but with some differences to the parent one.
- Delete. Remove customization in case you no longer need it.
- Import styles. Transfer your preferred appearance settings from the WebSDK 1.0 or from a website. Mind that you can only import styles when configuring WebSDK customization.
Updated 3 days ago
Did this page help you?