Development Toolkit

If your add-on contains some additional UI elements, your manifest can specify where those elements will be in the Clockify UI and user access permissions that they will have. This way, based on those permissions, certain types of users will be able to see these elements in their add-on. On how to define those components, see Add-on manifest.

Apart from specifying the location and permissions, you also need to think of the name of this UI element since it is not the same as the name of the add-on.

There are three types of UI components in Clockify where an add-on element can be added:

Sidebar

Add-on can add new element in a sidebar automatically, or if user enables it through Settings by clicking Show more and Add-ons.
Now, you can specify sidebar’s properties: 

• Added if at least one enabled add-on has “Sidebar” component specified in manifest
• Not removed even if empty
• Users can put other elements in it (from other sections)
• New add-on sidebar elements are always added to the Add-on section

Element can be moved from the Add-on to other sections and is removed from the Add-on section if it is uninstalled or disabled in the optional add-on’s settings. 

Widget

Widget icon is displayed if at least one add-on with widget component is installed and enabled at the bottom right corner of the page.

Widget list is displayed if more than one add-on with widget component is installed and enabled at the bottom right corner of the page. 

Widget is not visible if there are no installed add-ons that have widget as a component in the manifest, or if all add-ons with widget component are disabled.

Tabs 

Some pages that user can access from the sidebar have tabs. Add-on can add new element in tab automatically, or if user enables it through Settings. Add-on tabs are added after the existing tabs and are sorted by the date when they where added. 

Tabs can be added to the following pages:

• Time off
• Schedule
• Approvals
• Reports
• Activity
• Team
• Project

Component window messages

We use the window message api in order to allow add-on developers receive messages about route changes, or WebSocket messages and react accordingly. Since the iframe receives those messages, add-on developers can subscribe and receive them. Here is an example how to subscribe to those messages:

handleWindowMessage = (message) => {
  console.log(message.data.title)
}

window.addEventListener("message", (event) => handleWindowMessage(event))