Basecamp

Basecamp uses OAuth 2.0 for all API access. You register your Bubble application at launchpad.37signals.com, which gives you a Client ID and Client Secret. You then complete a one-time authorization flow to get a Bearer access token. Go to launchpad.37signals.com and sign in with your Basecamp account credentials. Click 'Integrations' in the top navigation, then 'Register your application'. Fill in: - Application name: a recognizable name (e.g., 'My Agency Portal') - Company name: your company name - Website URL: your Bubble app's domain (e.g., https://yourapp.bubbleapps.io) - Redirect URI: https://yourapp.bubbleapps.io/api/1.1/wf/basecamp-callback (you'll set this up later, or use https://oauth.pstmn.io/v1/callback for Postman testing) - Products: check 'Basecamp 3' After submission, you'll receive a Client ID and Client Secret. Save both. To get a Bearer token for a single-account implementation (your agency's Basecamp account serving as a service account): open a browser and navigate to `https://launchpad.37signals.com/oauth/authorize?type=web_server&client_id={YOUR_CLIENT_ID}&redirect_uri={YOUR_REDIRECT_URI}`. Log in and click Authorize. You'll be redirected to your redirect URI with a `code` parameter in the URL. Copy that code and immediately exchange it for a token via POST to `https://launchpad.37signals.com/oauth/token` with your client credentials (using Postman). The response includes an `access_token` — save it. This token doesn't expire unless revoked.

1{
2  "oauth_token_exchange": {
3    "method": "POST",
4    "url": "https://launchpad.37signals.com/oauth/token",
5    "body": {
6      "type": "web_server",
7      "client_id": "YOUR_CLIENT_ID",
8      "client_secret": "YOUR_CLIENT_SECRET",
9      "redirect_uri": "YOUR_REDIRECT_URI",
10      "code": "AUTHORIZATION_CODE_FROM_REDIRECT"
11    },
12    "response": {
13      "access_token": "BAhbBy...",
14      "token_type": "Bearer",
15      "expires_in": null,
16      "refresh_token": null,
17      "scope": "app"
18    }
19  }
20}

This is the most critical configuration step. Two headers are mandatory for every Basecamp API call: the Bearer token for authentication, and the User-Agent identifying your application. Missing the User-Agent is the #1 reason Bubble developers get stuck with Basecamp — every request without it returns 403 Forbidden, even with a perfectly valid token. In your Bubble app, go to the Plugins tab. Install the API Connector plugin (search 'API Connector' → Install). Open API Connector in the Plugins list and click 'Add another API'. Name it 'Basecamp'. Set the base URL to `https://3.basecamp.com/{YOUR_ACCOUNT_ID}` — replace {YOUR_ACCOUNT_ID} with your actual numeric account ID (e.g., `https://3.basecamp.com/1234567`). Setting the account ID at the connector level means all call paths start cleanly: `/projects.json`, `/buckets/{id}/todolists.json`. Leave authentication type as 'None' — you'll add auth manually via headers. Add two shared headers. Click 'Add a shared header' twice: Header 1: - Key: `Authorization` - Value: `Bearer YOUR_ACCESS_TOKEN` (paste your full token here) - Check 'Private' — this keeps the token server-side and out of browser traffic Header 2 (mandatory — do not skip): - Key: `User-Agent` - Value: `YourAppName (your@email.com)` — use your actual app name and contact email - Leave 'Private' unchecked — this is not a secret, it's an identification header per Basecamp's ToS Also add a header for Content-Type for POST calls: `Content-Type: application/json`. This can be set at the call level instead if you prefer. Click 'Save' on the connector.

1{
2  "connector_name": "Basecamp",
3  "base_url": "https://3.basecamp.com/1234567",
4  "shared_headers": [
5    {
6      "key": "Authorization",
7      "value": "Bearer BAhbBy...",
8      "private": true
9    },
10    {
11      "key": "User-Agent",
12      "value": "MyAgencyPortal (founder@myagency.com)",
13      "private": false
14    }
15  ],
16  "note": "User-Agent is MANDATORY per Basecamp API ToS. Missing it returns 403 on ALL requests regardless of token validity."
17}

