Customization

This document provides a comprehensive guide to customizing your LoginRadius Hosted Pages V3. There are two main ways to customize your hosted pages:

Design Tab: A visual, no-code editor for customizing the authentication components rendered inside the <div id="auth-container"></div>. Use this for branding, layout, and UI changes to the authentication experience.
Code Tab: An advanced editor for modifying the webpage that contains the authentication components, allowing for structural changes, custom scripts, and unique styling. Use this for changes outside the authentication container, or for advanced scripting.

Design Tab

The Design Tab is a visual editor for customizing the appearance and layout of your authentication components. It lets you change logos, colors, fonts, layouts, and more—without writing code. All changes apply only to the content inside <div id="auth-container"></div>.

Getting Started

Navigate to Branding > Hosted Pages in your Admin Console.
Select your hosted page template or create a new one.
Click the Design tab to access the visual customization interface.
Use the live preview to see changes in real-time.

Key Features

Visual UI Editor
Multi-Brand Configuration
Live Preview and Testing

Customize every aspect of your hosted pages without writing code using:

Brand Elements
Layout Customization
Component Styling

Logo Upload: Add your company logo with automatic sizing and positioning
Color Palette: Define primary, secondary, and accent colors
Typography: Select fonts, sizes, and weights
Brand Guidelines: Apply consistent styling across all elements

Styles

You can create multiple styles for different components and states, allowing for a more tailored user experience. Only one style can be active at a time.

(current deployed style)
https://<site-name>.hub.loginradius.com/auth.aspx

To use a different style for the same deployed brand, pass ?style=<style-name> in the URL:

(alternate style name)
https://<site-name>.hub.loginradius.com/auth.aspx?style=<style-name>

Extensive Features

OS-Based Theme Detection
Auto-Translation and Localization

Hosted Pages V3 automatically detects and applies the appropriate theme based on user preferences:

Light Mode: Clean, bright interface for daytime usage
Dark Mode: Eye-friendly dark interface for low-light environments
System Preference: Automatically follows the user's OS theme setting

Best Practices

Design Guidelines: Maintain consistency, ensure accessibility, use mobile-first approach, optimize performance
Brand Implementation: Follow brand guidelines, prioritize usability, test regularly, and gather feedback
Multi-Brand Strategy: Establish hierarchy, maintain assets, document customizations, implement governance
Advanced Customization: Use CSS variables, access theme tokens, implement event hooks, and integrate APIs

Code Tab

The Code Tab allows you to customize the webpage that contains your authentication interface. While the Design Tab controls the components inside <div id="auth-container"></div>, the Code Tab gives you the flexibility to modify the surrounding HTML structure, add custom scripts, and apply unique styles. Use this for advanced customizations outside the authentication container.

Getting Started

Navigate to Branding > Hosted Pages in your Admin Console.
Select your hosted page template.
Click the Code tab to access the development interface.
Choose the appropriate section (Authentication Pages or Profile Pages) and select the file you want to customize.

Key Features

File Structure
BeforeScript - LRObject Modification

The Code Tab organizes customization files into logical sections for Authentication Pages and Profile Pages:

HTML: Page structure and layout markup
BeforeScript: JavaScript executed before page initialization, ideal for LRObject modification
CustomCSS: Styling and visual customizations
CustomJS: Additional JavaScript functionality

The BeforeScript section allows easy modification of the LoginRadius Object (LRObject) before page initialization.

LRObject Configuration Example:

var forgotpasswordurl = window.location.href.replace("action=forgotpassword&", "").replace("action=login&", "");
var emailverifyurl = window.location.href.replace("action=register&", "");

raasoption.forgotPasswordUrl = raasoption.forgotPasswordUrl || encodeURIComponent(forgotpasswordurl);
raasoption.verificationUrl = raasoption.verificationUrl || encodeURIComponent(emailverifyurl);

raasoption.hashTemplate = true;
raasoption.callbackUrl = window.location.href.split('?')[0];

var LRObject = new LoginRadiusSDK(raasoption);

var lr_raas_settings = window.lr_raas_settings || {};

lr_raas_settings.auth = {};
lr_raas_settings.auth.container = "auth-container";
lr_raas_settings.auth.onSuccess = function (response, flag) {
    if (response.access_token) {
        redirectToReturnUrl(response.access_token);
    }
};
lr_raas_settings.auth.onError = function (errors) {
    if (errors)
        console.log(errors.error, true);
};

LRObject.init("auth", lr_raas_settings.auth);

function redirectToReturnUrl(token) {
    window.location = 'profile.aspx';
}

Best Practices

Performance: Minimize direct DOM manipulation, load non-critical scripts asynchronously, use event delegation, and clean up resources
Security: Validate and sanitize user inputs, use libraries to prevent XSS attacks, and implement a strict Content Security Policy (CSP)
Code Organization: Organize code into reusable modules, add comments for complex logic, use version control, and implement unit and integration tests

Getting Help

For V3-specific issues:

Check the browser console for detailed error messages
Use the live preview to isolate issues
Review this documentation for Design Tab and Code Tab usage
Contact LoginRadius support for technical assistance

Next Steps

For detailed information about using your customized hosted pages, including available actions and URL configurations, refer to the Usage documentation.