How to customize the 2FA user experience

Customizing users’ 2FA experience is easy thanks to WP 2FA’s white labeling and customization options. You can change the 2FA code page, wizards, and email templates for a more cohesive user experience.

Email settings and templates

WP 2FA can send 2FA users emails on four different occasions, depending on the user’s setup as well as actions the user may or may not take. The four occasions in which a 2FA user can receive an email are as follows:

• When a user requests an OOB link
• When a user requests a login code
• When a user account is locked due to an expired grace period
• When a user account has been unlocked

The plugin comes with templates for all four emails, all of which can be configured by an administrator.

To start configuring email options:

• From the WordPress main menu, click on WP 2FA
• From the WP 2FA menu options click on Settings
• From the main page, click on the Email Settings & Templates tab

Change the ‘from’ email address

By default, emails are sent from the administrator email address as configured in WordPress’ general settings. You can easily change the email address and the display name from which all 2FA emails are sent from here.

Use the email address from the WordPress general settings – Enable this option to keep sending emails from the email address configured in WordPress general settings.

Use another email address – Enable this option to enter a different email address and display. Enter the new values in the corresponding fields.

 To save changes, click the Save email settings and templates button located at the bottom of the page.

To confirm that the plugin can send emails from the configured address, click on the Test email delivery button located under the Email delivery test section.

Email Templates

Under the email templates section, you will find all four emails that the plugin can send. Each email template follows the same structure which includes a subject line and body. Both of these can be freely edited. You may also include any of the available template tags, which allow for dynamic information to be included in the email for an even more personalized experience. 

Template tags

Template tags are information placeholders that allow you to add content dynamically. For example, the {user_first_name} template tag will insert the recipient’s first name dynamically so you do not have to type it in each time. In all, there are nine template tags available across all four emails as follows:

• {site_url} – Use this template tag to include the website URL as configured in WordPress settings
• {site_name} – Use this template tag to include the website name as configured in WordPress settings
• {grace_period}
• {user_login_name} – Use this template tag to include the user’s login name as configured in WordPress
• {user_first_name} – Use this template tag to include the user’s first name as configured in the user’s profile page
• {user_last_name} – Use this template tag to include the user’s last name as configured in the user’s profile page
• {user_display_name} – Use this template tag to include the user’s display name as configured in the user’s profile page
• {login_code} – Use this template tag to include the 2FA login code or login URL. Can only (and needs to) be included in the Login OOB code and Login code emails.
• {user_ip_address} –  – Use this template tag to include the IP address from which a 2FA request code originated. Can only be included in the Login OOB code and Login code emails.

Available email templates

• Login OOB code email – This email is sent when a user using the Link via email (Out-of-band email) 2FA authentication method is trying to authenticate. Must include the {login_code} template tag as otherwise, the user will not receive the link and thus will not be able to log in.
• Login code email – This email is sent when a user using the One-time code via email (HOTP) 2FA authentication method is trying to authenticate. Must include the {login_code} template tag as otherwise, the user will not receive the code and thus will not be able to log in.
• User account locked email – This is an optional email sent to a user whose account has been locked. Check the Uncheck to disable this message option to enable this email to be sent and uncheck it to disable the email from being sent.
• User account unlocked email – This is an optional email sent to a user whose account has been unlocked. Check the Uncheck to disable this message option to enable this email to be sent and uncheck it to disable the email from being sent.

Email subject – This is the subject line of the email

Email body – This is the body of the email

Send test email – Click the Send test email button to send a test email. The email will be sent to the email address of the administrator configuring the plugin, as set in the WordPress user account.

White labeling

WP 2FA White labeling offers extensive white labeling options that can help you customize the look and feel of various 2FA processes. You can use the WP 2FA white labeling options to change many of the elements that make up the 2FA code page and 2FA setup wizard. These options give you the opportunity to match your branding colors, fonts, tone, and logo or create an entirely new experience for your users.

To start configuring white labeling options:

• From the WordPress main menu, click on WP 2FA
• From the WP 2FA menu options click on Settings
• From the main page, click on the White labeling tab

Here you’ll find two sub-tabs, highlighted in blue color in the above screenshot.

The first tab, titled 2FA Code page design, allows you to customize the 2FA code page. The second tab, titled User 2FA setup wizard, allows you to customize the initial setup wizard users go through to set up 2FA.

2FA code page design

In this section, we will be covering the various white labeling options available for the 2FA code page

Change the background color

Change the background color of the 2FA page by selecting the color that you would like to show. You can choose a color from the palette or by entering the HEX code in the available field.

Change the logo

Change the logo that appears on the 2FA page by uploading the logo that you would like to use instead of the existing one.

Change the text

Change the text that appears on the 2FA code input page by replacing the text available in the text field. Do note that only plain text is allowed here.

Change the font type

Change the font type used in the 2FA code page text by selecting an alternative font from the drop-down menu.

Change the button color

Change the color of the Log in button by selecting the color that you would like to show. You can choose a color from the palette or by entering the HEX code in the available field.

Change the button text

Change the text of the Log in button by replacing the text available in the text field. Do note that only plain text is allowed here.

2FA set up wizard

The User 2FA setup wizard page tab comes with a drop-down menu. To see the available options, click on the arrow pointing downwards at the right edge of the tab.

The first four options available in the drop-down menu represent a step in the wizard as follows:

Welcome & Initial Message
2FA Method Selection
2FA Method Verification
Backup Codes & Final Steps

2FA Method Reconfiguration – White labeling options for the 2FA Reconfiguration wizard

Custom CSS – Here, you can enter custom CSS to be used in the wizard when not using the plugin’s CSS.

Welcome & Initial Message

In this section you can configure general white label settings as well as include an optional welcome screen.

The optional welcome screen allows you to add a first-step in the users’ wizard process where you can display any information related to your business/website such as legal disclaimers, support options, etc.

Change the styling of the user 2FA wizards?

Enable styling – Enable this option to use the plugin’s default CSS. Disable this option to use your own CSS

Display logo in the user 2FA wizards?

Display logo – Enable this option to display your logo as configured in the 2FA Code pafe design settings

Optional welcome & initial message

This section allows you to enable and configure an optional and initial message step in the wizard. When enabled, an additional screen will be added to the wizard as a

Enable “Welcome & initial message”

Optional welcome content – Add the content you would like to display in the wizard’s first step