Installation Application Widget

Within your site you can place a widget with a short description and Install button for a single application one-click deployment or for the categorized set of solutions chosen from Marketplace. The widget looks as follows:

In this guide, you will find out how to create the installation widget for a separate application or a set of them.

In case you want a fully customizable widget for a separate application installation, you can follow our step-by-step guide below:

1. Clone the mp-widget folder from the repository to the root folder of your site.

2. Define the j-marketplace.js script and the j-marketplace.min.css styles (from the uploaded mp-widget directory) on the needed site pages. Insert the following lines between the <head> and </body> tags of the required page:

1
2
<script async src="{siteUrl}/mp-widget/js/j-marketplace.js"></script>
<link rel="stylesheet" href="{siteUrl}/mp-widget/css/j-marketplace.min.css">

Ensure that {siteUrl} provides a correct path to the previously uploaded files.

3. Add the following block to your page code at the position you’d like the widget to be placed at:

1
<div class="j-app-mp" data-apps="{app-id}" data-key="app.{hoster_domain}"></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 or several comma-separated application IDs (for example, data-apps=“wordpress, wordpress-cluster, nexus”)

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}"

{group} - a name of a specific user group.

Note: This parameter works only with new accounts, already registered users will be redirected for installation within their existing group.

You can adjust the widget up to your needs using some of the predefined parameters.

1. The source code of the application widget can be found in its repository. It is built with the help of the Grunt project builder (to compile and minimize .js scripts and .less files), which can also be used to redefine default styles and adjust the widget.

2. Add default parameters from the list below to customize your widget and apply localization.

Parameter	Description	Example Value
data-key	A particular Jelastic platform for the applications to be created at. If this parameter is not stated, a user will have the possibility to choose the preferable hosting service provider.	app.{hoster_domain}
data-mpapi	Marketplace to get applications and categories from. Either Jelastic central or the one from the particular platform.	//marketplace.jelastic.com/
data-apps	A comma-separated list of the application IDs that should be displayed in the marketplace. If not defined, all applications will be available.	wordpress, wordpress-cluster, nexus
data-group	A name of a specific user group, where the provided email address should be registered. It works only with new accounts, already registered users will be redirected for installation within their existing group.	promotion-trial
data-tx-preloader	Text for being shown while the widget is loading.	Loading, please wait…
data-text	Label for the main button.	Install
data-tx-invalid-email	Text of the warning message that appears in case the entered email is incorrect.	Invalid email, please check the spelling
data-tx-error	Warning for the case of some problem occurrence.	An error has occurred, please try again later
data-tx-success	Text to be displayed upon a successful app installation.	Success.\nr\ Request is sent
data-tx-email-placeholder	Placeholder for the email field	Enter email

Add the required properties to your widget code, for example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="j-app-mp"
     data-mpapi="//marketplace.jelastic.com/"
     data-key="app.{hoster_domain}"
     data-apps="wordpress, wordpress-cluster, nexus"
     data-group="promotion-trial"
     data-text="Install"
     data-tx-invalid-email="Invalid email, please check the spelling"
     data-tx-error="An error has occurred, please try again later"
     data-tx-success="Success.\nr\ Request is sent"
     data-tx-email-placeholder="Enter email"
     data-tx-preloader="Loading, please wait..."
></div>

That’s all! Now you know how to add an application installation widget to your site.

Tip: For your own fully custom installation widgets use the direct URL for solution deploy.

Installation Widget for Single or Group of Applications

Integrating Widget

Widget Localization & Customization

What’s next?