Add the first data call to list all Basecamp projects. This is the entry point for your Bubble app — it returns project names, IDs, and metadata that you'll use to populate a dropdown or card grid. Inside the Basecamp API Connector group, click 'Add another call'. Name it 'List Projects'. Set the method to GET. Set the path to `/projects.json`. No additional parameters needed for a basic list — Basecamp returns all non-archived projects by default. To include archived projects, add a query parameter: `status=archived`. Click 'Initialize call'. Bubble will make a real GET request to `https://3.basecamp.com/{accountId}/projects.json` using your configured headers. If you see a response array of project objects, the initialization succeeded. If you see a 403 error, check that your User-Agent header is correctly set (this is almost always the cause). If you see a 401, your Bearer token needs to be refreshed. After successful initialization, Bubble detects the response fields: `id` (number), `name` (text), `description` (text), `created_at` (text), `updated_at` (text), `status` (text), `bookmark_url` (text), `url` (text), `app_url` (text), and importantly, `dock` (a list — this contains the URLs for to-do lists, message boards, etc. within each project/bucket). Set 'Use as' to 'Data' (list) so Bubble treats the response as a list data type you can bind to a repeating group. Note: in Bubble, after initialization the call appears in the API Connector as 'Basecamp - List Projects'. The detected type will be usable as a data source in repeating groups.

1{
2  "call_name": "List Projects",
3  "method": "GET",
4  "path": "/projects.json",
5  "optional_params": [
6    { "key": "status", "value": "archived", "note": "Omit for active projects only" }
7  ],
8  "sample_response": [
9    {
10      "id": 9876543,
11      "name": "Acme Corp Website Redesign",
12      "description": "Full website redesign Q1 2026",
13      "status": "active",
14      "created_at": "2026-01-15T14:23:00.000Z",
15      "app_url": "https://3.basecamp.com/1234567/projects/9876543",
16      "dock": [
17        { "id": 111, "title": "To-dos", "name": "todoset", "url": "https://3.basecamp.com/1234567/buckets/9876543/todosets/111.json" },
18        { "id": 222, "title": "Message Board", "name": "message_board", "url": "https://3.basecamp.com/1234567/buckets/9876543/message_boards/222.json" }
19      ]
20    }
21  ]
22}

Now add the two most important secondary calls: fetching to-do lists for a project (what clients care most about) and fetching message board posts. This is where the 'buckets' path pattern matters — Basecamp's URL structure uses 'buckets' (not 'projects') for all sub-resource paths, and every endpoint requires a `.json` suffix. Add a second call: 'Get To-do Lists'. Method: GET. Path: `/buckets/<bucketId>/todolists.json`. Add a path parameter: `bucketId` (type: text, dynamic). This parameter corresponds to the project `id` from the List Projects response. For initialization, type one of your project IDs as the test value for `bucketId`. Click Initialize. Bubble will detect fields like `id`, `title`, `completed_count`, `remaining_count`, and `total_count` — these are perfect for a completion percentage display in your UI. Add a third call: 'Get Messages'. Method: GET. Path: `/buckets/<bucketId>/message_boards/<messageBoardId>/messages.json`. Add two path parameters: `bucketId` and `messageBoardId`. The `messageBoardId` comes from the dock array in the project object (the item with `name: 'message_board'`). Basecamp paginates all list endpoints at exactly 20 items per page. To get the next page, append `?page=2` (or `?page=3`, etc.) as a query parameter. For most client portals showing recent activity, 20 items is sufficient — but add a 'Load more' button that increments the page parameter if needed. Optionally add a fourth call: 'Get To-do Items'. Path: `/buckets/<bucketId>/todolists/<todolistId>/todos.json`. This gives you the individual to-do items within a to-do list for granular task display.

1{
2  "call_get_todolists": {
3    "name": "Get To-do Lists",
4    "method": "GET",
5    "path": "/buckets/<bucketId>/todolists.json",
6    "dynamic_params": [
7      { "key": "bucketId", "source": "project id from List Projects response" }
8    ],
9    "sample_response": [
10      {
11        "id": 555444,
12        "title": "Website Launch Tasks",
13        "completed_count": 12,
14        "remaining_count": 5,
15        "total_count": 17,
16        "completed": false
17      }
18    ]
19  },
20  "call_get_messages": {
21    "name": "Get Messages",
22    "method": "GET",
23    "path": "/buckets/<bucketId>/message_boards/<messageBoardId>/messages.json",
24    "dynamic_params": [
25      { "key": "bucketId", "source": "project id" },
26      { "key": "messageBoardId", "source": "dock item id where name = message_board" }
27    ]
28  },
29  "pagination": {
30    "items_per_page": 20,
31    "page_param": "?page=2",
32    "note": "Page size is NOT configurable — Basecamp always paginates at exactly 20 items"
33  }
34}

