Sign In Widget Implementation
  • 07 Nov 2022
  • 4 Minutes to read
  • Dark
    Light

Sign In Widget Implementation

  • Dark
    Light

Article Summary

An embedded version of our sign in form is available for a more seamless implementation between your applications and LightSpeed VT.

A very basic understanding of HTML/CSS/JS is needed to implement the widget.
In order to use this option, you will need the ability to edit the page to which the sign-in widget will be added. For advanced customization of the widget, you will also need to have access to your website CSS code.

Basic Implementation

The widget code is one line of Javascript that must be added to the HTML code of your page.

Example:

<div id="LSVTLoginForm">
<script
src="https://webservices.lightspeedvt.net/login_widget/snippet.aspx?v=v1&a=1234"></script>
</div>

It needs to be added anywhere between the opening and closing body tags (<body> </body>)

The script will reach our servers and retrieve the code to display the form on your page, as shown below:

The account ID parameter (a=1234) is the only required parameter needed for the basic implementation.

Please reach out to your LSVT account rep to obtain your account ID

Advanced Implementation

Several customization options are available by using additional parameters in the widget script URL (All are optional).

The below parameters can be automatically generated by using our configurator screen available in your API panel.

  • help=0|1 – Hide/Show Need Help? link at bottom of form:
    The default is 1 (Show)
  • help_btn_show=0|1 – Hide/Show the custom “Call To Action” button on the help screen:
    The default is 0 (Hide)
  • dest=https://vt.lightspeedvt.com/trainingCenter/ – Redirects to a different page/URL than the default sign-in landing page:
    The default is Main Menu
  • themer_loc=12345 – Retrieves the colors/styles of the specified location and applies to the form:
    The default is the main system colors and styles

Javascript

An additional few lines of javascript code are needed to customize the message displayed on the Help screen. This can be added anywhere within the <body> </body> tags:

<script>
       window.onload = function ()
       {
           LsvtLoginForm.setNeedHelpMessage('Do you need help?</br></br><a target="_blank" href="https://www.lightspeedvt.com/">Contact Us here</a> <b></br></br>We\'ll make sure you get the help you deserve</b>!');
           LsvtLoginForm.setNeedHelpUrl('https://www.lightspeedvt.com/');
       }
   </script>

The html within LsvtLoginForm.setNeedHelpMessage will provide the copy to be displayed and will accept basic html code for formatting.

The URL within LsvtLoginForm.setNeedHelpUrl will provide the link for the Click To Action button.

Custom CSS

Finally, for even more advanced customization, all field labels can be reworded and elements can be styled by using a custom CSS file.

The CSS styles can be added within the <style> </style> tags or loaded from an external custom CSS file.

Download Example Labels CSS

/* ============================================= *\    
    Content for replaceable labels or messages
\* ============================================= */

:root {
    /* --------------------------------------------- *\
    "Login" Page
    \* --------------------------------------------- */

    /* Error Message */
    --lslf__login_error_message: "Username or Password are not recognized. Please try again or contact support at 1-800-439-5788.";

    /* Username Input - Label */
    --lslf__field_user-name_label: "Username";

    /* Password Input - Label */
    --lslf__field_password_label: "Password";

    /* Sign-In Button Text Label */
    --lslf__btn_sign-in_label: "Sign In";

    /* Forgot Password Link Label */
    --lslf__login_btn_forgot-password_label: "Forgot Password";

    /* Need Help Link Label */
    --lslf__login_btn_need-help_label: "Need Help?";

    /* --------------------------------------------- *\
    "Forgot Password" Page
    \* --------------------------------------------- */

    /* Message */
    --lslf__forgot-password_message: "No worries, we all forget passwords sometimes. Enter your email address below and we'll send instructions on how to reset it";

    /* Error Message */
    /* NOTE: this is not intended to be controlled via CSS variables */
    /* --lslf__forgot-password_error_message: "Some Error Text updated dynamically"; */

    /* Password Sent Confirmation Message */
    --lslf__succsess_message: "Password Reset request has been sent. Check your email soon.";

    /* Email Input - Label */
    --lslf__field_email_label: "Email Address";

    /* Submit Button Text Label */
    --lslf__btn_submit-forgot-password_label: "Submit";

    /* Return to Sign-In Link Label */
    --lslf__forgot-password_btn_back_label: "Return to Sign In";

    /* Need Help Link Label */
    --lslf__forgot-password_btn_need-help_label: "Need Help?";

    /* --------------------------------------------- *\
    "Need Help" Page
    \* --------------------------------------------- */

    /* Custom Headline */
    --lslf__need-help_headline: "Need Help?";

    /* Custom Message */
    /* --lslf__need-help_message: "Help Message"; */

    /* Return to Sign-In Link Label */
    --lslf__need-help_btn_back_label: "Return to Sign In";

    /* Custom CTA Button Text Label */
    --lslf__need-help_btn_custom-cta_label: "Click For Help";
}

