Strava

Race sites, club pages, and coaching sites need live training data. You cannot record GPS activities, generate elevation profiles, or track workout history in Webflow, and redrawing route maps as static images means stale content and manual work every time a course changes.

Strava fills that gap two different ways, and the difference matters more than it first looks. Strava's own embed code renders routes, activities, and feeds on a public page with no credentials involved. The Strava API is a separate proposition: it requires OAuth, a server-side token exchange, and compliance with an agreement that limits what you may store and who is allowed to see it. There is no anonymous Strava API you can call from a page.

Race directors publish course routes with aid-station waypoints. Run club organizers show member activity feeds. Coaches and fitness creators display their own training as proof of work. Agencies building sports and event sites take the API path for private, authenticated dashboards where each athlete sees only their own data.

How to integrate Strava with Webflow

Embeds are the path for anything a site visitor will see, and the API is the path for private per-athlete views behind a login. Strava runs its own MCP connector for AI analysis of your training history, and Webflow's MCP server handles the site-building half, so an agent can place an embed or model a Collection for you. Both are covered further down, along with the rules that decide which method is even open to you.

What is Strava? Strava is a fitness tracking social network with more than 195 million users in more than 185 countries, per Strava's June 2026 announcement. It records activities from a phone or GPS device across running, cycling, swimming, skiing and more, and it publishes a V3 API, the same API used by the Strava mobile apps.

Teams pair Strava with Webflow when training data belongs on a public site: a race course with aid-station waypoints, a club's recent rides, a coach's own weekly volume. The Webflow Marketplace has no Strava app, so every working setup is either Strava's embed widget, an automation platform writing into the CMS, or custom API work on a backend you run. Most builds start with embeds and only reach for the API when a private dashboard is the actual requirement.

Start with Strava's API Agreement and brand rules

Read the agreement before you design the build, because it rules out several things people assume are fine. Strava publishes two binding documents: the Strava API Agreement, effective June 1, 2026, and the Strava API Policy incorporated into it. Where the two conflict, the Agreement controls. We are pointing at Strava's own text here rather than paraphrasing it into advice, and you should open both before writing code.

The clauses that decide what a Webflow build can look like:

• Display is limited to the authenticated user: Policy section 2.3 says Strava Data from a specific user may be displayed only to that user, even where the data is publicly viewable on Strava itself.
• Caching is capped at seven days: section 6.2 sets a seven day maximum on cached Strava Data, requires immediate removal once a resource is gone from Strava, and bars displaying that data to anyone other than the Strava user using your application.
• Deletions have deadlines: section 6.3 requires user deletions to be reflected within 48 hours, and section 7.4 requires full deletion within 30 days when a user revokes authorization or asks you to delete.
• Storage and aggregation are restricted: section 5.5 bars keeping Strava Data in a persistent index, including archives and search indexes, and section 5.4 bars analytics or aggregation even on de-identified data.
• Attribution is conditional, not automatic: the Strava brand guidelines, last revised September 29, 2025, require the "Powered by Strava" or "Compatible with Strava" wording if you describe interoperability, and "View on Strava" as the text on any link back to the original data.

Read against those clauses, a public CMS archive of Strava activities is the build most likely to run into trouble, and Strava's embed widget is the one that avoids the question entirely, because the data never lands in your systems. Take that as a reason to open sections 5 and 6 yourself rather than as legal advice from us.

Add Strava embeds with the Code Embed element

Strava generates ready-made embed code for four content types, and each pastes straight into a Code Embed element. No API credentials, no token management, and no seven day clock, because Strava serves the widget itself. You can embed an individual activity, a route, a profile activity feed, or a club activity feed. Privacy settings gate what is embeddable: individual activities need both the profile and the activity set to "Everyone," routes must be public, and club feeds show only activities set to "Everyone."

Embed an activity or route

Route embeds render an interactive map with an optional elevation profile, custom waypoints, and a 3D Flyover view. Embed code generation works only on the Strava website, not the mobile app.

To embed a route:

