I have been trying to make a few small changes to the custom widget in order to meet business requirements. This includes a number of things, but for the sake of simplicity, I will focus this question on adding a subtitle to the Unlock Account screen to be more descriptive for the user. So using document.load, I append a paragraph below the h2 title using jquery. It works great the first time, but once you go back to the main login screen, and then back to unlock account, the subtitle disappears.
I had previously tried several things to create an async await function in order to wait for the elements to render, but I am not too savvy with that and don’t quite understand how Okta’s widget renders. Here is the code I use for rendering the widget and modifying the title:
`// 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);
});
$(document).ready(function () {
$('.account-unlock h2').append('<p>Please enter your email address and click submit in order to request a password reset email.</p>')});`