Strava

How to integrate Strava with Webflow

Fitness blogs, athlete portfolios, and club websites need live workout data without manual updates. Displaying Strava activities on your site automates content creation and keeps your audience engaged with real training progress.

You can integrate Strava with Webflow through native embeds for quick activity displays, automation platforms like Zapier for syncing data to Webflow CMS, or the Strava API for custom features like leaderboards and performance dashboards.

Use Strava's native embeds and widgets

Strava provides four embed types that display activities, routes, and profile feeds directly on Webflow pages. These include Individual Activity Embeds, Route Embeds, Profile Activity Feed Embeds, and Club Activity Feed Embeds.

Copy the embed code from Strava's interface and paste it into Webflow's Code Embed element. No API authentication or server setup required. This approach works for fitness blogs, athlete portfolios, and club websites that need to showcase recent workouts or planned routes. Activities and profiles must be set to "Everyone" (public visibility) for embeds to function properly.

The Strava activity and route sharing guide documents these embed types:

• Activity embeds: Display individual runs, rides, or workouts with interactive maps, statistics, and photos by clicking the share icon on any activity and selecting "Embed"
• Route embeds: Show planned routes with interactive maps, customizable elevation profiles, map styles (standard, satellite, terrain), and responsive width settings from the route page
• Profile activity feeds: Generate scrolling lists of recent activities from your Strava profile page by clicking "Share your Activities"
• Club activity feeds: Display recent activities from club pages to showcase community engagement

Implementation steps:

Navigate to Webflow's Embed component in the Add Panel under Components. Drag the element onto your page where you want the Strava content to appear. Paste the iframe code generated by Strava into the Embed Code Editor. The element supports up to 50,000 characters and works on free Webflow plans.

Requirements: Set activities and profiles to "Everyone" privacy for public embeds to display. The embeds render interactive maps that support pan, zoom, and segment highlighting without additional configuration.

Alternative locations: For site-wide Strava widgets in headers or footers, add embed code to custom code areas in site settings → Custom Code. This requires a paid Webflow site plan but applies the widget across all pages.

For dynamic content where each CMS item displays a different activity, use CMS custom code fields. Create a Plain Text field in your collection to store embed codes, then bind a Code Embed element to that field in your collection template. This allows each CMS item to display a unique Strava activity without manually editing individual pages.

Connect through automation platforms

Zapier provides pre-built connectors that sync Strava activity data to Webflow CMS automatically. When you complete a workout, the automation creates a new CMS item with activity details like distance, duration, type, and route data.

The "New or Updated Athlete Activities" trigger from Strava combined with Webflow's "Create Live Item" action enables this automation. This approach works for fitness blogs, training logs, and athlete portfolio sites that need automated content updates.

Zapier's Strava-Webflow integration supports workflows that trigger when new activities are created or updated in Strava. The visual interface maps Strava data fields to Webflow CMS fields without writing code.

Available triggers:

• New or Updated Athlete Activities: Fires when activities are created or modified in Strava
• New Club Activity: Triggers when club members post or update activities
• New Segment Effort: Activates when segment efforts are recorded

Available actions:

• Create Live Item: Publish activity data directly to live Webflow collections
• Update Item: Modify existing CMS entries when Strava activities change
• Find collection items: Search existing records before creating duplicates

Setup requirements:

Zapier handles OAuth 2.0 (secure authorization protocol) authentication automatically through visual prompts. Connect your Strava account by authorizing the requested scopes through Strava's OAuth 2.0 flow, then connect Webflow using a site-specific API token with appropriate OAuth scopes (such as cms:write for CMS operations). Map fields using dropdown menus that show available options from both platforms.

Test the workflow with a sample activity before activating. Monitor the automation dashboard for errors related to field mismatches or authentication issues.

Considerations: CMS collections have a maximum capacity of 10,000 items per site across all collections. Automation platforms cannot map CMS reference fields or multi-reference fields through standard integrations. Form triggers require at least one received submission before automation begins.

Build with the Strava API

The Strava V3 REST API gives you access to activity data, athlete profiles, and club information. This approach makes sense when you need custom filtering (show only runs over 10km), data transformations (calculate weekly mileage totals), or features that don't exist in standard embeds like performance comparisons or achievement tracking.

You'll need server-side code to handle authentication with OAuth 2.0 and implement webhook-based event processing to handle real-time activity updates.

API integration enables use cases like custom leaderboards showing aggregated statistics, activity feeds filtered by sport type or date range, automated blog content with calculated metrics beyond what Strava displays, and member dashboards that combine Strava data with other sources.

Authenticate users with OAuth 2.0

