How to Integrate Retool with RescueTime

Log in to your RescueTime account at rescuetime.com. Click on your profile name or account menu in the top-right corner and navigate to Account Settings. In the left sidebar of the Settings page, look for API Keys or Integrations. If you see an API Keys section, click on it. Click Create a new API Key. Give the key a descriptive label (e.g., Retool Integration) so you can identify it later if you have multiple keys. RescueTime will generate an API key — a random alphanumeric string of approximately 40 characters. Copy this key immediately. Unlike some API platforms, RescueTime displays the key once at creation and does not show the full key value again after you navigate away (though you can create a new key if needed). Go to Retool and navigate to Settings → Configuration Variables. Click Add variable, name it RESCUETIME_API_KEY, paste the API key as the value, and check the Mark as secret checkbox to prevent it from being accessible in frontend JavaScript. Note important access limitations: the free RescueTime plan limits API access to the past 3 months of data at daily granularity. The premium plan extends this to all historical data at hourly or finer granularity. The RescueTime for Teams plan is required to access other team members' data through the API — individual accounts only expose the account holder's own data.

In Retool, click the Resources tab and click Add Resource. Select REST API from the resource type list. Name the Resource RescueTime API. In the Base URL field, enter https://www.rescuetime.com/anapi — this is the base URL for the Analytic Data API. RescueTime's API uses query parameter-based authentication (the API key is passed as a URL parameter in each request, not as a header). You do not need to add any headers for authentication. However, add a default Content-Type header: click Add Header, set Name to Content-Type and Value to application/json — this is good practice for REST API Resources even when making GET requests. Click Save to save the Resource. RescueTime's API key authentication happens at the query level: you will add key={{ config.RESCUETIME_API_KEY }} as a URL parameter in each query rather than in the Resource headers. This is by design — RescueTime's API specification requires the key as a URL parameter. Because Retool proxies all requests server-side, the API key in the URL parameter is never exposed to the browser even though it appears in the URL on the server side. Alternatively, you can add the key as a default URL parameter in the Resource configuration under the URL Parameters section: Name: key, Value: {{ config.RESCUETIME_API_KEY }}. Adding it at the Resource level means you do not need to add it to every individual query.

Create your first meaningful query targeting RescueTime's daily summary endpoint. In a Retool app, open the Code panel and click Create new query. Select the RescueTime API Resource. Set Method to GET. In the Path field, enter /data. This is the main Analytic Data API endpoint. In the URL Parameters section, add the following parameters that control what data you retrieve. Add perspective with value interval — this returns data aggregated by time period. Add resolution_time with value day for daily data (options: month, week, day, hour, minute). Add restrict_begin with value {{ dateRangePicker.startDate || moment().subtract(30, 'days').format('YYYY-MM-DD') }} for the start date. Add restrict_end with value {{ dateRangePicker.endDate || moment().format('YYYY-MM-DD') }} for the end date. Add format with value json. Add restrict_kind with value productivity to get the productivity-level summary (most common for dashboards). Run the query. RescueTime returns a JSON object with two keys: row_headers (an array of column names) and rows (an array of arrays, where each inner array corresponds to one time period). The row_headers for productivity data are typically: Date, Time Spent (seconds), Number of People, Productivity. Your transformer will need to zip the headers and rows together to produce key-value objects for Retool components.

1// JavaScript transformer for RescueTime Analytic Data API response
2// Converts the row_headers + rows array format to key-value objects
3const headers = data.row_headers || [];
4const rows = data.rows || [];
5
6if (!headers.length || !rows.length) return [];
7
8return rows.map(row => {
9  // Create an object from headers and row values
10  const record = {};
11  headers.forEach((header, index) => {
12    record[header.toLowerCase().replace(/\s+/g, '_').replace(/[()]/g, '')] = row[index];
13  });
14
15  // Normalize common fields for productivity data
16  const seconds = record['time_spent_seconds'] || record['time_spent'] || 0;
17  const productivityScore = record['productivity'] || 0;
18
19  return {
20    date: record['date'] || record['date_'] || '',
21    total_seconds: seconds,
22    total_hours: (seconds / 3600).toFixed(1),
23    productive_hours: productivityScore > 0 ? (seconds / 3600).toFixed(1) : '0',
24    productivity_score: productivityScore,
25    productivity_label: productivityScore === 2 ? 'Very Productive'
26      : productivityScore === 1 ? 'Productive'
27      : productivityScore === 0 ? 'Neutral'
28      : productivityScore === -1 ? 'Distracting'
29      : productivityScore === -2 ? 'Very Distracting' : 'Unknown',
30    people_count: record['number_of_people'] || 1
31  };
32});

