This widget is created specifically for easy installation on any page and does not require any additional dependencies. It bases on usual HTML, js, and CSS installed in all modern browsers. The initialization of the widget is in the background and does not appear at the page load speed. User email validation based on default HTML5 email validation.
Insert this code anywhere on the page, where you want to display the widget:
<div class="jlc-wrapper"></div>Get jlcwidget.css and jlcwidget.js files in the dist folder and put it in your template folder on the server.
Replace PATH_TO_TEMPLATE in the example below with your theme template path and insert it after <head> and before </body> tag anywhere in your theme template.
<script async src="PATH_TO_TEMPLATE/jlcwidget.js"></script>
<link rel="stylesheet" href="PATH_TO_TEMPLATE/jlcwidget.css" media="none" onload="if(media!='all')media='all'">You can add the following attributes to <div class="jlc-wrapper"></div> to redefine localization and target platform:
data-text- main button labeldata-tx-success- success textdata-tx-error- error textdata-tx-exist- text displayed if the provided email address is already registered on the platformdata-tx-exist-linked- label for the sign in link for the already existing userdata-key- hoster domaindata-terms- (true/false) enable terms and privacy checkbox under formdata-terms-link- link to Terms of Use pagedata-privacy-link- liink to Privacy Policy page
<div class="jlc-wrapper" data-tx-exist="This email is already registered.<br>Please " data-tx-exist-linked="sign in to access" data-text="GET STARTED NOW" data-tx-success="CHECK YOUR EMAIL" data-tx-error="An error has occurred, please try again later" data-key="jelastichosting.nl" data-terms="true" data-terms-link="//example.com/" data-privacy-link="//example.com/"></div>The default localization and hoster domain values are defined in the "main variables" section of the assets/js/jlcwidget.js file:
const jlc_button_text = wrapper.getAttribute('data-text') || 'GET STARTED FOR FREE';
var jlc_text_error = wrapper.getAttribute('data-tx-error') || 'An error has occurred, please try again later',
jlc_text_exist = wrapper.getAttribute('data-tx-exist') || 'This email is already registered.<br>Please ',
jlc_text_exist_linked = wrapper.getAttribute('data-tx-exist-linked') || 'sign in to access',
jlc_text_success = wrapper.getAttribute('data-tx-success') || 'CHECK YOUR EMAIL',
jlc_hoster_domain = wrapper.getAttribute('data-key') || 'jelastichosting.nl';You can customize this widget with a build system based on Gulp with SCSS preprocessor.
- CSS Autoprefixing
- Built-in preview server with BrowserSync
- Compile Sass with libsass
- Lint and minifyscripts
- Image optimization
Requires Node.js v6+ and Gulp v4+ to run.
- Install Gulp:
npm install gulp --global - Clone localy
git clone https://github.com/jelastic/jelastic-widget.git - Go to project folder
cd jelastic-widget - Install dependencies
npm install -d - Run
gulp serveto start the server and watch for changes - Run
gulp defaultto build for production environments
You can change CSS in the assets/css/jlcwidget.scss file, for example default variables:
$color-blue : #0088fb; // default color (blue)
$color-green : #00bea7; // default color for green button
$color-gray : #efefef;
$color-medium : #6b758a;
$color-dark : #5e6981;
$color-red : red; // default error color
$color-exist: #ff7700;
$color-default: $color-blue;
$color-link: $color-blue;
$bdrs: 10px; // button border radius
$width: 270px; // default button size
$height: 65px;
$font-family: 'Open Sans', sans-serif;After the build, you will have the following files in the dist folder:
index.htmlexample with widget initialization selectorjlcwidget.jsminified JavaScriptjlcwidget.cssminified CSS
For the best performance all images saved in the SVG format, optimized with svgomg service and included to the CSS/SCSS with BASE64 technology via base64encode.org.
Non converted images you can find in assets/img/ folder.