Sign In Pages
  • 14 Dec 2022
  • 7 Minutes to read
  • Dark
    Light

Sign In Pages

  • Dark
    Light

Article Summary

The following sections will demonstrate how to edit your sign in pages. LightSpeed VT will provide an already built Sign In Page for you – this admin area is designed to allow you to make any minor (or major) updates that you may see fit – small edits such as phone or email changes – to large edits like the color scheme. Read on below for more details.

To get started, navigate to the Super User Dashboard and under “101 System Management”, select “Sign In Pages”.

You will be presented with a screen that contains all of your sign in pages (typically you will only have 1 – but if you have more they will be located here.)

To preview the sign in page, click on the “Subdomain” section and it will open a new window for you to preview.

To edit your sign in page, on the right click “Edit Site”.

201906signinmanagement01selectsite-1024x434.png

Basic Info

Settings

Once you begin editing your site, you will see the following options:

  1. Name
    • This is the name of your sign in page, it will be displayed above the “Username” input field if a welcome message has not be specified.
  2. Page Name
    • This is the name that will appear on the Title of the site (in the browser) and also in the admin area so you can easily identify it
  3. Sub Domain
    • This is the domain where your users will login. This field is read-only, if you need to update or change it, please contact LSVT Client Care. Note: Creation of the Sub Domain may take up to 1 hour.
  4. Account
    • Your account is a home for your collection of Systems, and within those Systems your different themes. It is basically the Parent of the bunch. This tells us if your username is located within a system residing in this account, you will have access to this sign in page.
  5. Allowed Systems
    • This option allows you to specify what systems can use this sign in page.
  6. Active
    • This toggle switch allows you to activate and deactivate the sign in page.
  7. Show Social Media Sign In Integrations
    • If you would like your users to be able to use Google, Facebook, Twitter, or LinkedIn credentials to sign in to LightSpeed, you should enable this option. As long as the email address on their social account matches the one entered in LightSpeed, they will be able to login with it.
  8. Show Terms of Service
    • This is optional if you’d like us to turn on a generic terms of service link. (Typically the user has already agreed to the terms of service before they arrive at this point, so we included the option to hide it.)
  9. Show Privacy Policy
    • This is similar to #5, it is an optional toggle.
  10. Active
    • This is just an easy toggle to turn the page on or off
  11. Details
    • This will allow you to see who created the site and who was the last to update it.


202109signin-page-management-1024x873.pngA comparison to help show which settings control the various areas of the Sign In Page

 Metadata

We added a Metadata section so you could input your own keywords and description if desired for better SEO.

  1. Keywords
    • Enter any amount of keywords for your site here, separated by a comma.
  2. Description
    • Enter a standard definition for your site, typically this is what will be displayed by a search engine if it’s found through that medium.

Google Analytics

You can now enter your Google Analytics ID or Tag Manager ID to begin using Google Analytics tracking.

  1. Google Analytics ID
  2. Google Tag Manager ID

Details

This section gives you details about the sign in page, such as when it was created and when it was last updated.

Page Design

The Page Design section is where you can apply your branding to the sign in page. This section is broken down into three subsections General, Styles and Custom CSS .

General

The general subsection is where you can upload your logo and background image (We suggest your background image be 3000x2000 px - so it will scale properly for large displays and small). You can also provide a logo link, which is the URL that users will go to when they click on the logo.

201906signInpageDesigngeneral-1024x511.png

Styles

The styles subsection is where you can add your colors to the sign in form.

201906signInstyles-1024x542.png

Main

  1. Header Background Color
    • This color is set using an RGBA value. You can use the color picker to choose it, or you can enter the value manually. The 4th number in the list controls whether or not the background section is transparent or visible. (1 for visible, 0 for transparent). Setting this to 0 will cause the bar to disappear and the rest of the background image will be viewable.
  2. Form Color
    • This is the main color of the form itself.
  3. Text Color
    • This is the main color for the text found on the main section of the page – everywhere you see neon green (in our example) is where this is controlled.
  4. Link Color
    • Anywhere there is an HTML or navigation link on the page, it is controlled by this setting.
  5. Error Color
    • The Error Color (not shown in the screenshot) will change the color of the Username and Password fields if the user enters incorrect data.
  6. Footer Color
    • This controls the color of the Secure Server link and LightSpeed VT Logo – you can adjust this as necessary to contrast and stand out from your background image.

Form Fields

  1. Background Color
    • This will set the background color of the Username and Password fields – the color only appears when the user clicks on it to activate the field and enter their information.
  2. Text Color
    • If the user is entering correct information, the text will stay this color – as well as the underline you see below it in the screenshot. If there is an error, the text will change color to the setting below.
  3. Error Text Color
    • If the user tries to submit invalid information, the sign in page will report an error. When the user returns to the field that has an error, the text color will change and use this setting (it is portrayed as YELLOW text in the screenshot below).

Buttons

  1. Background Color
    • This field will set the background color of the button to what ever color you specify. The button will change to the color that you choose when the mouse cursor is hovering over it. This also controls the outline color of the Social Share buttons.
  2. Text Color
    • This is the color that the text will CHANGE to once you hover over the button.

Custom Css

This is where you can apply custom css to the sign in page.

Content

The Content section covers the images and custom text you can modify on your sign in page. Below are some detailed descriptions as well as some screenshots similar to above showing what section affects which area of the sign in page.

Sign In

  1. Welcome Message
    • This text appears above the sign in area, you can customize it to how you see fit, a good default for this is something like, “Please enter your username and password below to sign in.” If you leave it blank, a default sentence will be used like the one in our example screenshot: Sign in with your Acme Black Account.

Forgot Password

  1. Hide Retrieve Password
    • Lets you hide the “Retrieve Password” link
  2. Retrieve Password Message
    • This is the message at the top of the form when the user clicked “Forgot Password”
  3. Call to Action (Link Name)
    • This is the text used for the link, if left blank, the link will read “Forgot Password?”

Need Help

The Need Help section can be found by clicking on the “Need Help?” link on the main sign in page. The only two required fields here are the Message and the Email fields – if the rest are left blank they simply will not appear.

201906needHelp-684x1024.png

201906needHelp2-1024x400.png

  1. Support Message
    • You can use this section to enter important information about your support hours or.
  2. Support Page
    • Here you can enter a link to your support site.
  3. Email
    • Enter your Support email address here.
  4. Phone
    • Enter your Support phone number here.
  5. Call to Action (Link Name)
    • This is the text that will displayed as the link to the Need Help section. If left blank, the default text will read “Need Help?”

Need Account

201906needAccount-1024x503.png

  1. Show Join Link
    • This toggle switch lets you show or hide the “Join Now” link.
  2. Join Link Name
    • This is where you specify the name of the link. If left blank, the default name will be “Join Now”.
  3. Join Link URL
    • This is where you can provide a link to your website, LSVT checkout page.

Text

This section allows you to change any text on the sign in page, such as Username, Password, Sign In etc…

201906text-1024x594.png

Email Settings

Retrieve Password Settings

  1. Email Template Theme
    • This will allow you to pick a theme from your system.
  2. From Email
    • The email will be sent from this email address. Typically you will want to use a REAL email address, rather than something that does not exist, as email spam filters tend to block those out.
  3. Email Subject
    • Enter what the email subject will be – something like, “The information you have requested” or “Your Login Information”
  4. Email Top Copy
    • This is the email body, if left blank the default text will read “Please note your account information below!”. The username and password is automatically placed below the text in the Email Top Copy.
  5. Email Bottom Copy
    • You can enter anything here, typically some sort of signature or link back to your website or support site.

Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.