Docs menu
MENU

Pricing Calculator Widget

Pricing Calculator widget is an interactive tool that estimates the environment cost based on the configured topology. It is based on the standard HTML, js, and CSS technologies supported by all modern browsers, which ensures easy installation on any page. Also, the initialization is performed in the background and does not affect the page loading speed.

Note: The only additional tool required for the correct work of the widget is the jQuery JavaScript library (not slim version).

Widget addition to your site can be accomplished in a few simple steps:

1. All the required scripts and styles for the pricing calculator widget are stored in the dedicated j-calculator directory. You can get this folder from the appropriate repository. For example, with the following command:

1

git clone https://github.com/jelastic/jelastic-calculator-widget.git
Tip: If you want to customize the widget appearance, refer to the linked section and adjust files within the directory up to your needs.

2. Add the j-calculator folder downloaded in the previous step to your site’s ROOT folder and insert the following lines between the and tags of the required page:

1
2
3

<script src="{siteUrl}/j-calculator/3dparty/ejs.js"></script>
<script src="{siteUrl}/j-calculator/j-calculator.min.js"></script>
<link rel="stylesheet" href="{siteUrl}/j-calculator/j-calculator.min.css">

Don’t forget to correctly substitute your {siteUrl} placeholder.

3. Now, insert the following block at the position the widget should be displayed at:

1

<div class="j-calculator" data-key="app.{hoster_domain}"></div>

IMPORTANT: The data-key parameter allows displaying pricing for your specific platform only. If skipped, a platform selector list will be displayed.

The default ready-to-work pricing calculator widget looks as follows:

PaaS pricing widget

If needed, you can adjust the widget by tuning predefined ranges and values, changing localization, or customize the whole widget by adjusting its source code.

Customize Widget Parameters

The widget is provided with multiple out-of-box arguments that allow you to customize resource ranges and the default values (i.e. the state of parameters right after the widget is loaded) up to your needs.

ParameterDescriptionExample Value
data-languagesA comma-separated string of the programming languages displayed within the widget.java, php, node, python, go, ruby
data-keyDefine this parameter to show prices for the particular hosting provider only. Otherwise, a platform selector list will be displayed.app.{hoster_domain}
data-storageThe default amount of disk space for the environment per hour in GB (in the 0-99999 range). 10 if not specified.{number}
data-ipThe default number of external IP addresses for the environment (in the 0-10 range). 1 if not specified.{number}
data-trafficThe default amount of external traffic for the environment per hour in GB (in the 0-99999 range). 10 if not specified.{number}
data-balancer-nodesThe number of the load balancer nodes enabled by default (in the 0-99 range). 0 if not specified.{number}
data-balancer-minThe minimum cloudlets consumption per load balancer. 0 if not specified.{number}
data-balancer-maxThe maximum cloudlets consumption per load balancer. 128 if not specified.{number}
data-balancer-reservedThe default number of fixed (reserved) cloudlets per load balancer. 0 if not specified.{number}
data-balancer-scalingThe default number of flexible (dynamic) cloudlets per load balancer. 0 if not specified.{number}
data-appserver-nodesThe number of application servers enabled by default (in the 0-99 range). 1 if not specified.{number}
data-appserver-minThe minimum cloudlets consumption per application server. 0 if not specified.{number}
data-appserver-maxThe maximum cloudlets consumption per application server. 128 if not specified.{number}
data-appserver-reservedThe default number of fixed (reserved) cloudlets per application server. 1 if not specified.{number}
data-appserver-scalingThe default number of flexible (dynamic) cloudlets per application server. 64 if not specified.{number}
data-database-nodesThe number of the database nodes enabled by default (in the 0-99 range). 0 if not specified.{number}
data-database-minThe minimum cloudlets consumption per database. 0 if not specified.{number}
data-database-maxThe maximum cloudlets consumption per database. 128 if not specified.{number}
data-database-reservedThe default number of fixed (reserved) cloudlets per database. 0 if not specified.{number}
data-database-scalingThe default number of flexible (dynamic) cloudlets per database. 0 if not specified.{number}
data-periodThe default period (hourly/monthly) for the price estimation. Hourly if not specified.hourly/monthly
data-currenciesA comma-separated list of the currencies that can be selected in the widget. All currencies are displayed if the parameter is not specified.USD,EUR,INR
data-start-currencyA code of the currency that should be displayed by default. USD if not specified.USD / INR / EUR / etc.
data-price-separatorA decimal separator for the prices used in the widget. “.” if not specified.,

These properties can be provided in the following way:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="j-calculator"
    data-languages="php, node"
    data-key="app.{hoster_domain}"
    data-storage="25"
    data-ip="2"
    data-traffic="25"
    data-balancer-nodes="0"
    data-balancer-min="10"
    data-balancer-max="512"
    data-balancer-reserved="80"
    data-balancer-scaling="256"
    data-appserver-nodes="1"
    data-appserver-min="10"
    data-appserver-max="256"
    data-appserver-reserved="50"
    data-appserver-scaling="200"
    data-database-nodes="0"
    data-database-min="128"
    data-database-max="256"
    data-database-reserved="200"
    data-database-scaling="210"
    data-period="monthly"
    data-currencies="USD,EUR"
    data-start-currency="EUR"
    data-price-separator="," 
