Articles in this section
Login Page Customization
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
|
|
|
| |
| ||||
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
|
|
Installing Login Page Customization Add-on
Follow these steps to install the Login Page Customization Add-on:
- Log in to the CRM.

- Click on the User Profile in the top right corner of the screen.
- Click Settings.

- Go to Extensions.
- Click Add-ons. The Add-on page opens.

- Type Login Page Customization in the Search bar.
- Click Try for 15 days. The ‘Are you sure you want to install/upgrade this Addon?’ message window pops up.

- Click Yes.
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:
- Log in to the CRM.
- Click the User Profile on the top right corner of the screen.
- Click Settings.


- Type Login Page in the Search bar.
- Click Login Page Customization under the User Management section. The Login Page Settings page opens.
- Enable the Customized Login page checkbox.
Note: If the Customized Login Page is not enabled, the changes will not reflect on the login page.
- Upload the Background Image from your local folder.
- Go to the Add CSS Styles field and add the CSS styles.
- 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:
- Log in to the CRM.
- Click the User Profile on the top right corner of the screen.
- Click Settings.

- Select Authentication under User Management. The Login Method Settings page opens.

- Click the Edit icon.

- Enable the checkbox against the social media app you want it to appear on the Login page.
- 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:
- Log in to the CRM.
- Click the User Profile on the top right corner of the screen.
- Click Settings.

- Select Authentication under User Management. The Login Method Settings page opens.

-
Click the Edit icon.
- Enable the Two Factor Authentication checkbox.
- 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
- The following are the limits for uploading a background image for the login screen: