Framer

Before configuring anything in Bubble, collect the two pieces of information you need from Framer: your API token and the Collection ID of the CMS collection you want to manage. To generate an API token, open your Framer project, click the project name in the top-left to open Project Settings, then navigate to the Integrations tab. Scroll to the API section and click 'Generate token'. Framer will display a token string starting with a long alphanumeric sequence — copy it immediately and store it somewhere secure (a password manager, not a plain text file). Framer only shows the token once; if you lose it, you must generate a new one. To find your Collection ID, navigate to the CMS panel in Framer (click the CMS icon in the left sidebar). Click on the collection you want to manage from Bubble. Look at the URL in your browser — it will contain a path segment that looks like `/cms/{collectionId}`. Alternatively, make a test API call to `https://api.framer.com/store/api/v1/collections` using your token to list all collections and their IDs in a JSON response. Note: Framer CMS API access is gated behind the Basic plan ($15/month) or above. If your Framer project is on the Free or Mini plan, API calls to `/collections/{id}/items` will return a 403 Forbidden error. Upgrade your Framer plan before proceeding if needed.

1GET https://api.framer.com/store/api/v1/collections
2Authorization: Bearer your-framer-api-token-here

In your Bubble editor, click the Plugins tab in the left sidebar. Click 'Add plugins', type 'API Connector' in the search box, and install the API Connector by Bubble (it is free). Once installed, click 'API Connector' in your Plugins list to open the configuration panel. Click 'Add another API' to create a new API group. Name it 'Framer CMS'. In the Shared headers section of this API group, click 'Add header'. In the Key field type `Authorization` and in the Value field type `Bearer ` followed by your Framer API token — the full value should look like `Bearer frm_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`. Check the 'Private' checkbox to the right of this header row. This checkbox is critical: it ensures Bubble's servers never expose the header value in client-side network requests, logs visible to users, or Bubble's debugger. The token stays entirely on Bubble's server side. Leave the Authentication dropdown set to 'None or self-handled' since you are handling auth manually via the header. Now click 'Add another call' to create your first API call. Name it 'List CMS Items'. Set the type to GET. In the URL field enter: `https://api.framer.com/store/api/v1/collections/YOUR_COLLECTION_ID/items` — replace YOUR_COLLECTION_ID with the actual Collection ID you noted in the previous step. Set the 'Use as' dropdown to 'Data' since this call returns a list of CMS items for display. This tells Bubble to treat the response fields as a data type you can bind to Repeating Groups and text elements.

1{
2  "method": "GET",
3  "url": "https://api.framer.com/store/api/v1/collections/<collection_id>/items",
4  "headers": {
5    "Authorization": "Bearer <framer_api_token - Private>"
6  }
7}

The initialize call is how Bubble learns the shape of Framer's response — it makes one real API request and maps the returned fields into Bubble data types you can use in Workflows and UI bindings. This step is mandatory; skipping it means your call has no fields and cannot be used in the Bubble editor. Click the 'Initialize call' button next to your 'List CMS Items' GET call. A panel will appear asking for test values for any dynamic parameters. Since this GET call has no dynamic parameters (the collection ID is hardcoded in the URL), click 'Send' directly. Bubble will make the actual API request to Framer using your Private token and display the response. If the call succeeds, you will see the Framer CMS items array with your collection's fields — for example, title (text), slug (text), body (text), published_date (date), hero_image (URL). Important: The initialize call only works if your Framer CMS collection has at least one published item. If the collection is empty, the response will be an empty array and Bubble will detect no fields. Add at least one real or placeholder item in Framer CMS before running Initialize. Review each detected field and confirm the field types make sense. Bubble typically detects text fields as 'Text' and ISO date strings as 'Date' — but verify date fields specifically, as they sometimes come through as 'Text' if the format is unusual. Click the type dropdown next to each field to change it if needed. Click 'Save' once all fields look correct. The detected field set becomes the 'Framer CMS Items' data type in your Bubble editor, available for binding in Repeating Groups, text expressions, and Workflow conditions.

