Customizing the Sidekick

You can customize the sidekick for your project. You can add a /tools/sidekick/config.json configuration file to your project's GitHub repository:

For all available configuration options, see the Sidekick API documentation or the config schema. Here are some basics to get started:

Plugins

id and title are mandatory. title will show up on the plugin button. You can provide localized titles in a titleI18n object
How to specify the plugin action depends on the intent:
- To simply open a URL in a new window, you can use the url property. You can optionally have it open in a palette by setting isPalette to true.
  /tools/sidekick/config.json:
  https://gist.github.com/rofe/8a0961575d434fb86ce4fdda3bea60f5
- Executing code must be done in the context of your page (not supported in the edit and admin environment). You can use the event property to specify the name of an event to be fired when the plugin button gets clicked. You can then react to it in your application code as in the following example:
  /tools/sidekick/config.json:
  https://gist.github.com/rofe/e5f215be84acc51ffe87002408d4e107 /scripts/scripts.js:
  https://gist.github.com/rofe/4d38d9ec8253cc2f4bec3dad757c33fc
The environments array specifies where the plugin should appear (dev, edit, admin, preview, live, or prod). You can also define exclude_paths and include_paths arrays to narrow down the plugin’s appearance based on the path.
isContainer turns a plugin into a dropdown. You can then add other plugins to it by specifying its ID in the containerId property.
override can be set to true to extend an existing plugin.

path and viewer are mandatory. Optionally, you can specify a title that will be shown at the top, and you can provide localized titles in a titleI18n object:
https://gist.github.com/rofe/9170d068a7b3ab727a8745774e430aca
Add an HTML file as configured in path to your project’s GitHub repository:
https://gist.github.com/rofe/0de48b1696c7334f6fdbd9f63993aad2
Add an optional CSS file in the same directory, and a JS file with your logic:
https://gist.github.com/rofe/8357f72407683cf4bd27c5d364b71af7
Open a project URL that matches the configured path and click the sidekick to see your viewer in action.