Strava requires OAuth 2.0 authentication for all API access. Create an application in Strava's developer portal to obtain client credentials, then implement the authorization flow server-side to protect your client secret. Note that access tokens have limited lifespans and must be refreshed using the refresh token provided during initial OAuth authorization.

Implementation steps:

Redirect users to https://www.strava.com/oauth/authorize with your client ID, redirect URI, and requested scopes. Handle the callback containing an authorization code, then exchange it for access and refresh tokens via POST to https://www.strava.com/oauth/token. Store both tokens securely.

Access tokens expire periodically and must be refreshed using the refresh token. When refreshing, the response includes both a new access token AND a new refresh token, which must both be stored to replace the previous values for subsequent refresh operations.

Available OAuth scopes:

• activity:read: Access public activity data only
• activity:read_all: Include private activities in API responses
• activity:write: Create, update, and delete activities
• profile:read_all: Retrieve complete athlete profile details
• profile:write: Modify athlete profile settings

Token refresh returns both a new access token and a new refresh token. Update your stored refresh token after each refresh operation to maintain continuous access.

Fetch activity data

The GET /athlete/activities endpoint returns lists of activities with summary information including distance, moving time, elapsed time, type, sport type, and aggregated metrics like average speed and kudos count. Use time-based pagination with before and after parameters to retrieve historical activities or recent workouts.

Retrieve detailed information for specific activities via GET /activities/{id}. Detailed endpoints provide GPS coordinates, split data, segment efforts, photos, and complete performance statistics.

Combine the activities list endpoint with webhook subscriptions for optimal efficiency. Use webhooks for real-time notifications of new activities, then call the list endpoint to backfill historical data during initial synchronization or recovery operations.

Create activities programmatically

POST /activities lets you create activities from custom data sources or training logs. Submit activity name, type, sport type, start time, and duration as required parameters. Include optional fields like distance, description, trainer status, and commute designation.

This endpoint requires the activity:write scope and accepts manual activity creation or file uploads. Created activities appear in the athlete's feed and count toward personal statistics.

Implement webhooks for real-time updates

The Strava Webhook Events API pushes notifications when activities are created, updated, or deleted, and when athletes revoke access. Subscribe by making a POST request to https://www.strava.com/api/v3/push_subscriptions with your callback URL and verification token.

Sync data to Webflow CMS

Combine Strava webhooks with Webflow's Collections API to automate content creation. When Strava webhooks trigger, fetch activity details via the Strava Activities API and map fields to Webflow CMS collections using POST or PUT requests to the items endpoints.

Common field mappings:

Map Strava's name field to Webflow text fields for activity titles. Convert type to Webflow option fields configured with sport types. Transform distance from meters to kilometers or miles for number fields. Format elapsed_time from seconds to readable duration strings. Map start_date_local timestamps to Webflow date fields.

Authenticate using site-specific API tokens with cms:write scope. Store tokens server-side and include them in Authorization headers as Bearer tokens. Set Content-Type and accept headers to application/json for proper request formatting. Per Webflow's REST API documentation, these tokens must be stored securely on the server side rather than exposed in client-side code.

Implementation pattern:

Create a server endpoint that receives Strava webhooks, extracts the activity ID from the payload, calls Strava's API to fetch complete activity data, transforms the data to match your Webflow CMS schema, and posts to Webflow's collections API.

Handle errors from either API gracefully and implement retry logic for transient failures. Remember that your endpoint must respond promptly to acknowledge webhook receipt, then process events asynchronously to avoid timeout failures.

Reference Webflow's CMS fields by their exact slugs (case-sensitive). Use the Collections API reference to understand required field formats and validation rules.

Manage athlete profiles

The GET /athlete endpoint returns comprehensive athlete information including identification details, location, profile images, social metrics like follower and friend counts, and preferences such as measurement units and weight. Update modifiable fields via PUT /athlete with the profile:write scope.

Access complete profile details beyond public information by requesting the profile:read_all scope during OAuth authorization.

What you can build

Integrating Strava with Webflow enables fitness-focused content automation, community engagement features, and personalized athlete experiences using CMS synchronization and webhook-based workflows.

• Automated activity blog: Display a live feed of workouts as blog posts with embedded route maps, performance statistics, and photos that update automatically when athletes complete activities
• Club engagement hub: Build a website for running or cycling clubs that showcases member activities, aggregated weekly mileage, upcoming group events, and achievements to strengthen community connections
• Coaching portfolio: Demonstrate training effectiveness by displaying client progress with performance improvements, consistency metrics, and workout completions pulled directly from Strava data
• Challenge campaign site: Create branded fitness challenge pages for athletic brands that show real-time participation counts, milestone celebrations, and leaderboards to drive event registrations and product launches