Download Sample Custom CSS

/* ============================================= *\ 
  *** Selectors for all the widget elements ***
\* ============================================= */

/* --------------------------------------------- *\
  Widget
\* --------------------------------------------- */

/* Wrapper */
#lslf__login-widget {
}

/* --------------------------------------------- *\
  "Login" Page
\* --------------------------------------------- */

/* Wrapper */
#lslf__v_login {
}

/* Form */
#lslf__form_login {
}

/* Error Message */
#lslf__login_error_message {
}

/* Username Input - Field */
#lslf__field_user-name {
}

/* Username Input - Label */
#lslf__field_user-name_label {
}

/* Password Input - Field */
#lslf__field_password {
}

/* Password Input - Label */
#lslf__field_password_label {
}

/* Sign-In Button */
#lslf__btn_sign-in {
}

/* Sign-In Button Text Label */
#lslf__btn_sign-in_label {
}

/* Forgot Password Link */
#lslf__login_btn_forgot-password {
}

/* Forgot Password Link Label */
#lslf__login_btn_forgot-password_label {
}

/* Need Help Link */
#lslf__login_btn_need-help {
}

/* Need Help Link Label */
#lslf__login_btn_need-help_label {
}

/* --------------------------------------------- *\
  "Forgot Password" Page
\* --------------------------------------------- */

/* Wrapper */
#lslf__v_forgot-password {
}

/* Form */
#lslf__form_forgot-password {
}

/* Error Message */
#lslf__forgot-password_error_message {
}

/* Message */
#lslf__form_forgot-password_message {
}

/* Email Input - Field */
#lslf__field_email {
}

/* Email Input - Label */
#lslf__field_email_label {
}

/* Submit Button */
#lslf__btn_submit-forgot-password {
}

/* Submit Button Text Label */
#lslf__btn_lslf__btn_submit-forgot-password_label {
}

/* Return to Sign-In Link */
#lslf__forgot-password_btn_back {
}

/* Return to Sign-In Link Label */
#lslf__forgot-password_btn_back_label {
}

/* Need Help Link */
#lslf__forgot-password_btn_need-help {
}

/* Need Help Link Label */
#lslf__forgot-password_btn_need-help_label {
}

/* --------------------------------------------- *\
  "Need Help" Page
\* --------------------------------------------- */

/* Wrapper */
#lslf__v_need-help {
}

/* Custom Headline */
#lslf__need-help_headline {
}

/* Custom Message */
#lslf__need-help_message {
}

/* Return to Sign-In Link */
#lslf__need-help_btn_back {
}

/* Return to Sign-In Link Label */
#lslf__need-help_btn_back_label {
}

/* Custom CTA Button */
#lslf__need-help_btn_custom-cta {
}

/* Custom CTA Button Text Label */
#lslf__need-help_btn_custom-cta_label {
}

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.