Skip to main content

Customization

Customize Auth, Profile, and Workflow pages using templates, styles, and text (localization). Each page includes a mandatory <div> container that is replaced at runtime with a pre‑configured login box. You control the surrounding HTML/CSS/JS, while the login box's styling and text are configured via Styles and localization.

What You Can Customize

  • Page Code: Edit HTML, BeforeJS, CustomCSS, and CustomJS for Auth, Profile, and Workflow pages
  • Login Box Styles: Adjust human‑readable style properties; use CSS variables for consistency
  • Text (localization): Customize component text and add languages
  • Domains: Map templates to different custom domains to run multiple designs

CSS Classes for the Login Box

Use these classes in CustomCSS to target layout inside the login box:

  • loginradius-card-container – overall container
  • loginradius-card-header / loginradius-card-subheader – heading texts
  • loginradius-form-container – form area
  • loginradius-login-form – inputs and primary actions
  • loginradius-button-container – primary/secondary buttons
  • loginradius-footer-container – footer area

Example:

.loginradius-card-container {
  max-width: 450px;
  margin: 20px auto;
}
.loginradius-card-header {
  font-size: var(--sdk-header-font-size);
  color: var(--sdk-card-text-color);
  text-align: center;
}

BeforeJS and CustomJS

  • BeforeJS: Runs before interfaces render; set flags or context

    • Loaded in the <head> of the page, immediately after the LoginRadius SDK but before any HTML is painted
    • Use it when you need to:
      • Read URL parameters and set global flags
      • Branch logic that must be available before the login box initializes
      • Inject early consent or feature flags
    • Example inclusion (you paste this into the “BeforeJS” field in the Admin Console): 
      window.LR_FEATURE_FLAG = { betaFlow: true };

  • CustomJS: Page‑wide logic for analytics, consent, or UI behavior

    • Loaded at the bottom of <body>, after the login box has mounted
    • Use it when you need to:
      • Attach event listeners to buttons that only exist after render
      • Fire third-party analytics or cookie banners
      • Manipulate DOM elements outside the login box
    • Example inclusion (paste into “CustomJS” field): 
      document.addEventListener('DOMContentLoaded', function () {
        gtag('event', 'page_view', { page_title: 'Hosted Auth' });
      });

Example (BeforeJS pattern):

(function () {
  var params = new URLSearchParams(window.location.search);
  var campaign = params.get('campaign');
  window.LR_PAGE_CONTEXT = { campaign: campaign || null };
})();