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:
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:
- You need to upload the j-marketplace.js script and the j-marketplace.min.css styles to your server. These files with the default styles can be downloaded from repository:
- https://raw.githubusercontent.com/jelastic/jelastic-marketplace-widget/master/mp-widget/js/j-marketplace.js
- https://raw.githubusercontent.com/jelastic/jelastic-marketplace-widget/master/mp-widget/css/j-marketplace.min.css
- Add the mp-widget folder with the above-mentioned files to the root folder of your site and insert the following lines between the and tags of the required page:
<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.
- Add the following block to your page code at the position you’d like the widget to be placed at:
<div class="j-app-mp" data-apps="{app-id}" data-key="app.{[hoster_domain](https://docs.jelastic.com/jelastic-hoster-info)}"></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”)
- 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.
<data-group="{group}">
- {group} - a name of a specific user group.
Note that 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.
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.
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:
<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.