Create Your Own Marketplace with Applications for One-Click Installation

| December 17, 2015

marketplaceEasiness and lack of routine actions required - these are two options that are highly demanded when it comes to the application installation. At the same time these are two options that you can provide to your customers without special efforts. You can offer a marketplace with the packaged applications that can be installed in one click within Jelastic Cloud. Being hosting service provider or reseller you get extra customers, as well as reduce application support and management costs.

Follow the link to see a full version of marketplace. The same categorised set of packaged applications you can easily place at your site to get a new source of income.

All the applications are packaged using JPS (Jelastic Packaging Standard) that provides the process of creating and automating the deployment of applications with a predefined set of properties and behaviors.

You can place a separate widget for a specific application or create a full set catalog of applications. Today we’ll show you how to integrate a whole marketplace. We’ll provide its basic sources wrapped into a special package, so you can use it externally, placing the marketplace frame at your own site and configuring it up to your needs.

1. To include such installation widgets at your website, it is required to insert the JavaScript software development kit (SDK) script on the page it should be displayed at, ideally right after the <body> tag opening:

  (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); = id;
      js.async = true;
      js.src = "//";
      fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'jelastic-jssdk'));
2. Then add the following string to your page code at the position you’d like the widget to be placed at:
<div class="je-app-mp"></div>

After that, the default and ready-to-work Marketplace frame will appear at your site.

3 In addition, this widget has a number of tunable properties, that can help you to adjust it according to your needs. Use the list of parameters below to additionally customize your Marketplace frame through adding them to the above stated <div> tag:

  • data-key
    A particular Jelastic platform for the applications to be created at
    e.g. app.{hoster_domain}
    If this parameter is not stated, a user will have the possibility to choose the preferable hosting service provider. Note that upon specifying a particular provider, the list of available applications will be fetched from the corresponding  platform; otherwise, the central Jelastic storage will be used
  • data-lang
    Code of the language in the ISO 639-€‘1 format the application descriptions will be shown in (in case any of them includes several localizations)
  • data-css
    Link to the custom CSS (Cascading Style Sheets) file to be used by a widget
    e.g. //
  • data-tx-loading
    Text for being shown while widget is loading (e.g. Loading)
  • data-tx-install
    Label for the "install" button (e.g. Install)
  • data-tx-provider
    String to be displayed within the hosting provider selection frame, just before the name of the currently chosen one
    e.g. Service provider
  • data-tx-invalid-email
    Text of the warning message, that appears in case the entered email is incorrect
    e.g. The e-mail value is not valid
  • data-tx-error
    Warning for the case of some problem occurrence
    e.g. Some error has occurred
  • data-tx-check-email
    Text to be displayed upon a successful app installation
    e.g. Check your email
  • data-tx-required-field
    Message for the case the necessary input field is not filled in
    e.g.This field is required
  • data-tx-email
    Placeholder for the emailfield
    e.g. Your email
  • data-tx-apps
    Label for the main application’s category (is shown above the categories list to the left)
    e.g. Applications
  • data-onready
    Global function, that, if stated, will be executed after the Marketplace widget is initialized at a page; can be used for customization (e.g. resizing elements, defining loader displayment, adding navigation, etc.)
    e.g. Jelastic.onReady
  • data-category
    The Marketplace subcategory to be automatically shown just after the widget initialization (if not stated, the common apps one is opened by default)
    e.g. apps/blogs
  1. In order to improve your Marketplace usability, you can customize the navigation between its sections through binding each category to the appropriate link address, like in the image below:


To get the similar option at your own Marketplace, you’ll need to track the categories’ selection and change the currently shown one with the help of the cross-domain postMessages. So, let’s consider how to accomplish both this points:

  • while switching to another category using the left hand marketplace menu, plugin sends a postMessage (JSON object with a string message type) to the parent document. It should be converted back to the object type before being used (for example, with the JSON.parse() method)
  • in order to set a particular category to be displayed, the postMessage (JSON object), that is intended for being sent to the iframe, should be previously converted into the string type (for example, with the JSON.stringify() method)

As an example of such implementation, you can use these sources (with the navigation similar to the Jelastic Marketplace one’s) as a basis for adjusting your own widget. Note that the plugin can send other messages as well. For their validation, always use the "action" : "category" property.

That’s all! Now you can open this page to your customers and get their first feedback about the easiness of applications installation. Have any questions about this implementation? Feel free to contact us.