Virtuozzo Hybrid Cloud Registration Widget is an interactive tool for automated registration. It is based on the standard HTML, JS, and CSS technologies supported by all modern browsers, which ensures easy installation on any page without any additional requirements. Also, the initialization is performed in the background and does not affect the page loading speed.
Widget addition to your site can be accomplished in a few simple steps:
-
All the required scripts and styles for the hybrid cloud registration widget are stored in the dedicated
vhc-signupdirectory. You can get this folder from this repository. For example, with the following command:git clone https://github.com/virtuozzo/vhc-registration-widget
Tip: If you want to customize the widget appearance, refer to the linked section and adjust files within the directory based on your needs.
-
Add the
vhc-signupfolder downloaded in the previous step to your site's root folder. Next, insert the following lines between the<head>and</body>tags for each page with the registration widget:<script src="{siteUrl}/vhc-signup/js/plugins/jquery-3.7.1.min.js"></script> <script src="{siteUrl}/vhc-signup/js/vhc-signup-widget.min.js"></script> <link rel="stylesheet" href="{siteUrl}/vhc-signup/css/vhc-signup-widget.min.css">
Don’t forget to correctly substitute the {siteUrl} placeholder.
-
Now, insert the following block at the position where the widget should be displayed:
<div class=“vhc-signup-widget” data-key=“{distributor_key}“></div>
Replace the {distributor_key} placeholder with a
preKeyvalue from the distributors page.
The default ready-to-work hybrid cloud signup widget looks as follows:
If needed, the widget can be fully customized to match your particular needs and unique branding. The project is built based on the Gulp with SCSS preprocessor, which provides access to the following features:
- compile sass with libsass
- lint and minify scripts
- image optimization
In order to perform customization to the project, you’ll need a Node.js server version 6 or higher.
-
Install the Gulp utility with the following command:
npm install gulp --global
-
Next, if you haven't before, clone the widget repository.
git clone https://github.com/virtuozzo/vhc-registration-widget
-
Move inside the project folder and install dependencies.
cd vhc-registration-widget npm install -d -
Start a server with the
gulpcommand to preview changes.gulp
-
You can change CSS in the assets/scss/*.scss file. For example, try adjusting the following default variables:
$tablet: 992px; $mobile: 768px; $extraSmall: 475px; $mainColor: #cb333b; $hoverColor: #9B2637;
-
Once you are satisfied with the results, build the production environment.
gulp default
In a moment, you will have the following files in the vhc-signup folder:
- index.html - example with widget initialization selector
- vhc-signup-widget.min.js - minified JavaScript
- vhc-signup-widget.min.css - minified CSS
Use these files instead of the default ones during the widget addition to your website page.
-
Additionally, for the best performance, some images are saved in the SVG format. Non-converted images can be located in the assets/img/ folder.
Now, you have all the required information to customize (if needed) and integrate the Virtuozzo Hybrid Cloud Registration Widget into your website.