---
title: Plug-in areas
slug: cms-12/docs/plug-in-areas
docTags: 
createdAt: 2026-08-10T15:55:58.000Z
---

Optimizely has a flexible user interface where you can easily add your components.

Partner developers can extend the Optimizely user interface with added plug-in areas at common extension points. There is an AMD (Asynchronous Module Definition) module for each plug-in area that can be required during initialization; at which time you can to add custom commands to the plug-in area.

The plug-in areas **only** accept command prototypes because they are constructed at runtime. See [command pattern](docId\:kmY14e0amaj2K07iJ6SAw).  When constructed, they are set with a model specific to the plug-in area.

## Add a command to a plug-in area

You should add your command prototypes to the plug-in area [during module initialization](docId\:fEnhaQ6XMBoeh2UObFicl). This is done by requiring the plug-in area AMD module and adding the command prototype via the add method. The following example shows adding the reload children command to the navigation tree:

```csharp
define([
    'dojo/_base/declare',
    'epi-cms/plugin-area/navigation-tree',
    // Parent class
    'epi/_Module',
    // Commands
    'addon/commands/ReloadChildren'
  ],
  function (
    declare,
    navigationTreePluginArea,
    // Parent class
    _Module,
    // Commands
    ReloadChildren
  ) {
    return declare([_Module], {
      initialize: function () {
        this.inherited(arguments);
        navigationTreePluginArea.add(ReloadChildren);
      }
    });
  }
);
```

## Available plug-in areas

The following list describes the available plug-in areas, where they appear, the AMD module ID, and an example of the model that the registered commands will receive.

###

- `navigation-tree` – Used for plugging into the context menu and component menu of the navigation tree. In Optimizely Content Management System (CMS), this is the *page tree* and in Optimizely Customized Commerce, this is the *catalog tree*.
  `epi-cms/plugin-area/navigation-tree`
- `project-overview` – Used for plugging into the main menu and project items menu of the project overview.
  `epi-cms/plugin-area/project-overview`
- `assets-pane` – Used for plugging into the context menu of the assets panel.
  `epi-cms/plugin-area/assets-pane`
- `edit-notifications` – Used for plugging edit notifications.
  `epi-cms/plugin-area/edit-notifications`

The following example shows how to add `command` to all plugin areas:

```csharp
define([
  "dojo",
  "dojo/_base/declare",
  "dojo/Stateful",

  "epi/_Module",

  "epi/shell/command/_Command",

  "epi-cms/plugin-area/navigation-tree",
  "epi-cms/plugin-area/project-overview",
  "epi-cms/plugin-area/assets-pane",
  "epi-cms/plugin-area/edit-notifications"
], function (
  dojo,
  declare,
  Stateful,

  _Module,

  _Command,

  navigationTreePluginArea,
  projectPluginArea,
  assetsPanePluginArea,
  editNotificationPluginArea
) {
  // Command used on navigation tree context menu
  var NavigationTreeCommand = declare([_Command], {
    label: "Navigation tree command",

    _onModelChange: function () {
      this.set("canExecute", true);
      this.set("isAvailable", true);
    },

    _execute: function () {
      alert("Navigation tree command");
    }
  });

  // Command used on project items context menu
  var ProjectItemCommand = declare([_Command], {
    category: "menuWithSeparator",

    label: "Project item command",

    canExecute: true,
    isAvailable: true,

    _execute: function () {
      alert("PRoject item command");
    }
  });

  // Command used on projects main menu
  var ProjectCommand = declare([_Command], {
    category: "publishmenu",

    label: "Project command",

    canExecute: true,
    isAvailable: true,

    _execute: function () {
      alert("Project command");
    }
  });

  // Command used on assets pane items context menu
  var AssetsCommand = declare([_Command], {
    label: "Assets command",

    _onModelChange: function () {
      this.set("canExecute", true);
      this.set("isAvailable", true);
    },

    _execute: function () {
      alert("Assets command");
    }
  });

  // Notification displayed for Product pages
  var TestNotification = declare([Stateful], {
    order: 1000,

    _valueSetter: function (value) {
      if (value && value.contentData && value.contentData.contentTypeName === "Product") {
        this.set("notification", {
          content: "test"
        });
      } else {
        this.set("notification", {
          content: null
        });
      }
    }
  });

  return declare([_Module], {
    initialize: function () {
      this.inherited(arguments);

      // adding command to navigation tree plugin area
      navigationTreePluginArea.add(NavigationTreeCommand);

      // adding command to project plugin area
      projectPluginArea.add(ProjectItemCommand);
      projectPluginArea.add(ProjectCommand);

      // adding command to assets pane plugin area
      assetsPanePluginArea.add(AssetsCommand);

      // adding notification to notification plugin area
      editNotificationPluginArea.add(TestNotification);
    }
  });
});
```