></div>

Customize Widget Localization

PaaS implementation of the pricing widget is provided with a complete set of the localization parameters to easily adjust any required text up to your particular need. Also, it is possible to change the widget language altogether by replacing all of the settings below:

ParameterDefault Value (English Localization)
data-appserver-txApp Server
data-balancer-txBalancer
data-db-txDatabase
data-disk-tooltip-txAmount of disk space consumed per hour. While checking per month price, the calculator considers that you use the stated number of GB every hour during the whole period. The platform will count only consumed resources on hourly basis, so the total price can be lower.
data-disk-txDisk Space<span class=“small”>GB / hour</span>
data-hourly-txPer Hour
data-ip-txPublic IP
data-monthly-txPer Month
data-price-max-descr-txif all resources are fully used up to Scaling Limit
data-price-max-txMaximum Price
data-price-min-txStarting Price
data-reserved-cloudlets-txReserved Cloudlets
data-reserved-tooltip-txReserve the cloudlets to pay a fixed price. The more you reserve, the bigger the discount is!
data-reserved-txReserved
data-scaling-limit-txScaling Limit
data-scaling-tooltip-txDefine the maximum amount of resources for automatic vertical scaling based on load changes
data-total-txTotal Cloudlets
data-traffic-tooltip-txAmount of external traffic consumed per hour. While checking per month price, the calculator considers that you use the stated number of GB every hour during the whole period. The platform will count only consumed resources on hourly basis, so the total price can be lower.
data-traffic-txExternal TrafficGB / hour
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="j-calculator"
   data-appserver-tx="App Server"
   data-balancer-tx="Balancer"
   data-db-tx="Database"
   data-disk-tooltip-tx="Amount of disk space consumed per hour. While checking per month price, the calculator considers that you use the stated number of GB every hour during the whole period. The platform will count only consumed resources on hourly basis, so the total price can be lower."
   data-disk-tx="Disk Space<span class="small">GB / hour</span>"
   data-hourly-tx="Per Hour"
   data-ip-tx="Public IP"
   data-monthly-tx="Per Month"
   data-price-max-descr-tx="if all resources are fully used up to Scaling Limit"
   data-price-max-tx="Maximum Price"
   data-price-min-tx="Starting Price"
   data-reserved-cloudlets-tx="Reserved Cloudlets"
   data-reserved-tooltip-tx="Reserve the cloudlets to pay a fixed price. The more you reserve, the bigger the discount is!"
   data-reserved-tx="Reserved"
   data-scaling-limit-tx="Scaling Limit"
   data-scaling-tooltip-tx="Define the maximum amount of resources for automatic vertical scaling based on load changes"
   data-total-tx="Total Cloudlets"
   data-traffic-tooltip-tx="Amount of external traffic consumed per hour. While checking per month price, the calculator considers that you use the stated number of GB every hour during the whole period. The platform will count only consumed resources on hourly basis, so the total price can be lower."
   data-traffic-tx="External Traffic<span class="small">GB / hour</span>"
></div>

Customize Widget Layout

If needed, the widget can be fully customized to match your particular needs and brand look. The project is built based on the Gulp with SCSS preprocessor, which provides access to the following features:

  • CSS auto-prefixing
  • built-in preview server with BrowserSync
  • 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 of 6 or higher version.

1. Install the Gulp utility with the following command:

1

npm install gulp --global

2. Next, clone the widget repository.

1

git clone https://github.com/jelastic/jelastic-calculator-widget.git

3. Move inside the project folder and install dependencies.

1
2

cd j-calculator
npm install -d

4. Start a server with gulp to preview changes.

1

gulp serve

5. You can change CSS in the assets/scss/*.scss file. For example, the default variables:

1
2
3
4
5
6
7

$laptop: 1366px; // default media query sizes
$tablet: 1024px;
$mobile: 768px;
$extraSmall: 475px;
$mainColor: #0087ff; // default color (Application Server)
$dbColor: #ffb000; // default orange color (Database)
$balancerColor: #09b475; // default blue color (Load Balancer)

6. Once you are satisfied with the results, build the production environments.

1

gulp default

In a moment, you will have the following files in the j-calculator folder:

  • index.html - example with widget initialization selector
  • j-calculator.min.js - minified JavaScript
  • j-calculator.min.css - minified CSS

Use these files instead of the default ones during the widget addition to your website page.

7. Additionally, for the best performance, some images are saved in the SVG format, optimized with the svgomg service and included in CSS/SCSS with the BASE64 technology via base64encode.org. 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 Pricing Calculator widget to your website.

What’s next?