1. Set the route's privacy to "Everyone" on strava.com and save it.
2. On the route details page, click the down-arrow icon next to Duplicate, then Embed. For an activity, click the share icon on the activity page and select Embed.
3. Choose whether to include the elevation profile, pick default units and map style, and set fixed or responsive width, then copy the code.
4. In Webflow, open the Add panel, drop a Code Embed element on the page, and paste the code.
5. Click Save and close, then publish the site. Script-based embeds show only a placeholder on the canvas and render on the published site.

Club owners and admins can link a route embed to their Strava club, which changes the footer reference from the athlete account to the club. If an older embed has stopped rendering, it is on the retired strava.com/activities/{id}/embed/{token} format. Regenerate the code from the activity's share menu and the new one will use strava-embeds.com/activity/{id}.

Embed a profile or club activity feed

The profile feed widget updates as new activities are logged, which suits a "recent training" section that should never go stale. The profile widget shows either a recent rides/runs list or a last-week summary, and the club widget shows the club's recent activities.

To embed a feed:

1. On your Strava profile page, click Share your Activities below your stats. For a club, open the club page and click Share Club Activities.
2. Copy the code for the card you want, either the recent rides/runs list or the weekly summary.
3. Paste it into a Code Embed element in Webflow and publish.

An embedded profile card displays activities set to "Everyone" or "Followers" and only those matching your default sport type, while club cards display "Everyone" activities only. Embeds carry Strava's own styling and Strava documents no CSS customization. Move to automation only when you need activity data as structured CMS content you can design around, and only after you have squared that against the caching and display rules above.

Connect with Zapier, Make, or other automation tools

Automation platforms turn a Strava workout into a Webflow CMS item without server code, and you design activity pages with a Collection List instead of an iframe. Note first that Policy section 5.16 addresses abstraction layers, integration platforms, and pass-through proxies that re-expose the Strava API, and section 6.2 caps how long you may hold the data. A CMS copy of Strava activities sits inside both of those clauses, so decide whether your build is covered before you wire it up.

The connections that exist today:

• Zapier: the Strava and Webflow listing pairs the instant "New Athlete Activity" trigger with "Create Live Item" to publish a workout, or "Create Item" to stage it as a draft for review.
• Make: the "Watch Activities and Athletes" module feeds "Create an Item" or "Update an Item", and you assemble the scenario yourself because no prebuilt template ships for the pair.
• n8n: the "Get all activities" node into "Item: Create" batch-imports historical workouts, which is also the shape most likely to collide with the bulk-export restriction in section 5.5.
• IFTTT: the "New activity by you" trigger connects to "Create live collection item", built by hand in the applet editor rather than from a published applet.
• Webflow to Strava: a "New Form Submission" trigger can call Strava's "Create Activity" action, which logs a workout entered on your site back into Strava and moves data in the direction the display rules do not restrict.

Each of these still runs on an OAuth authorization the athlete grants, so the platform is saving you the token plumbing rather than removing the agreement. If the output is a page visitors will read, the embed widget is the cleaner answer.

Build with the Webflow and Strava APIs

The API path is for filtered activity feeds and private athlete dashboards behind a login, and it requires server-side development. Strava's token exchange needs the confidential client_secret, Webflow's custom code fields run no server-side language, and Code Embed executes nothing on a server, so a backend is not optional. Keep credentials in a function on Netlify, Vercel, or Webflow Cloud. Register the application first, per Strava's getting started guide, to get a client_id and client_secret, then implement OAuth 2.0 with only the scopes you need, such as activity:read or activity:read_all.

What each side of the build gives you:

• Strava API v3: activities, athlete stats, segments, segment efforts, and routes, returned as JSON to a server holding a valid access token.
• Webflow's Data API: CMS collections and items in the Webflow CMS, including live create, update, and unpublish endpoints.
• Webflow webhooks: events such as collection_item_created, for the cases where your backend needs to react to something happening in Webflow.
• Rate limits and athlete capacity: the default allowance is 200 requests per 15 minutes and 2,000 per day overall, with 100 per 15 minutes and 1,000 per day on non-upload endpoints, per Strava's rate limit page.
• Single Player Mode by default: that same page states every newly created app has an athlete capacity of 1, that a self-service upgrade raises it to 10 with 400 requests per 15 minutes and 4,000 per day, and that going beyond 10 connected athletes needs Strava's review, which is not guaranteed.

