UserTesting

Before touching Bubble, confirm that your UserTesting account includes REST API access — this step will save you from building the integration only to hit a wall at initialization. Log in to UserTesting at https://app.usertesting.com. Click your name or avatar in the top-right corner and select Account Settings from the dropdown. Look for an API or Developer section in the left sidebar — this is where UserTesting displays your API key and shows the base URL for your account tier. If you do not see an API section, your plan does not include API access. Contact your UserTesting account manager or customer success representative and ask specifically about REST API access — they can enable it and send you documentation for the correct endpoint version and authentication header format for your account. Do not proceed to Bubble configuration until you have: 1. Your API key string 2. The base URL (typically https://api.usertesting.com/v1/ — but confirm this with your documentation) 3. The authentication header name (commonly X-Api-Key or Authorization: Bearer — confirm with your docs) Keep the API key private. It provides read access to all your UserTesting tests and participant data, including session video metadata. You will store it in a Private header in Bubble's API Connector, never in plain text anywhere in the app.

In your Bubble editor, click the Plugins tab in the left panel. Click 'Add plugins', type 'API Connector' in the search field, find 'API Connector' published by Bubble, and click Install. Once installed, the API Connector entry appears in your Plugins list — click it to open the configuration panel. Click 'Add another API' to create a new API group. In the Name field, type 'UserTesting API'. In the Authentication dropdown, leave it set to 'None' — you will use a manual header instead, which gives you more control over the exact header format UserTesting requires. Scroll to the Shared headers section. Click '+ Add a shared header'. In the Key field, type the authentication header name from your UserTesting documentation (for example: X-Api-Key). In the Value field, paste your UserTesting API key. Click the 'Private' checkbox next to this header — this marks the value as a server-side secret so it is never sent to or readable by the browser. This is the correct and only place your API key should live in Bubble. Add a second shared header: Key = Accept, Value = application/json. This ensures UserTesting returns JSON rather than any other format. The API group configuration now looks like this: ```json { "api_group_name": "UserTesting API", "base_url": "https://api.usertesting.com/v1", "shared_headers": [ { "key": "X-Api-Key", "value": "<YOUR_KEY_PRIVATE>", "private": true }, { "key": "Accept", "value": "application/json" } ] } ``` Do not click 'Initialize' at the API group level yet — initialization happens at the individual call level after you add your first endpoint.

1{
2  "api_group_name": "UserTesting API",
3  "base_url": "https://api.usertesting.com/v1",
4  "shared_headers": [
5    { "key": "X-Api-Key", "value": "<YOUR_KEY_PRIVATE>", "private": true },
6    { "key": "Accept", "value": "application/json" }
7  ]
8}

