Authentication Pages

You can customize the look and feel of your BindID authentication pages to provide your customers with a seamless experience. To make changes to the appearance of an application's authentication pages, go to the Branding > Authentication tab. If you have more than one BindID application, select the application for which you are customizing authentication pages from the drop-down list at the top of the page.

You can make any of the following changes:

• Upload your company logo.
• Customize the colors of authentication pages.
• Upload a css file that determines the appearance of authentication pages' HTML elements. You can apply styling across multiple pages by specifying body before the class (see CSS Example). After uploading a css file, select Override the default styling using custom CSS before saving your changes.

Note: The css file cannot contain external links, for example, to import custom fonts. Also, you cannot customize the browser page and the mobile screen used to enter a short authentication code.

Before saving your changes, you can click Preview to see how the pages will look when your changes are applied.

CSS Reference

The following tables describe the UI elements that can be customized with a css file:

Screens

Class	Description	Platform
.authentication-error-page	Displays an error when the user cannot login	Mobile
.desktop-consent-page	Presents consents for user to approve	Desktop
.desktop-account-switch-page	Used to switch accounts and initiate a desktop authentication flow	Desktop
.desktop-otp-authenticator	Used to enter OTP codes for email or phone verification	Desktop
.desktop-phone-input-page	Used to enter a phone number to receive an OTP	Desktop
.failure-alert-page	Displays an error	Mobile
.fido2-register-form	Allows user to register a FIDO2 desktop authenticator	Desktop
.login-approval-page	Used to approve mobile login or transaction requests	Mobile
.mobile-email-input-page	Used to enter an email address (“Hello” screen)	Mobile
.mobile-account-switch-page	Used to switch accounts and initiate a mobile authentication flow	Mobile
.mobile-otp-page	Used to enter OTP codes for email or phone verification	Mobile
.more-ways-page	Displays additional authentication options (e.g., short code)	Desktop
.scan-qr-page	Presents a QR to scan to authenticate with a mobile device	Desktop
.success-alert-page	Confirms successful authentication	Mobile
.transaction-approval-page	Used to approve desktop transaction signing requests	Desktop
.wait-for-mobile-page	Waits for mobile authentication to complete	Desktop

Typography

Class or Element	Description
h1	Screen title (e.g., Verify it’s you)
h2	Screen subtitle (e.g., Scan the code below…)
h3	Secondary subtitle (e.g., Or enter your mobile number…)
.subtitle	Subtitle on mobile initiate authentication flow screens
.code-input .link-button-description	Description of OTP resend button (e.g., Didn’t get the code?)
.code-input .otp-error	Error message for incorrect OTP code input
.consent-description	Consent description (e.g., See your email address)
.info-row	Body of request details on mobile approval page (e.g., Aug 8, 2021, 10:16:17 AM)
.info-row-title	Title of request details on mobile approval page (e.g., Request time)
.item-row	Body of transaction details for desktop approval page (e.g., Acme)
.item-row-title	Title of transaction details for desktop approval page (e.g., Payment to)
.link-button-description	Description preceding link buttons (e.g., Didn’t get the code?)
.message	Alert body or title of login or approval screens (e.g., Login to Acme)
.resend	Description of option to resend OTP for mobile (e.g., Didn’t get the code?)
.skip-registration	Description to skip desktop FIDO2 registration (i.e., Not your personal…?)
.title	Alert title (e.g., Done!)
.total-amount-title	Title of transaction amount on approval screens (e.g., Total Amount)
.total-amount-value	Value of transaction amount on approval screens (e.g., $100)

Buttons & Links

Class	Description
.back-button	Back button (e.g., Back)
.button-cta	All buttons, except links
.buttons-container	Wrapper for button contains (e.g., to control layout)
.change-email-button	Change email address button on desktop screens
.code-input .link-button	Resend link button on desktop OTP input screen (e.g., Resend)
.link-button	Text link button (e.g., Use mobile device instead or Click here)
.primary-button	Primary button (e.g., Approve, Login, Continue, or Try again)
.resend-button	Resend link button on mobile OTP input screen (e.g., Resend)
.reset-button	Change email address button on mobile screens
.secondary-button	Secondary button (e.g., Declineor Register)

Input, Images & Borders

Class or Element	Description
.border	Border for consent descriptions
.code-input	OTP code input for desktop screens
.content img	Image for the alerts
.user-accounts-container	Switch accounts container on initiate authentication flow screens
user-account-item .inner-wrapper .email	List of available accounts on initiate authentication flow screens
user-account-item .item-wrapper .is-selected .inner-wrapper .email	Selected account text (email address) on initiate authentication flow screens
user-account-item .item-wrapper .is-selected	Selected account indicator on initiate authentication flow screens
.email-field input	Email address input
.fido2-register-content img	Image for the desktop FIDO2 registration screen
.otp-container input	OTP code input for mobile screens
.send-sms-form input	Phone number input to get an SMS OTP
.send-sms-link .phone-input	Phone number input to get a link by SMS
img	Image (e.g., for the desktop login page)

Examples

Web Page Examples

Mobile Screen Examples

CSS Example

body .buttons-container {

flex-direction: column;

}

body .button-cta {

width: 350px;

height: 40px;

flex: auto;

margin: 0;

max-width: unset;

margin-bottom: 15px;

border-radius: 1px;

}

.button-cta.primary-button {

background-color: #F96302;

box-shadow: 0 3px 0 #c34c00;

color: white;

}

.scan-qr-page h1 {

color: #c7c4c1;

}

.scan-qr-page h2 {

color: #e4b190;

}

.success-alert-page .title {

color: #c7c4c1;

}