That capacity ceiling is the practical answer to most public site ideas: an unreviewed app serves one athlete. Plan the review, or plan around the API.

Sync activities in real time with Strava webhooks

Strava recommends webhooks over polling, and each application gets one subscription covering all of its authorized athletes. Events fire when an activity is created or deleted, or when its title, type, or privacy changes.

To set up webhook-driven CMS sync:

1. Deploy a public HTTPS endpoint on your serverless platform of choice.
2. Register the subscription with a POST to /api/v3/push_subscriptions carrying client_id, client_secret, callback_url, and verify_token, per the Strava webhooks documentation.
3. Answer Strava's validation GET within two seconds with HTTP 200 and a JSON body echoing hub.challenge.
4. On each event POST, return HTTP 200 within two seconds, then fetch the full record with GET /api/v3/activities/{id}, because the payload carries only identifiers such as object_id and owner_id.
5. Write to the CMS with the create live item endpoint, which needs the cms:write scope plus name and slug in fieldData.

Map update events to the live PATCH endpoint. On delete, unpublish the live item, then separately delete the underlying staged CMS item and remove any stored copy of the activity. A payload containing "authorized": "false" means the athlete revoked access, which starts the 30 day deletion clock in section 7.4. Two dates belong in your calendar: per the Strava API changelog, the Club Activities, Club Members, and Club Admins endpoints are removed on September 1, 2026, and the API base URL moves from www.strava.com/api/v3 to api-v3.strava.com from January 4, 2027.

Display athlete stats through a serverless proxy

Browser JavaScript on a Webflow page cannot call the Strava API directly. Putting an access token in client-side code exposes it to every visitor, and CORS blocks browser-origin requests to the Strava API in any case. A serverless proxy holds the credentials and returns only the values the page needs, to a page only the authenticated athlete can reach.

To implement the proxy:

1. Store client_id, client_secret, and the refresh token in the function's environment variables.
2. Refresh the access token against Strava's OAuth token endpoint. Access tokens expire six hours after they are created, and each refresh returns a new refresh token that replaces the old one, per the Strava authentication docs, so persist the newest value.
3. Call GET /api/v3/athletes/{id}/stats for recent, year-to-date, and all-time totals, and return only the fields the page renders.
4. Fetch the proxy from a script added in Page settings using custom code in the head and body tags, and write the values into your layout.

Gate that page so only the athlete who authorized the app can load it, and apply the brand guidelines wording if you attribute the data or link back to Strava.

Where AI agents fit with Strava data

Strava launched its own MCP connector on June 1, 2026, letting subscribers query their own training history through Claude with read-only access scoped to their account and revocable from Strava settings. Policy section 3.5 names it the sole authorized first-party agent interface, section 5.16 bars you from operating your own MCP server over the Strava API, and section 5.3 bars feeding Strava Data into an AI application at all, including retrieval and context-window ingestion. So the AI analysis happens on Strava's side, not yours.

Webflow's half is unaffected, because it never touches Strava Data. The Webflow MCP server lets an agent place the Code Embed, model the Collection your activity pages render from, and manage registered custom code, all inside your existing Webflow permissions and roles. It is available on the free Starter plan, so there is no upgrade to clear before you try it.

What you can build with the Strava Webflow integration

Strava and Webflow together publish live routes and activity feeds on a public site, and support private per-athlete stat views behind a login, without anyone re-exporting maps or retyping numbers.

• Race course pages with interactive routes: add one route embed per stage or distance, each rendering an interactive map with the elevation profile, custom waypoints for aid stations, and Flyover.
• Club community hubs: drop a club activity feed embed onto a run club's site so visitors see members' "Everyone" activities, paired with a library of route embeds for the club's regular loops.
• Coach and creator training sections: a profile feed widget keeps a "recent training" block current on its own, which is the lowest-maintenance way to show proof of work on a public page.
• Private athlete stat dashboards: a serverless function pulls recent, year-to-date, and all-time totals and renders them on an authenticated page where each athlete sees only their own data, which is the shape the display rules were written for.

If the feed on the page is the whole job, the embed route is the one to copy. Our Instagram feed guide walks the same embed-and-publish pattern end to end on a Webflow page.