With the UserTesting API group configured, click 'Add another call' inside the UserTesting API group. This is where you define the specific endpoint Bubble will call. Configure the call: - Name the call: List Tests - Set Method to GET - Set the Path to: /tests (this appends to your base URL, resulting in https://api.usertesting.com/v1/tests) - Set 'Use as' to 'Data' — this tells Bubble the call returns a list of records that can be displayed in a Repeating Group or used as a data source Before initializing, do NOT click 'Initialize call' immediately — the Initialize step requires a successful live API response to auto-detect the field schema. Bubble cannot detect fields from a failed or empty response. Click 'Initialize call'. Bubble sends a real GET /tests request to UserTesting using your Private API key. If the request succeeds, Bubble displays the response structure and lets you confirm the field paths. If initialization fails, you will see the error 'There was an issue setting up your call' — see the troubleshooting section for causes. Once initialized, expand the response schema Bubble detected. Look for the array key that contains your tests — it is likely 'tests', 'data', or 'results' depending on your UserTesting API version. In Bubble's field path selector, point the repeating data at this array key. Note important fields UserTesting returns per test record: - id — unique test identifier (you will use this as a dynamic path parameter for session queries) - name or title — test name - status — 'draft', 'live', or 'complete' - completed_session_count — sessions finished so far - participant_count or session_count_target — target participants - url or share_url — link to the UserTesting results page Bubble assigns auto-generated field names for each detected key. You will reference these when building the Repeating Group in the next step.

1{
2  "call_name": "List Tests",
3  "method": "GET",
4  "path": "/tests",
5  "use_as": "Data",
6  "parameters": [
7    { "key": "status", "value": "", "optional": true },
8    { "key": "page", "value": "1", "optional": true },
9    { "key": "per_page", "value": "25", "optional": true }
10  ]
11}

With the List Tests call initialized, you can now build the research dashboard page in Bubble's editor. Navigate to the Design tab and open (or create) the page where your research dashboard will live. Add a Repeating Group element and stretch it to fill the main content area. In the Repeating Group's property panel: - Set 'Type of content' to the API Connector sub-type Bubble created for your UserTesting tests (it will appear in the dropdown alongside your Bubble data types) - Set 'Data source' to 'Get data from external API' → select 'UserTesting API - List Tests' - Set 'Min height of row / cell' to 120px and 'Columns' to 1 for a card layout Inside the first cell of the Repeating Group, add these elements: 1. A Text element for the test name: 'Current cell's UserTesting API List Tests' → name field 2. A Text element for the status badge: same path → status field. Apply conditional formatting: when status = 'live', change background to yellow; when status = 'complete', change background to green 3. A Text element for participant progress: 'Completed: [completed_session_count] / [participant_count]' 4. A Link element (or Button with 'Go to external website' workflow) that opens the test's url field in a new tab — this links directly to the UserTesting results page Add a dropdown above the Repeating Group with static choices: All, Live, Complete. In the Repeating Group's Data source, add a filter: 'status = Dropdown's value' with a condition 'unless Dropdown's value = All'. This lets the team filter visible tests without additional API calls. For participant progress, add a visual progress bar using a Group element with a fixed background and a nested Group whose width is set to a percentage formula: (completed_session_count / participant_count) × 100%. Wrap this in a 'When current cell's completed_session_count is not 0' conditional to avoid division-by-zero. If you are building an internal admin tool and want to restrict who can see participant data, apply a Bubble Privacy Rule to the UserTesting API data type: Data tab → Privacy → Add a rule that only users with role 'Research' or 'Admin' can see this data. Always apply Privacy Rules when building Bubble pages that display data from external APIs containing participant information.

The most valuable part of the research dashboard is the ability to click into a test and see individual participant sessions. This requires a second API Connector call with a dynamic path parameter. In the API Connector plugin panel, inside the UserTesting API group, click 'Add another call'. Configure: - Name: Get Sessions - Method: GET - Path: /tests/<test_id>/sessions (Bubble uses <angle_bracket> syntax to mark dynamic path segments — replace 'test_id' with the actual parameter name you want to use) - Use as: Data In the Parameters section, add: - Key: test_id, Value: a real test ID from your account (for initialization only), mark as a path parameter Click 'Initialize call'. Bubble sends a GET request with the real test ID and detects the session response schema. The session response typically contains fields like: id, participant_id, duration_seconds, rating, task_completion_rate, completed_at, and a url or video_url pointing to the session replay. Note: UserTesting video replay links in the session response open in UserTesting's own player — they are NOT embeddable iframes. Surface them as external URL buttons, not as embedded video elements. To wire up the drill-down, add a Popup or side panel to the dashboard page. When a test card in the Repeating Group is clicked, a 'Show Popup' workflow action fires and simultaneously saves the clicked test's id to a Custom State (name it 'selected_test_id', type Text). Inside the Popup, add a second Repeating Group for sessions with: - Type of content: the API Connector sub-type for sessions - Data source: 'Get data from external API' → UserTesting API - Get Sessions - Pass the 'selected_test_id' Custom State value as the test_id parameter Each session row in the inner Repeating Group shows: participant ID, duration in minutes (duration_seconds ÷ 60), overall rating (1-5), task completion rate, and a 'View Replay' button that opens the session URL in a new tab. For any page or popup that displays UserTesting participant session data, re-verify your Bubble Privacy Rules apply to the relevant data types. RapidDev's team has built hundreds of Bubble data dashboards with external API integrations — if you need help structuring your research operations tooling, reach out at rapidevelopers.com/contact.

1{
2  "call_name": "Get Sessions",
3  "method": "GET",
4  "path": "/tests/<test_id>/sessions",
5  "use_as": "Data",
6  "path_parameters": [
7    { "key": "test_id", "value": "<dynamic — set from Custom State>" }
8  ],
9  "query_parameters": [
10    { "key": "status", "value": "completed", "optional": true }
11  ]
12}

To turn the dashboard from a live API viewer into a persistent research repository, create a Bubble data type that stores analyst notes, key findings, and tags linked to each UserTesting test. Navigate to the Data tab in Bubble's left panel and click 'New type'. Name the type 'Research Insight'. Add the following fields: - test_id (field type: text) — stores the UserTesting test ID this insight is linked to - analyst_notes (field type: text) — free-form observations from the research analyst - key_finding (field type: text) — the headline takeaway from this test - product_area (field type: option set or text) — the product area this research informs - tagged_by (field type: User) — records who added the insight - created_date (field type: date) — auto-set on creation On the research dashboard, below each test card in the Repeating Group, add an expandable Group (show/hide via a toggle workflow) containing: 1. A Multi-line Input for analyst notes 2. A text Input for key finding 3. An Option Set dropdown for product area 4. A 'Save Insight' button The 'Save Insight' button's workflow: Create a new 'Research Insight' with test_id = current cell's test id, analyst_notes = Multi-line Input's value, key_finding = Input's value, product_area = Option set dropdown's value, tagged_by = Current User. Below the save form, display existing Research Insights for this test using a nested Repeating Group: - Type of content: Research Insight - Data source: Search for Research Insights where test_id = current cell's test id - Sort by: created_date, descending Apply a Privacy Rule to the Research Insight data type: only users with role 'Research' or 'Admin' can view and edit insights. This keeps analyst findings from being visible to anyone with a Bubble app URL. This architecture combines UserTesting's raw session data (from the API) with your team's curated analysis (from Bubble's database), making the dashboard significantly more valuable than a read-only API viewer.