UI Customization With Plesk Extensions

A general way to customize a product is to use skins. After a new skin is applied, customers get a new look and feel of the product.

Sometimes you need deeper customization, such as adding your own control buttons, menus, etc. In Plesk, to meet this demand, you can use custom buttons (more details at Administrator’s Guide).

But even customization with custom buttons is not always enough. Another way of advanced UI customization is to use new Plesk SDK APIs. Starting from Plesk 11.5, it is possible to create an extension that provides global.js and global.css files. These files are included into all pages of the control panel. Using JavaScript you can do almost everything you want with a rendered screen: reorder items, hide or introduce new controls.

For example, a hosting provider may want to add their own bar showing the links to their support or billing system at the top of the screen in the Hosting Panel. Below is the example of such a bar:


This bar was created with the help of an additional extension. The extension was uploaded to the Panel and provides this functionality. The extension is a zip archive. Its structure is the following:

  • htdocs
    • global.css
    • global.js
  • meta.xml

The globals.js file contains a rather simple JavaScript code:

if ('undefined' != typeof Jsw) {
    Jsw.onReady(function() {
        if (!$('body').first().hasClassName('sid-main')) {

        var panel = new Element('div', {
            'class': 'custom-provider-header'

‘ + … ‘

‘ ); $(‘header-wrapper’).insert({ before: panel }); }); }

The purpose of this code is to create and insert a new panel at the top of the Plesk Panel screens. The custom panel is created with the help of HTML markup. To make the Panel look good, add necessary CSS styles to the global.css file. Thus, you can create your own bar within half an hour and make the Panel more attractive for your customers.

For additional details, see Extensions SDK documentation at Plesk Extensions Guide.

You can also see the source code of the extension described in this article: provider-panel-1.0-1.zip


  1. Alexey, maybe you could explain what ‘Jsw’ object is? Can I use it in extensions and if so, where its documentation can be found?

    • Jsw is Plesk UI framework. It’s not recommended to rely on it’s parts, ’cause they can be changed in the future versions. But Jsw.onReady probably will be not changed w/o significant reason. It’s similar to jQuery’s $(function() { }) handler that fires on document ready state.

Add a Comment

Your email address will not be published. Required fields are marked *


  • Yes, please, I agree to receiving my personal Plesk Newsletter! WebPros International GmbH and other WebPros group companies may store and process the data I provide for the purpose of delivering the newsletter according to the WebPros Privacy Policy. In order to tailor its offerings to me, Plesk may further use additional information like usage and behavior data (Profiling). I can unsubscribe from the newsletter at any time by sending an email to [email protected] or use the unsubscribe link in any of the newsletters.

  • Hidden
  • Hidden
  • Hidden
  • Hidden
  • Hidden
  • Hidden

Related Posts

Knowledge Base

Plesk uses LiveChat system (3rd party).

By proceeding below, I hereby agree to use LiveChat as an external third party technology. This may involve a transfer of my personal data (e.g. IP Address) to third parties in- or outside of Europe. For more information, please see our Privacy Policy.