Submit a request Sign In
  • Logout
    Home  >   Articles   >  Login Page Customization
    Articles in this section
    Authenticate Emails with SPF, DKIM, and SenderID Auto forward your emails to Vtiger Automate Outgoing Emails in Email Settings Managing User Profiles Automation - Approvals Setting up User Roles Automation - Assignment Rules Set up Multi-path Workflows Creating a Scheduled Workflow Automation - Scheduler Creating a Workflow Webforms in Vtiger CRM Set up a Workflow Action to Create Event Set up a Workflow Action to Create Records Set up a Workflow Action to Create Task Set up a Workflow Action to Invoke Custom Function Set up a Workflow Action to Create an SMS Task Set up a Workflow Action to Send Mails Set up a Workflow Action to Update Fields Automation - Workflow Action - Webhook Automation - Workflows - Vtiger Expressions Configuration - Business Hours Configuration - Company Details Configuration - Consents Configuration - Customer Portal Maps in Vtiger CRM Configuration - Usage Details Configuring Encrypted Data Fields in Vtiger CRM Configure Picklist Dependencies Considerations for Deactivating Vtiger Users Control Fields and Record Displays using Configuration Editor Create Reminders for Records and Inbox Create a field of a Grid type Dealing with Currencies and Taxes Enable Desktop Notifications on Chrome Web Browsers Vtiger CRM Add-ons IMAP Configuration - 2-way sync between Vtiger and IMAP providers Setting up Autopay & Payment Gateways Inventory - Tax Management Inventory - Terms and Conditions Login to Vtiger on SSO SAML using ADFS Mailroom Functionality for Different Scenarios Manage Multiple Currencies Marketing and Sales - Deal to Project Mapping Marketing and Sales - Lead Conversion Data Mapping Marketing and Sales - Profile Scoring Module Management - Labels Editor Module Management - Module Numbering My Preferences My Preferences - Calendar Settings Tags in Vtiger My Preferences - Notification Preferences SAML Support in Vtiger CRM Set up Mailroom Settings - Configure Module Settings Settings - Create Dynamic Fields and Layouts Module Management - Creating a Relationship Between Modules Settings - Customize Records and Fields for your Business Settings - How to set email autoresponder to Webform submission? Settings - Left Menu Settings - Manage Global Picklists in Vtiger Settings - Set up your Support Team Settings - Start Up Page Settings - Working with Picklist Values Module Management - Module Builder Support - SLA Policies Troubleshooting Login Issues Add-Edit Unsubscribe Links in your Email Template User Management - Authentication User Management - Encrypted Field Access Logs User Management - Groups User Management - Login History User Management - Profiles User Management - Roles User Management - Settings Log User Management - Sharing Rules User Management - Users User Management - Vtiger Support Access Vtiger Buzz - Chrome Extension for Notifications Vtiger Implementation wizard Vtiger Language Support Configuring Websense Trackers Websense - Widgets Auto forward Emails from Microsoft Office 365 Configuration - Storage Guard Customizing your Self-Service Portal Theme Using CSS Styles Adding Hidden Fields to a Webform Creating App-specific Password for Gmail Outgoing Server Module Management - Module Layouts & Fields Settings - Personalize Module Layouts Module Management - Modules Adding Custom Module Automation - SMS Reply Actions Duplicate Prevention in Modules Configuring Dependent Fields and Blocks for Modules Formula Fields Creating Custom Filters Adding a local DNS Entry

    Login Page Customization

    L
    Lavanya R
    20 Feb, 2024 - Updated 2 months 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
    Home
    Privacy Policy
    Terms of Service
    Security Center
    Policy & Legal Center
    Contact Us
    © Copyright 2023 Vtiger. All rights reserved.
    Powered by Vtiger