- 07 Nov 2022
- 4 Minutes to read
- Print
- DarkLight
Sign In Widget Implementation
- Updated on 07 Nov 2022
- 4 Minutes to read
- Print
- DarkLight
An embedded version of our sign in form is available for a more seamless implementation between your applications and LightSpeed VT.
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.
Advanced Implementation
Several customization options are available by using additional parameters in the widget script URL (All are optional).
help=0|1
– Hide/Show Need Help? link at bottom of form:
The default is1
(Show)help_btn_show=0|1
– Hide/Show the custom “Call To Action” button on the help screen:
The default is0
(Hide)dest=https://vt.lightspeedvt.com/trainingCenter/
– Redirects to a different page/URL than the default sign-in landing page:
The default is Main Menuthemer_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.
/* ============================================= *\
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";
}
/* ============================================= *\
*** 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 {
}