Login Modal Trigger Methods in Init User Engine

1. Default avatar click

• The avatar rendered by the [init_user_engine] shortcode will show a default icon if the user is not logged in.
• Clicking this avatar automatically opens the login modal.
• Element ID: #init-user-engine-avatar

2. Using data-iue="login" attribute

• Any HTML element with data-iue="login" will trigger the login modal on click.
• Perfect for custom buttons or inline login links.

<a href="#" data-iue="login">Login Now</a>

3. Trigger via URL hash: #init-user-engine

• If the page is accessed with #init-user-engine in the URL, the modal will auto-open.
• Useful for redirects after registration, invitations, or deep-linking to login.

https://example.com/any-page/#init-user-engine

4. Keyboard shortcut: Alt + L

• Pressing Alt + L opens the login modal if it’s not already open.
• This shortcut enhances UX for power users or keyboard-centric interfaces.

5. Trigger manually via JavaScript

You can programmatically open the login modal by calling the global function:

if (typeof openLoginModal === 'function') {
    openLoginModal();
}

This is useful if you need to integrate with custom flows or third-party scripts.

6. Theme auto-detection

• The modal applies theme styles based on InitPluginSuiteUserEngineConfig.theme
• Supported modes: light, dark, auto (based on OS preference)
• The .dark class is added automatically if appropriate

Technical Notes

• The modal uses WordPress’s built-in wp_login_form() for secure, native login handling.
• No credentials are handled via JavaScript – the form simply opens and focuses the input fields.

Conclusion

Init User Engine offers flexible methods to trigger the login modal: from avatar clicks, custom data attributes, URL hashes, keyboard shortcuts, to direct JS calls. This allows seamless integration into any frontend design while maintaining a consistent and smooth user experience.