Strava

How to integrate Strava with Webflow

Use native embeds for simple activity display, Zapier for dynamic CMS updates, or Strava's API for filtered feeds and custom dashboards.

The Strava API v3 provides REST endpoints for activities, statistics, segments, routes, and webhooks. The Webflow Data API v2 enables programmatic CMS manipulation. API implementations require serverless infrastructure (AWS Lambda, Vercel, or Netlify Functions).

Native embeds for activities and routes

Strava offers four embed types, including individual activities, routes, profile feeds, and club feeds. According to the Strava embed documentation, copy the embed code from any public activity/route and paste it into the Webflow Code Embed element. Both profile and activity must be set to "Everyone" visibility.

To implement:

• Set visibility to public: Profile and activities require "Everyone" privacy settings
• Copy embed codes: On strava.com, click Share > Embed
• Add Code Embed elements: Paste HTML into Webflow's Code Embed settings
• Enable dynamic CMS: Store codes in Plain Text fields within Collections, bind to Code Embed elements

Customization can be done via data attributes, available per route, as documented in the route embedding documentation. It works best for static showcase pages and athlete portfolios.

Automation platforms for CMS synchronization

Zapier's Strava-Webflow integration syncs activities to CMS without code. The pre-built template creates published CMS items when activities are logged.

Create a workflow with Set "New Athlete Activity" as trigger, "Create Live Item" as action, map Strava fields to Webflow Collection fields.

Build with Webflow and Strava API

Custom API implementations require OAuth 2.0 with token refresh (tokens expire ~6 hours), serverless infrastructure, and Webflow's Data API. New apps require a 2-4 week Strava Developer Program approval.

Core components:

• OAuth 2.0: Implement via Strava's /oauth/authorize and POST /oauth/token
• Token management: Store refresh tokens in a secure database, implement automatic refresh
• Serverless endpoints: Handle auth callbacks, API fetching, webhook processing
• Webflow API: Use the Create Items endpoint for CMS updates

The webhooks system sends real-time notifications for create/update/delete events, which is preferable to polling.

Fetching activity data

GET /athlete/activities lists workouts (200/page max) with before/after timestamp filtering. GET /activities/{id} returns details requiring activity:read or activity:read_all scopes.

const response = await fetch(
  'https://www.strava.com/api/v3/athlete/activities?per_page=30&page=1',
  { headers: { 'Authorization': `Bearer ${accessToken}` } }
);

Activity objects include id, name, distance (meters), moving_time (seconds), total_elevation_gain, type, start_date, and map polyline. Map to Webflow fields: Number for distance/elevation, Text for name, Date/Time for start_date.

Displaying athlete statistics

GET /athletes/{id}/stats returns 4-week, YTD, and all-time totals by activity type. GET /athlete provides profile info (requires profile:read_all). Update statistics daily/weekly to reduce API consumption.

Building segment leaderboards

GET /segments/{id}/leaderboard displays rankings with gender, age, weight, and date filters. GET /segments/explore discovers segments by lat/lng bounds. Requires API implementation—native embeds and Zapier insufficient.

Implementing real-time webhooks

Subscribe via POST /push_subscriptions with callback URL and verify token. Strava validates by sending hub.challenge (echo within 2 seconds).

app.get('/webhooks/strava', (req, res) => {
  if (req.query['hub.mode'] === 'subscribe' && req.query['hub.verify_token'] === VERIFY_TOKEN) {
    res.json({"hub.challenge": req.query['hub.challenge']});
  } else { res.sendStatus(403); }
});

app.post('/webhooks/strava', (req, res) => {
  res.status(200).send('EVENT_RECEIVED');
  processEventAsync(req.body);
});

Event types: create, update, delete, and athlete deauthorization (authorized: false). Implement idempotent processing using object_id + event_time for deduplication.

What you can build

Integrating Strava with Webflow lets you build fitness-focused sites that display activity data, routes, and athlete achievements.

• Race event websites: Display routes with interactive maps and elevation profiles
• Athlete portfolios: Show activities, statistics, and achievements via embeds or Zapier automation
• Running club hubs: For member activity streams and achievements. The Club feeds require "Everyone" visibility
• Coaching platforms: Automated CMS updates for client progress tracking. Plan for CMS capacity limits