Web SDK UI templates guide
Introduction
With the release of the Web SDK 14.44.0, a range of new design patterns and layouts have been implemented across all screens and products, to enhance consistency and improve the user experience. Many common issues and bugs have also been fixed as part of this release.
The key changes to be aware of include:
- Left-aligned text for improved readability, accessibility and visual flow
- Replaced illustrations with icons to ensure consistency and better customisation
- Refined UI across multiple screens to create a more consistent experience
- Alignment of media on introduction and welcome screens to always be above content
- Buttons are displayed in full width and responsive to screen size
A number of the Web SDK styling attributes have also been updated or removed with this release. Please refer to the migration guide for specific details.
The images below offer an illustration of some of the changes that have been made to major SDK screens and components:
| Module | Previous template | New template |
|---|---|---|
| Document selection screen |  |  |
| Document upload screen |  |  |
| Motion intro screen |  |  |
| Motion error screen |  |  |
| Proof of Address selection screen |  |  |
| Proof of Address capture screen |  |  |
| Cross-device (desktop) intro screen |  |  |
| Cross-device (desktop) QR code screen |  |  |
| Cross-device (desktop) SMS screen |  |  |
| Cross-device (desktop) URL screen |  |  |
| Cross-device (desktop) success screen |  |  |
| Cross-device (desktop) connected screen |  |  |
| Cross-device (mobile) intro screen |  |  |
| Cross-device (mobile) success screen |  |  |
