Home  >   Articles   >  Login Page Customization
Articles in this section

Login Page Customization

L
Lavanya R
20 Feb, 2024 - Updated 9 days ago
Table of Contents

Introduction

The Login Page is the screen or page from where you will enter a website, an application, etc. For example, the login page of your email browser or the login page of Facebook. It serves as a gateway, prompting users to provide specific credentials. This usually includes a username and password - to verify their identity and grant access to the application or platform.

Some applications allow you to customize the login page - by changing how it looks, feels, and works. You can add different designs to align them with your company logo and other convenient features or layers of security to enhance the login experience.

Vtiger's Login Page Customization Add-on 

Vtiger’s Login Page Customization Add-on lets you customize the login page of the Vtiger CRM edition you use.
You can:

  • Customize the design to suit your business and identify with your brand by adding your logo, brand colors, etc.​​​
  • Make the login page user-friendly and visually appealing by changing the design elements such as fonts, button styles, background images, or even the layout. These design elements can be added to the CSS styles in the Login Customization Settings page.

Note: Cascading Style Sheets (CSS) is a coding language used to define the presentation and layout of web pages written in HyperText Markup Language (HTML) or eXtensible Markup Language(XML). It enables web developers to control the appearance, formatting, and visual aspects of elements within a web page or a set of web pages.

In the Login Method Settings Page, you can enable social login apps like Facebook, Google, Twitter, and LinkedIn. When you enable them, they will appear on the Login page. You can also enable the two-factor authentication method to allow genuine users to log into your website or system.

Note: Two-factor authentication (2FA) is a security measure that helps to protect user accounts by requiring two different types of identification. This is done to ensure that only authorized individuals can gain access.

You can install the Login Page Customization Add-on from the Extension Store. 

Feature Availability

One Growth

One Pilot

One Professional

One Enterprise

Feature Availability

Login Page Customization

 

Note: The Add-on is available for $5 per month in the One Enterprise edition.
 

Benefits of Using the Login Page Customization Add-on

The following are the benefits of customizing your login page with this Add-on: 

  • Brand Consistency: You can display your brand's visual elements, such as logo, colors, and style, on the login page, ensuring a consistent experience for users.
  • User Engagement: A visually appealing and user-friendly login page can positively impact user engagement, encouraging users to interact more with your platform or application.
  • Differentiation: Customization sets your login page apart from generic or default designs, thus making it memorable and distinct. 

In this article, you will learn about:

  • Installing the Login Page Customization Add-on
  • Customizing the Login Page

Key Terminology

Key Term

Definition

Login Page

The Login page is the screen or page where you will enter a computer interface, program, or website.

Customization

Customization is the process of modifying or tailoring something to meet specific requirements, preferences, or needs.

CSS style

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML.

Social Login Integrations

Social Login integrations allow users to access and sign in to a website, application, or service using their existing social media credentials. 

Settings Page

The Settings Page in Vtiger CRM is a centralized location where users or administrators can configure various aspects of the CRM to align with their preferences, organizational needs, or specific requirements.

 

Installing Login Page Customization Add-on

The Login Page Customization is available as an Add-on in Vtiger CRM. You can install it from the Extension Store.

Follow these steps to install the Login Page Customization Add-on:

  1. Log in to the CRM.
  1. Click on the User Profile in the top right corner of the screen.
  2. Click Settings.
  1. Go to Extensions.
  2. Click Add-ons. The Add-on page opens.
  1. Type Login Page Customization in the Search bar.
  2. Click Try for 15 days. The ‘Are you sure you want to install/upgrade this Addon?’ message window pops up.
  1. Click Yes.
A success message will be displayed if the installation is successful. Once installed, the Add-on will appear on the User Management Settings page.
 

Customizing the Login Page

Once the Login Page Customization Add-on is installed, you can go to the Settings page and find it under the User Management section.

Follow these steps to customize the Login Page:

  1. Log in to the CRM.
  2. Click the User Profile on the top right corner of the screen.
  3. Click Settings
 
  1. Type Login Page in the Search bar. 
  2. Click Login Page Customization under the User Management section. The Login Page Settings page opens.
    1. Enable the Customized Login page checkbox.

Note: If the Customized Login Page is not enabled, the changes will not reflect on the login page.

  1. Upload the Background Image from your local folder.
  2. Go to the Add CSS Styles field and add the CSS styles.
  3. Click Save.

Adding Social Media Apps to the Login Page

In the Login Method Settings Page, you can enable social login apps like Facebook, Google, Twitter, and LinkedIn.

Follow these steps to add Social Media apps:

  1. Log in to the CRM.
  2. Click the User Profile on the top right corner of the screen.
  3. Click Settings.
 
  1. Select Authentication under User Management. The Login Method Settings page opens.
 
  1. Click the Edit icon.
 
  1. Enable the checkbox against the social media app you want it to appear on the Login page.
  2. Click Save.

The enabled social media app will appear on the Login page.

Setting up 2-factor Authentication

To keep your accounts more secure, you can enable two-factor authentication. 

Follow these steps to set up 2-factor authentication:

  1. Log in to the CRM.
  2. Click the User Profile on the top right corner of the screen.
  3. Click Settings.
 
  1. Select Authentication under User Management. The Login Method Settings page opens.
  1. Click the Edit icon.

  1. Enable the Two Factor Authentication checkbox.
  2. Click Save.


OTP Login Add-on

You can create a login for CRM users with OTP authentication using the OTP -Login Add-on in Vtiger Marketplace.

Users in your organization can log in to the CRM with a one-time password that will be sent to their phones via an SMS message when they log in. 

Note:

  • The SMS will be sent to the number in the User Phone Number field in the User record.
  • When the User Phone Number is added for a user, a verification code will be sent, which should be submitted back to CRM to confirm ownership of the number.


Limitations

  • Only admin users can customize the login page of Vtiger CRM. 
  • Image Limitations
    • The following are the limits for uploading a background image for the login screen:
      • Recommended formats of the image - JPEG, JPG, PNG, GIF, PJPEG, X-PNG
      • The recommended size of the image - is 150*40 px, 170*60 px
      • Maximum file size allowed - 1 MB

References
User Management - Authentication
User Management - Login History

Was this article helpful?
0  out of  0  found this helpful.
Comments 0
Be the first to comment
© Copyright 2023 Vtiger. All rights reserved.