Customizing HelpLinks Not Working in Angular 10

[Brandon]

Hello,

I’m trying to override the helpLinks on a self-hosted login widget in an Angular 10 project.

I’m following the guide at: https://developer.okta.com/docs/guides/style-the-widget/style-self-hosted/#links but none of the values I pass to the widget are being shown.

Is there another way to provide these values? or?

Thanks,
Brandon

[Lijia]

@Brandon Hi, can I ask if you are able to see the options under HelpLinks “Need help signing in?” in the sign in form?

I added a few code snippets and test in Live-widget. It works fine. Please have a try with the below example.

signInWidgetConfig = {
// Enable or disable widget functionality with the following options. Some of these features require additional configuration in your Okta admin settings. Detailed information can be found here: https://github.com/okta/okta-signin-widget#okta-sign-in-widget
// Look and feel changes:
logo: ‘//logo.clearbit.com/okta.com’, // Try changing “okta.com” to other domains, like: “workday.com”, “splunk.com”, or “delmonte.com”
language: ‘en’, // Try: [fr, de, es, ja, zh-CN] Full list: https://github.com/okta/okta-signin-widget#language-and-text
i18n: {
//Overrides default text when using English. Override other languages by adding additional sections.
‘en’: {
‘primaryauth.title’: ‘Sign In’, // Changes the sign in text
‘primaryauth.submit’: ‘Sign In’, // Changes the sign in button
// More e.g. [primaryauth.username.placeholder, primaryauth.password.placeholder, needhelp, etc.].
// Full list here: https://github.com/okta/okta-signin-widget/blob/master/packages/@okta/i18n/dist/properties/login.properties
}
},
helpLinks: {
** help: ‘https://www.google.com’,**
** forgotPassword: ‘https://github.com/okta/okta-signin-widget/#help-links’**
** },**
// Changes to widget functionality
features: {
registration: true, // Enable self-service registration flow
rememberMe: true, // Setting to false will remove the checkbox to save username
…
},
…

Also, you can refer the source code of sign in widget configuration on GH.

[Brandon]

Hi Lijia,

Thank you for the documentation links. When I supply the helpLinks options to add custom links, they are not reflected in the widget output. However, I am able to override the logo and other values.

We’re using a self-hosted widget. Do we need to change something in our Okta config to allow those links to be added?

Thanks,
Brandon

[Lijia]

@Brandon Can you please provide the screenshots of your code snippets and the widget form you see for now?

[Brandon]

Here’s the Angular component:

and the login component running:

[Lijia]

@Brandon In the form, did you try to click “Need help signing in?” You should see a few options(help, forgot password and ect.) after you expanding the link.

[Brandon]

Well, now I see them

Is there any way to hide or customize the “Help” link text and URL?

[Lijia]

Sounds cool! Yes, just like the sample code I post earlier.
helpLinks: {
** help: ‘https://www.google.com’,**
** forgotPassword: ‘https://github.com/okta/okta-signin-widget/#help-links’**
** },**

Please try to add the above code snippets to helpLinks.