Clockify

Log into Clockify and navigate to your profile by clicking your avatar in the top-right corner → Profile Settings. Scroll to the bottom of the Profile Settings page and look for the 'API' section. Click 'Generate' to create your API key and copy it immediately. Your Clockify workspace ID is found separately. Go to Settings → Workspace Settings in the left sidebar. The workspace ID appears in the browser URL bar as `app.clockify.me/settings/{workspaceId}`. Copy and save this ID — you will need it in every API call path. Note that the API key is personal to your account. If you are building a team dashboard, you can use your own key to access workspace-wide data (as long as your account has workspace admin permissions). For apps where individual users log their own time, each user would need to provide their own API key.

In your Bubble app, open the Plugins tab and confirm the API Connector plugin (by Bubble) is installed. Click 'Add another API' and name it 'Clockify Main'. IMPORTANT: Set the authentication type to 'No authentication' — do not use 'Bearer' or 'Basic Auth'. Instead, manually add a custom header. Click 'Add shared header for all calls' and enter: - Key: `X-Api-Key` - Value: your Clockify API key - Tick the 'Private' checkbox Clockify specifically requires the header name to be `X-Api-Key` — using `Authorization: Bearer your_key` causes a 401 error on every request. This is the single most common setup mistake for this integration. Set the base URL to `https://api.clockify.me/api/v1`. Add a Content-Type header: `Content-Type: application/json` (mark this one as non-private since it is not sensitive).

1{
2  "api_name": "Clockify Main",
3  "base_url": "https://api.clockify.me/api/v1",
4  "headers": [
5    {
6      "key": "X-Api-Key",
7      "value": "<private>",
8      "private": true
9    },
10    {
11      "key": "Content-Type",
12      "value": "application/json",
13      "private": false
14    }
15  ]
16}

Inside the Clockify Main API group, click 'Add another call'. Name it 'Get Projects'. Set method to GET and path to `/workspaces/{workspaceId}/projects`. Add a path parameter: workspaceId (text, static — enter your actual workspace ID as the default value, or make it dynamic if the workspace ID varies). Click 'Initialize call'. Bubble sends the real GET request and Clockify returns a JSON array of project objects. Bubble detects fields including id, name, hourlyRate, clientId, and color. Set 'Use as' to 'Data' and tick 'List'. Add a second call: 'Get Users'. Path: `/workspaces/{workspaceId}/users`. Initialize with your workspace ID. This populates a team member dropdown for filtering the reports view. For time entries, add call 'Get Time Entries': path `/workspaces/{workspaceId}/user/{userId}/time-entries` with both workspaceId and userId as parameters. Note that time entry durations return as ISO 8601 format strings (e.g., `PT2H30M` meaning 2 hours 30 minutes). In Bubble, display these in a text element using the raw string for now — Step 6 handles formatting.

1GET https://api.clockify.me/api/v1/workspaces/{workspaceId}/projects
2X-Api-Key: <private>
3
4GET https://api.clockify.me/api/v1/workspaces/{workspaceId}/users
5X-Api-Key: <private>
6
7GET https://api.clockify.me/api/v1/workspaces/{workspaceId}/user/{userId}/time-entries
8X-Api-Key: <private>

The Reports API is a completely separate base URL and requires its own API Connector group. Click 'Add another API' again and name it 'Clockify Reports'. Add the same X-Api-Key private header as before (the same API key works for both APIs). Set the base URL to `https://reports.api.clockify.me/v1`. Add a call named 'Summary Report'. Set method to POST — this is critical. The Reports API endpoint is POST, not GET. Bubble beginners commonly configure this as GET and receive empty results with no error message. Set the path to `/workspaces/{workspaceId}/reports/summary`. Add workspaceId as a path parameter. Set the body type to 'JSON' and add the request body: Initialize the call with real values: use a date range from last week to today, and a grouping that suits your dashboard. After initialization, Bubble detects the response fields including totals and groupOne items. Set 'Use as' to 'Data' — not a list, since the summary report returns a single object with nested groupings.

1POST https://reports.api.clockify.me/v1/workspaces/{workspaceId}/reports/summary
2X-Api-Key: <private>
3Content-Type: application/json
4
5{
6  "dateRangeStart": "<dateRangeStart>",
7  "dateRangeEnd": "<dateRangeEnd>",
8  "summaryFilter": {
9    "groups": ["USER", "PROJECT"]
10  },
11  "exportType": "JSON"
12}

On your Bubble page, add two Date/Time Picker inputs: 'Week Start' and 'Week End'. Set their default values to the start and end of the current week using Bubble date expressions. Add a Repeating Group. Set its data source to 'Get data from an external API → Clockify Reports - Summary Report'. Pass the date picker values as dateRangeStart and dateRangeEnd parameters (formatted as ISO 8601 strings). Inside the repeating group cell, add: - Text element: current cell's data's groupOne's name (user name) - Text element: current cell's data's duration formatted (note: report durations come back in seconds as an integer — divide by 3600 to display hours) - A horizontal bar element (a resizable Group with background color) whose width is a percentage of the max hours in the dataset To show the hours-worked bar proportionally, set the Group width condition: '(current cell's groupOne's duration / max(all groupOne durations)) * 100' as a percentage. Bubble's expression editor supports basic math operations. Add a 'Refresh' button that triggers the API call to reload when the date range changes.

Clockify's main API paginates time entries at a maximum of 200 entries per page (page-size parameter). For teams with high time entry volume, you need pagination. On Bubble's free plan, display only the first page (add `page-size=200` and `page=1` as query params). On paid plans, use a Backend Workflow loop to fetch subsequent pages. For the dashboard filter, add a Dropdown element above the repeating group with its choices set to 'Get data from an external API → Clockify Main - Get Projects'. Show the project name field as the display. When the user selects a project, re-run the Summary Report call with an additional filter in the request body: Also add an 'All Projects' option (value: empty string) that removes the project filter. For the project breakdown view, add a second repeating group below the summary that shows individual time entries for the selected user and project using the Clockify Main 'Get Time Entries' call. RapidDev's team has built time-tracking dashboards exactly like this for multiple Bubble clients — if you want a custom solution with multi-workspace support or Stripe billing integration, book a free scoping call at rapidevelopers.com/contact.

1// Reports API body with project filter
2{
3  "dateRangeStart": "<dateRangeStart>",
4  "dateRangeEnd": "<dateRangeEnd>",
5  "summaryFilter": {
6    "groups": ["USER", "PROJECT"],
7    "filterGroupIds": ["<projectId>"]
8  },
9  "exportType": "JSON"
10}