Docs menu
MENU

Installation Widget for Single or Group of Applications

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:

wordpress cluster installation widget

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

Integrating Widget

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}"
Note: This parameter works only with new accounts, already registered users will be redirected for installation within their existing group.

Widget Localization & Customization

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.

ParameterDescriptionExample Value
data-keyA particular 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-mpapiMarketplace to get applications and categories from. Either the central one or from the particular platform.//marketplace.jelastic.com/
data-appsA 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-groupA 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-preloaderText for being shown while the widget is loading.Loading, please wait…
data-textLabel for the main button.Install
data-tx-invalid-emailText of the warning message that appears in case the entered email is incorrect.Invalid email, please check the spelling
data-tx-errorWarning for the case of some problem occurrence.An error has occurred, please try again later
data-tx-successText to be displayed upon a successful app installation.Success.\nr\ Request is sent
data-tx-email-placeholderPlaceholder for the email fieldEnter 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.

What’s next?