Onfido LogoOnfido Logo

Developers

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:

ModulePrevious templateNew template
Document selection screenFormer doc selectionNew doc selection
Document upload screenFormer doc uploadNew doc upload
Motion intro screenFormer motion introNew motion intro
Motion error screenFormer motion errorNew motion error
Proof of Address selection screenFormer poa selectionNew poa selection
Proof of Address capture screenFormer poa captureNew poa capture
Cross-device (desktop) intro screenFormer desktop introNew desktop intro
Cross-device (desktop) QR code screenFormer desktop QR codeNew desktop QR code
Cross-device (desktop) SMS screenFormer desktop SMSNew desktop SMS
Cross-device (desktop) URL screenFormer desktop URLNew desktop URL
Cross-device (desktop) success screenFormer desktop successNew desktop success
Cross-device (desktop) connected screenFormer desktop connectedNew desktop connected
Cross-device (mobile) intro screenFormer mobile introNew mobile intro
Cross-device (mobile) success screenFormer mobile successNew mobile success

Table of contents