---
title: Plug-in areas
slug: cms-11/dev-docs/plug-in-areas
docTags: 
createdAt: 2026-07-22T19:45:21.967Z
---

Optimizely Content Management System (CMS) has a flexible user interface where you can add components.

CMS added plug-in areas at common extension points to let partner developers extend the CMS user interface. You can require an Asynchronous Module Definition (AMD) module for each plug-in area during initialization, at which time you can add custom commands to the plug-in area.

The plug-in areas **only** accept command prototypes; see the documentation on the [command pattern](docId:4nW0_6o-yEWosHIbkpNlD) for information on creating a command.

## Add a command to a plug-in area

You should add command prototypes to the plug-in area [during module initialization](docId:6n1GErNDmNb6oTl9BHvpJ). Require the plug-in area AMD module and add the command prototype with the `add` method. Here is an example of 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 is a list of the available plug-in areas, a description of where the area displays, the AMD module ID, and an example of the model the registered commands will receive.

### Navigation tree

This is used for plugging into the context menu and component menu of the navigation tree. In CMS, this is the *page tree*, and in Optimizely Customized Commerce, this is the *catalog tree*.

### Module ID

```javascript
epi-cms/plugin-area/navigation-tree
```

### Project overview

The `project-overview` plugs into the project overview's main menu and project items menu.

### Module ID

```javascript
epi-cms/plugin-area/project-overview
```

### Assets pane

The `assets-pane` plugs into the context menu of the assets panel.

### Module ID

```javascript
epi-cms/plugin-area/assets-pane
```

### Edit notifications

The `edit-notifications` plugs into edit notifications.

### Module ID

```javascript
epi-cms/plugin-area/edit-notifications
```

The following example shows how to add commands to plug-in 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);
    }
  });
});
```