When configuring the Okta Sign-in Widget for an org, it may be necessary to customize the labels of the various on-screen Widget elements. The default strings are stored in a Widget content file named login.properties as 'i18n' entries for each supported language. This article discusses how to customize the text in the widget.

• Sign-in Widget
• Customization
• Okta Classic Engine

Modifying Strings

• As described in the widget documentation, it is possible to override any of the properties set in login.properties to modify the text displayed in the widget. These properties can be overridden by specifying new values for them inside an i18n object in the Widget’s config section.

Examples:

1. Custom Hosted Sign-in Widget

 Any of the labels found in the Widget can be modified by providing new values for them.

var config = {
    ...
    i18n: {
        en: {
            // Labels
            'primaryauth.title': 'ExampleApp Login',
            'primaryauth.username.placeholder': 'ExampleApp ID',
            'primaryauth.username.tooltip': 'Enter the ExampleApp ID',
            'primaryauth.password.placeholder': 'Password',
            'primaryauth.password.tooltip': 'Super secret password',
            // Errors
            'error.username.required': 'Please enter an ExampleApp ID',
            'error.password.required': 'Please enter a password',
            'errors.E0000004': 'Sign in failed!'
        }
    }
...
};

2. Okta Hosted Sign-in Widget

Use the form fields on the left side of the page and the HTML editor together or separately to customize the sign-in page.

1. Go to Settings > Customization > Branding.
2. Click the Edit button next to the Sign-in page.
3. (Optional) Select the Okta Sign-In Widget Version on the Settings tab: This option allows leverage or omit specific sign-in page capabilities by specifying a particular version of the Okta Sign-In Widget. If unfamiliar with the Okta Sign-In Widget, Okta recommends selecting the highest Major Version and the latest Minor Version (default). For details on the Okta Sign-In Widget capabilities supported by major and minor versions, see this GitHub page.

• Click Edit.
• Click Save.
• Customize the sign-in page on the Page Design tab.

NOTE: Modifying these properties in the Okta-hosted widget modifies the existing Okta configuration (instead of creating a custom version, as would be done with a self-developed embedded custom sign-in page).

To avoid disrupting any other existing customizations on the Labels tab, it is recommended to make modifications as demonstrated below. The key here is the "if" statement, which allows custom code modifications to coexist with customizations from the Labels tab. Otherwise, the Labels tab config would be overwritten by the custom code var config.i18n from the previous example, resulting in only the customizations placed within that statement being applied.

<!--
    "OktaUtil" defines a global OktaUtil object
    that contains methods used to complete the Okta login flow.
-->
{{{OktaUtil}}}
    
var config = OktaUtil.getSignInWidgetConfig();
    
if (config.i18n.en){
    config.i18n.en["needhelp"] = "My New Need Help Text"
}
    
oktaSignIn.renderEl({ el: '#okta-login-container' },
    OktaUtil.completeLogin,
    function(error) {
        // Logs errors that occur when configuring the widget.
        // Remove or replace this with your own custom error handler.
        console.log(error.message, error);
    }
 );

Related References

• Style the sign-in page | Okta Developer
• L10N_ERROR while Customizing the Email Field Label Using the i18n Properties for the Sign Up Page