Docs menu
MENU

Application Installation Button

You can offer a solution that will automatically install an application for your customer in just a few clicks (provide an email and confirm via inbox). The ready-to-work button for installation looks as follows:

application installation button

The widget from this guide is the most straightforward way to add the appropriate button to your website. The only requirement is jQuery JavaScript library. The process is simple:

1. You need to upload the jlc-app-widget.css styles and the jlc-app-widget.js script that the widget depends on to the root folder of your site. If you don’t need to change the default styles, files can be downloaded directly from the repository:

2. Enable these scripts on any page by adding the following lines between the <head> and </body> tags:

1
2

<script async src="{siteUrl}/jlc-app-widget.js"></script>
<link rel="stylesheet" href="{SiteUrl}/css/jlc-app-widget.css">

Don’t forget to substitute the {siteUrl} placeholder with a correct path to the previously uploaded files.

3. Now, insert the following block at the position where the widget should be displayed (add multiple times, if several widgets are required):

1

<div class="jlc-app" data-key="app.{hoster_domain}" [data-app-id="{app-id}"]  [data-manifest="{json}"]></div>
  • {hoster-domain} - domain name of the platform, where an application will be installed. If you skip the data-key parameter, a customer will be able to select any preferred platform.
  • {app-id} - identifier of a single application from Marketplace (for example, data-app-id=“wordpress”)
  • {json} - JSON file (or link to it) of the application that should be installed by the widget (for example, data-manifest=“https://raw.githubusercontent.com/jelastic-jps/wordpress/master/wordpress/manifest.jps”)
Note: You need to provide only one application defining parameter, i.e. either ID or JSON (data-app-id="{app-id}" or data-manifest="{json}" respectively).

4. Additionally, you can add the parameter with a specific group where the package should be installed. For example, it can define a group with specialized limits, which will allow users to test some complex application that cannot be installed on the regular trial accounts. Or you can create a dedicated group with bonuses and use for some marketing campaigns.

1

data-group="{group}"

5. In case you need to customize the texts of widget elements (e.g. to provide the appropriate translation), please extend it with the following attributes:

1

data-text="{button-title}" data-tx-success="{success-text}" data-tx-error="{error-text}"
ParameterDescriptionDefault Value
data-textThe default text (title) displayed on the button.GET HOSTED NOW
data-tx-successA text displayed upon operation success.CHECK YOUR EMAIL
data-tx-errorA text displayed in case of an error.An error has occurred, please try again later.
Tip: In case you need multiple widgets with customized localization, you can redefine the default texts in the main variables section of the ../app-widget/assets/js/jlcwidget.js file.

Customize Widget Layout

To customize the layout of the provided application installation widget, you’ll require Node.js 6 or later with the Gulp building tool installed.

1. You can install Gulp with a single command:

1

npm install gulp --global

install gulp

2. Next, create a local copy of the widget repository.

1

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

clone project

3. Go to the app-widget folder and install all of the project’s dependencies.

1
2

cd app-widget
npm install -d

install dependencies

4. Adjust the following files to customize the widget:

  • ../app-widget/assets/scss/jlc-app-widget.scss - defines the widget visual; some simple adjustments are described below:
    • $color-default - sets the color of the widget
    • $color-red - defines the color of the error text
    • $bdrs - customizes border-radius of the button
    • $font-family - provides a font for the texts
  • ../app-widget/assets/js/jlc-app-widget.js - adjusts the behavior of the widget
    • main variables section - allows setting the default texts for the widget
    • apply other changes only in case you know what you are doing
  • ../app-widget/assets/img - stores default images for the widget. Be aware, uploading new images to the folder won’t apply any changes, you need to adjust the background-image: parameter(s) within the jlc-app-widget.scss file. For the best performance, we recommend using optimized images in the SVG format (e.g. with the svgomg service) and add them with the BASE64 technology (e.g. via base64encode.org).
    • check-icon.svg - a white tick icon
    • loader.svg - loading (request processing) animation
    • mail-black.svg - a black envelope icon
    • mail-grey.svg - a gray envelope icon
    • right-arrow.svg - a white arrow icon
Tip: You can start a test server with the real-time synchronization of the applied changes for the comfortable preview and troubleshooting with the gulp serve command.

5. Build the customized jlc-app-widget.css and jlc-app-widget.js files for your widget.

1

gulp default

run preview server

You can now use these new files to place the customized widget on your website, as described at the beginning of the guide.

What’s next?