Skip to main content

Customization

This document provides a comprehensive guide to customizing your LoginRadius Hosted Pages. You can modify the appearance, functionality, and user experience through the LoginRadius Admin Console at Branding > Hosted Pages.

Getting Started

LoginRadius Hosted Pages come pre-built with a default template called "LoginRadius Default V2" to help you get started quickly. This template includes all essential user authentication flows without requiring extensive setup.

How to Access Customization

To begin customizing your Hosted Pages:

  1. Navigate to Branding > Hosted Pages in your Admin Console
  2. You'll see a preview of your current hosted page template
  3. Click the Edit button to access the customization interface
  4. Make your desired changes using the available customization options
  5. Save your changes when complete

Customization Options

The template editor is organized into two main sections, each containing multiple customization files:

Page Sections

  • Authentication Pages: Customize the login, registration, and forgot password interfaces
  • Profile Pages: Customize the user profile and password reset interfaces

Available Customization Files

Each section contains the following customizable components:

  • HTML: Modify the page structure and layout
  • BeforeScript, CommonScript, EndScript: Add custom JavaScript functionality at different loading stages
  • FavIcon: Update the browser favicon displayed for your pages
  • JQueryScript: Configure the jQuery library version and settings
  • CustomCSS: Style your pages with custom CSS for branding and layout
  • CustomJS: Add additional JavaScript functionality and interactions
  • HeadTags: Insert custom meta tags, analytics scripts, or other head elements

Common Use Cases

Hosted Pages provide extensive flexibility to customize your user interface according to your brand and business requirements. Here are some popular customization examples:

Branding Customizations

  • Add your company logo and update color schemes to match your brand
  • Modify layouts to align with your website's design language
  • Update fonts and typography for consistency with your brand guidelines

Functionality Enhancements

  • Add custom JavaScript logic for enhanced user interactions
  • Integrate analytics tracking using custom head tags
  • Implement custom validation or form behaviors
  • Add third-party integrations like chat widgets or help systems

Technical Customizations

  • Insert meta tags for SEO optimization or social media previews
  • Add custom CSS for responsive design improvements
  • Include external libraries or frameworks as needed

File Management Features

The hosted pages editor includes several helpful features for managing your customizations:

  • Multi-file editing: Work on multiple files simultaneously without deploying each one individually
  • Bulk save functionality: Save all your changes across multiple files at once
  • Reset option: Easily revert changes back to the default template if needed
  • File deletion: Remove individual custom files when they're no longer needed

Deployment Process

After customizing your Hosted Pages, you need to deploy your changes to make them live. Follow these steps:

Deployment Steps

  1. Review your changes: Ensure all customizations are complete and saved
  2. Click Deploy: Select the Deploy button in the editor interface
  3. Confirm changes: Review the list of files that will be updated
  4. Acknowledge the deployment: Check the confirmation box stating "I understand that these changes will overwrite the existing code files"
  5. Complete deployment: Click the Deploy button to finalize the process

Post-Deployment

Once deployment is complete:

  • Your changes will be immediately visible on your live hosted pages
  • The preview panel will update to reflect your new customizations
  • Users accessing your hosted pages will see the updated interface

Important: Deployment will overwrite any existing customizations, so make sure you've saved all desired changes before proceeding.

Next Steps

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