Now build the write side of the integration: Bubble Workflows that create or update Framer CMS items via POST and PATCH calls. Click 'Add another call' in your Framer CMS API group to create the create call. Name it 'Create CMS Item'. Set the type to POST and the URL to `https://api.framer.com/store/api/v1/collections/YOUR_COLLECTION_ID/items`. In the Body section, set the body type to 'JSON body'. Enter the JSON structure matching your Framer CMS collection's fields with dynamic placeholders for the values: ```json { "fields": { "title": "<item_title>", "slug": "<item_slug>", "body": "<item_body>" } } ``` The exact field names inside `fields` must match your Framer CMS collection field names exactly (case-sensitive). Set 'Use as' to 'Action'. Click 'Initialize call', fill in test values for each dynamic field, and send. A successful response returns the newly created CMS item object with its Framer-assigned ID. For a PATCH (update) call, create another call named 'Update CMS Item', set type to PATCH, and use the URL: `https://api.framer.com/store/api/v1/collections/YOUR_COLLECTION_ID/items/<item_id>` — where item_id is a dynamic field you will populate at runtime from the Bubble database record that tracks each Framer item's ID. Once both calls are initialized, go to the Workflow editor. Add a workflow to a button click or form submission event. Click 'Add an action' → Plugins → 'Framer CMS - Create CMS Item'. Map the dynamic parameters to Bubble input values — for example, item_title = Input Title's value, item_slug = Input Title's value formatted as a URL-safe slug. RapidDev's team has connected dozens of Bubble admin dashboards to third-party CMS systems — if you need help structuring your admin UI or mapping complex data, book a free scoping call at rapidevelopers.com/contact.

1{
2  "method": "POST",
3  "url": "https://api.framer.com/store/api/v1/collections/<collection_id>/items",
4  "headers": {
5    "Authorization": "Bearer <framer_api_token - Private>",
6    "Content-Type": "application/json"
7  },
8  "body": {
9    "fields": {
10      "title": "<item_title>",
11      "slug": "<item_slug>",
12      "body": "<item_body>"
13    }
14  }
15}

If you want Bubble to react when a Framer editor publishes content, you can configure a Framer webhook that fires to a Bubble Backend Workflow endpoint. This requires a paid Bubble plan (Starter or above) since Backend Workflows (API Workflows) are not available on the Bubble Free plan. In your Bubble editor, go to Settings (gear icon) → API tab. Enable 'This app exposes a Workflow API' toggle. Then navigate to the Backend Workflows section — click the 'Backend workflows' link that appears in the left panel of the editor or access it via the dropdown menu next to your app name. Click 'Add a new API workflow'. Name it 'Framer CMS Published'. Enable the option 'This workflow can be run without authentication' — Framer's webhook sender cannot pass your Bubble API token, so this endpoint must be publicly accessible. Click 'Detect request data' — Bubble will display a listener URL and wait for an incoming webhook. In Framer, open Project Settings → Integrations → Webhooks. Add a new webhook and paste your Bubble Backend Workflow detection URL. Set the trigger to 'CMS item published' or the equivalent event in your Framer version. Framer will send a test payload to the detection URL. Bubble will detect the request body fields — typically including the item ID, collection ID, and published fields. Click 'Save' to confirm the detected schema. Drop the `/initialize` suffix from the URL before saving it in Framer's webhook settings — the detect URL has an `/initialize` path for one-time schema detection; the production URL does not. Now build the workflow body: add steps after the trigger to create a Bubble database record, send a notification, or call another API based on the webhook payload. The detected fields (item_id, collection_id, etc.) are available as dynamic values in each step.

1{
2  "endpoint": "https://yourapp.bubbleapps.io/api/1.1/wf/framer-cms-published",
3  "trigger": "CMS item published",
4  "sample_payload": {
5    "item_id": "frm_item_abc123",
6    "collection_id": "frm_col_xyz789",
7    "slug": "my-blog-post",
8    "title": "My Blog Post",
9    "published_at": "2026-07-10T12:00:00Z"
10  }
11}

With both directions configured, run an end-to-end test to validate the full flow and understand the most important architectural nuance of the Framer CMS API. For the Bubble → Framer direction: trigger your 'Create CMS Item' Workflow from the Bubble preview. Open your Framer project → CMS panel → your collection. The new item should appear within a few seconds marked as 'Draft' or 'Staged' but NOT yet visible on your live Framer site. This is the critical behaviour to understand: updating a Framer CMS item via the API does NOT automatically publish it to the live site. The item exists in the CMS but Framer still requires a manual or scheduled Publish to push changes live. As of the current Framer API version, there is no programmatic publish endpoint — you cannot trigger a site publish via the API. This means your workflow is: Bubble updates content → content queues in Framer CMS → Framer editor clicks Publish → live site updates. If your team needs content updates to go live without a manual Framer publish step, consider an alternative architecture: instead of using Framer CMS for the dynamic content, fetch the content directly from Bubble's data via a public API endpoint and display it on the Framer page using Framer's HTTP variables (Connect panel → Variables → Add API) — this way Framer always shows live Bubble data without a separate publish step. For the Framer → Bubble direction (if configured): publish a CMS item in Framer and verify the Bubble Backend Workflow ran by checking Logs tab → Workflow logs. Confirm the payload fields match what you set up during detection. Check your Bubble Logs tab for WU (Workload Unit) consumption — each API Connector call to Framer consumes WU on Bubble's post-2023 pricing. For apps that update Framer CMS frequently (more than a few times per hour), monitor your WU budget in the Bubble dashboard and consider batching updates if needed.