With previous versions of the Okta Widget (Second Generation), one simple approach to hiding the "Help" link was to remove the text for the help i18n, but this does not remove the accessibility icon present in the Third Generation widget.
Below is an example of how to achieve the desired hidden "Help" link and icon in the Third Generation widget.
- Okta Identity Engine (OIE)
- Okta-hosted Widget (Third generation)
- Widget Customizations
The i18n config option is not actually disabling the Help Button, but rather replaces the visible text with a blank space, and what we see is actually an accessibility icon indicating that the "Help" link will open in a new tab. It always appears in SIW gen3 links if the anchor (<a/> ) element associated with the link has target="_blank" for its target attribute.
The problem behavior presents in the following manner, with the example common customization code, and can be identified by the accessibility link without a preceding text hyperlink.
config.i18n = {
'en': {
'help':' ',
}};
config.helpLinks = {
help: ' ',
};
One potential solution is to use custom code like the following to filter out the data-se="help" element in the widget using afterTransform:
<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();
config.features.autoFocus = true;
config.idpDisplay = 'SECONDARY';
// 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);
}
);
// Remove the help link
oktaSignIn.afterTransform('identify', ({ formBag }) => {
const help = formBag.uischema.elements.find(ele => ele.type === 'Link' && ele.options.dataSe === 'help');
formBag.uischema.elements = formBag.uischema.elements.filter(ele => ![help].includes(ele));
});
</script>
Additional Gen 3 widget help and GitHub documentation.