Now assemble the Bubble interface. The architecture is a two-column layout: left column shows projects, right column shows the selected project's to-dos and messages. On your Bubble page, add a Repeating Group for projects. Set its type to 'Basecamp - List Projects result'. Set the data source to 'Get data from an external API → Basecamp - List Projects'. Inside each cell, add: a Text element with 'Current cell's item's name', a Text element with the creation date formatted with 'formatted as MM/DD/YYYY', and a progress percentage if you have todolist data (requires a second nested call or pre-loaded state). Add a workflow: When repeating group cell is clicked → Set state: selected project = Current cell's item → Run 'Basecamp - Get To-do Lists' with bucketId = Current cell's item's id → Set state: todolists = Result → Run 'Basecamp - Get Messages' with bucketId = Current cell's item's id and messageBoardId from dock → Set state: messages = Result. In the right column, add a second Repeating Group for to-do lists. Type: 'Basecamp - Get To-do Lists result'. Data source: page's todolists. Inside each cell: to-do list title, a progress bar showing completed_count/total_count, remaining count badge. Below or next to it, add a third Repeating Group for messages. Type: 'Basecamp - Get Messages result'. Show: subject, author name, and created_at formatted as a date. For a 'Load more' button: show it conditionally 'When todolists list count = 20' (indicating there may be more pages). On click: run Get To-do Lists with page=2, merge with existing state. RapidDev's team has built Bubble client portals that combine Basecamp project data with custom Bubble CRM views — if you need help structuring the portal architecture, reach out for a free scoping call at rapidevelopers.com/contact.

1{
2  "page_layout": {
3    "left_column": {
4      "element": "Repeating Group (type: Basecamp List Projects result)",
5      "data_source": "Get data from external API: Basecamp - List Projects",
6      "cell_contents": ["project name", "created_at formatted date", "status badge"]
7    },
8    "right_column": {
9      "todolists_rg": {
10        "element": "Repeating Group (type: Basecamp Get To-do Lists result)",
11        "data_source": "page's todolists custom state",
12        "cell_contents": ["title", "completion percentage", "remaining_count badge"]
13      },
14      "messages_rg": {
15        "element": "Repeating Group (type: Basecamp Get Messages result)",
16        "data_source": "page's messages custom state",
17        "cell_contents": ["subject", "author name", "created_at formatted date"]
18      }
19    }
20  },
21  "project_click_workflow": [
22    "Set state: selected_project = Current cell's item",
23    "Step 2: Basecamp - Get To-do Lists (bucketId = Current cell's item's id)",
24    "Set state: todolists = Result of step 2",
25    "Step 4: Basecamp - Get Messages (bucketId = ..., messageBoardId = ...)",
26    "Set state: messages = Result of step 4"
27  ]
28}

Polish the integration with three production-readiness improvements: proper pagination for large project data, Bubble privacy rules for any data you store, and WU-conscious API call patterns. For pagination: Basecamp's fixed 20-items-per-page limit is non-configurable. For to-do lists with more than 20 items, implement a 'Load more' button that passes `page=2`, `page=3`, etc. In Bubble, track the current page in a custom state (a number starting at 1). Each 'Load more' click: runs the relevant call with `page = currentPage + 1`, appends results to the list state using 'Set state: merge with list', and increments the page counter. This requires Bubble's paid plan for API Workflows if you want automatic next-page loading without user clicks. For Bubble data storage: if you store any Basecamp data in Bubble's database (for offline access or search), enable privacy rules on those data types. Go to Data tab → Privacy → set rules so only the owning user can read/write their records. Any Bubble data type without privacy rules is readable by all logged-in users. For WU optimization: avoid loading all project to-dos on page load. Instead, use lazy loading: load only the project list on page load, then load to-do lists and messages only when a user clicks a project. This reduces WU consumption significantly on dashboards with many projects. If you're on a heavy API call budget, consider caching project data in Bubble's database with a 'Last synced' timestamp and only refreshing when the data is more than 10 minutes old.

1{
2  "pagination_pattern": {
3    "state_currentPage": 1,
4    "load_more_workflow": {
5      "trigger": "Load more button clicked",
6      "step_1": "Basecamp - Get To-do Lists (bucketId=..., page=page's currentPage + 1)",
7      "step_2": "Set state: todolists = todolists merged with Result of step 1",
8      "step_3": "Set state: currentPage = currentPage + 1"
9    },
10    "hide_button_when": "Last load returned < 20 items (currentPage's result count < 20)"
11  },
12  "wu_optimization": {
13    "page_load": "Load projects list only (1 API call)",
14    "on_project_click": "Load todolists + messages for selected project (2 API calls)",
15    "avoid": "Loading all project details for all projects simultaneously on page load"
16  },
17  "privacy_rules": {
18    "note": "If storing Basecamp data in Bubble DB, enable privacy rules on the data type (Data tab → Privacy)"
19  }
20}