-
Okta-hosted Sign-in Widget (Classic Engine)
-
HTML
-
End-User Experience
-
Log in to the Okta Admin Console.
-
Navigate to Customization > Branding > Sign-in page > Click Edit > Enable Code Editor.
-
If would like to keep the default code but only remove the "Need help signing in", copy and paste this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex,nofollow" />
<!-- Styles generated from theme -->
<link href="{{themedStylesUrl}}" rel="stylesheet" type="text/css">
<!-- Favicon from theme -->
<link rel="shortcut icon" href="{{faviconUrl}}" type="image/x-icon"/>
<title>{{pageTitle}}</title>
{{{SignInWidgetResources}}}
<style nonce="{{nonceValue}}"> #login-bg-image-id { background-image: {{bgImageUrl}} } </style>
</head>
<body>
<div id="login-bg-image-id" class="login-bg-image tb--background"></div>
<div id="okta-login-container"></div>
<!-- "OktaUtil" defines a global OktaUtil object that contains methods used to complete the Okta login flow. -->
{{{OktaUtil}}}
<script type="text/javascript" nonce="{{nonceValue}}">
// "config" object contains default widget configuration with any custom overrides defined in your admin settings.
var config = OktaUtil.getSignInWidgetConfig();
// This will hide the "Need help signing in" text.
config.i18n.en = {'needhelp': " "}
// Render the Okta Sign-In Widget
var oktaSignIn = new OktaSignIn(config); 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); } );
// After the widget renders, simulate a mouse click of the need help link
oktaSignIn.on('afterRender', function (context) { document.querySelectorAll("[data-se='needhelp']")[0].click() });
</script>
</body>
</html> -
Click Save to draft > Click Publish.
NOTE:
- It is highly encouraged to try this in a testing environment first, before making changes in production.
- Keep in mind that because we are using i18n properties in the above code. If the widget will be used in languages other than English, apply this same i18n customization to all the supported languages. For example:
- config.i18n.fr = {'needhelp': " "}config.i18n.en = {'needhelp': " "}
