To prevent page autoscrolling when displaying an inline Identity Management login or registration modal, you can use a custom JavaScript implementation rather than Composer's Show Template or Show Offer cards.
The script should be placed inside a Run JS card in Composer, and the exact configuration will depend on which modal screen is being displayed. Using a Run JS block ensures that the DOM has fully loaded with all required elements before the code executes, allowing it to run reliably across all pages.
Register screen example
var selector = '.my-piano-container';
var element = document.querySelector(selector);
var elementStyleDisplay = element.style.display;
tp.pianoId.show({
displayMode: 'inline',
screen: 'register',
containerSelector: selector,
loggedIn: function(data) {
console.log('user ', data.user, ' logged in with token', data.token);
},
loginSuccess: function() { alert('loginSuccess'); },
loggedOut: function() {
console.log('user logged out');
},
registerDisplayed: function() {
element.style.display = 'none';
setTimeout(function() { element.style.display = elementStyleDisplay }, 5000);
}
});
Login screen example
var selector = '.my-piano-container';
var element = document.querySelector(selector);
var elementStyleDisplay = element.style.display;
tp.pianoId.show({
displayMode: 'inline',
screen: 'login',
containerSelector: selector,
loggedIn: function(data) {
console.log('user ', data.user, ' logged in with token', data.token);
},
loginSuccess: function() { alert('loginSuccess'); },
loggedOut: function() {
console.log('user logged out');
},
loginDisplayed: function() {
element.style.display = 'none';
setTimeout(function() { element.style.display = elementStyleDisplay }, 5000);
}
});
Notes
-
The container selector (
.my-piano-container) should match the inline modal container used on your page. -
Timing and display behavior can be adjusted as needed.
-
Additional customization is available through Identity Management JavaScript functions.