With the productivity data query working, build the dashboard layout. Add a DateRangePicker component at the top of the canvas labeled Select Date Range — default it to the past 30 days. Add a Button labeled Refresh Data connected to your summary query. Create a second query for activity-level data: same endpoint and Resource, but change restrict_kind to activity and restriction_time to week. This returns time-per-application data. Build the main dashboard layout as three sections. Section 1 — Summary Stats: drag four Stat components showing Total Productive Hours, Average Daily Productive Hours, Total Distracting Hours, and Average Productivity Score. Calculate these from a JavaScript aggregation query on the summary data. Section 2 — Trend Chart: drag a Chart component and set it to Line type. Bind to the summary query data. Set X axis to the date field. Add two data series: one for productive hours time and one for distracting hours — this creates a dual view showing both sides of the productivity picture. Section 3 — Application Usage Table: drag a Table component and bind it to the activity query data. Configure columns for application name, total time (formatted as hours:minutes), productivity rating, and a bar-style visual for time proportion. Sort by total time descending to show most-used apps at the top. Add a Tag or Badge component in the productivity column showing color-coded ratings: green for productive, red for distracting, gray for neutral.

1// JavaScript aggregation query for Stat components
2// References the productivity summary query
3const rows = getProdSummary.data || [];
4
5const productive = rows.filter(r => r.productivity_score > 0);
6const distracting = rows.filter(r => r.productivity_score < 0);
7
8const totalProductiveHours = productive.reduce((sum, r) => sum + parseFloat(r.total_hours), 0);
9const totalDistractingHours = distracting.reduce((sum, r) => sum + parseFloat(r.total_hours), 0);
10const avgDailyProductiveHours = rows.length > 0
11  ? (totalProductiveHours / rows.length).toFixed(1)
12  : 0;
13
14// Simple productivity pulse: percentage of time that is productive
15const totalHours = rows.reduce((sum, r) => sum + parseFloat(r.total_hours), 0);
16const productivityPulse = totalHours > 0
17  ? Math.round((totalProductiveHours / totalHours) * 100)
18  : 0;
19
20return {
21  total_productive_hours: `${totalProductiveHours.toFixed(1)}h`,
22  avg_daily_productive_hours: `${avgDailyProductiveHours}h`,
23  total_distracting_hours: `${totalDistractingHours.toFixed(1)}h`,
24  productivity_pulse: `${productivityPulse}%`,
25  days_tracked: rows.length
26};

Extend the dashboard with category-level insights and team configuration. Create a third query using restrict_kind=category to get time broken down by RescueTime's built-in categories (Software Development, Email, Design, Social Networking, News, etc.). Display this data in a horizontal bar Chart showing category time allocation — this gives a higher-level view of how work time is distributed across activity types. For team dashboards where multiple team members use RescueTime, add a Select component at the top of the dashboard for choosing whose data to view. Wire the selected team member's API key to the key parameter in the Resource queries using a lookup object: create a JavaScript query that maps member names to their API keys stored as configuration variables (RESCUETIME_API_KEY_ALICE, RESCUETIME_API_KEY_BOB, etc.). Pass the selected key through as a query URL parameter override. Add a clear privacy notice banner at the top of the dashboard explaining that productivity data is displayed with team members' consent and is used for context in 1:1 conversations, not for performance evaluation. This transparency is important for maintaining team trust. For teams building comprehensive engineering productivity platforms that combine RescueTime focus data with Git commit activity, Jira ticket velocity, and calendar meeting load, RapidDev can help design and build the unified Retool analytics solution.

1// JavaScript query to build team member → API key mapping
2// Reads configuration variables for each team member's API key
3const teamMembers = [
4  { name: 'Alice', configVar: 'RESCUETIME_API_KEY_ALICE' },
5  { name: 'Bob', configVar: 'RESCUETIME_API_KEY_BOB' },
6  { name: 'Carol', configVar: 'RESCUETIME_API_KEY_CAROL' }
7];
8
9// Return options for the Select component
10const options = teamMembers.map(member => ({
11  label: member.name,
12  value: retoolContext.configVars[member.configVar] || ''
13}));
14
15// The Select component value is the API key for the chosen member
16// Reference as {{ memberSelect.value }} in the Resource query's key URL parameter
17return options;