How to Embed a Strava Route

Once you’ve created the perfect route, you want to include it on your event or club website. Athletes will be able to learn more about the route or event and can save it straight to their Strava accounts from your site! 

Check out a few examples

• Valencia Marathon

• L'Etape du Tour

• Boulderthon

• Tour de France Femmes avec Zwift

You can find the route embed code on the Route Page on the web or the My Routes Page. On the Route Page, click into the overflow menu to reveal the embed option.

On the My Routes Page, click the three dot menu to reveal the embed option.

When you click “embed” you’ll be presented with this modal. Here you can see a preview of what the route will look like on your site. You can even interact with the route just like your site visitors will be able to. 

You will also see an orange button labeled “Flyover” on the lower right corner of the map. Viewers of your route embed will be able to click this button and view a 3D immersive Flyover of the route. Viewers can exit the fly-through at any time by clicking the “x” button.

On this screen you can change the settings for your embedded route

• Show elevation profile. if you’d like to show the route without an elevation profile (visible just below the map in the example), uncheck this box.

• Units. this will change the default units shown when a website visitor views the embed. The viewer is able to change these if they’d like to view in different units. 

• Embed width. “Fixed” width embeds are as wide as shown in the preview. “Responsive” width embeds will be as wide as the column on the page where they are embedded.  

• Map Style. This allows you to pick the default map style that viewers will see when they interact with the embed. The viewer will have the option to change this as they’re viewing the map as well. 

• Map Orientation. In the “preview” section on the right of the screen, you can ctrl + click & drag (or just click & drag) to reorient the map. Once the map is to your liking, copy the embed code. What you see in this preview is exactly what your site visitors will see when they view the embed.

RELATED: How to create a route with Strava’s Route Builder

If you are the Owner or Admin of a Strava club, you will see the option to link your route to one of your clubs. This will change the footer of the embed from referencing your athlete account to referencing the club you choose. It also changes the button from “View on Strava” to “Join Strava Club.” You can use this to drive traffic to your club page! Also, if your club is verified, the verified check mark will appear on the embed footer. 

Once you’ve got the settings you’re happy with, click the orange “copy embed code” and add that snippet of code to your website. For more information on adding HTML to your site, here’s a popular article. 

Distance & Elevation Correction 

Strava uses a combination of public and proprietary data to precisely measure the distance and elevation gain of planned routes. However, this measurement technique differs slightly from official measurement techniques used by sport governing bodies. As a result, you may find that a course appears a few hundred meters longer than expected. To change the total distance displayed on the embed, insert the following code snippet into the embed code. Between the quotation marks, insert the official length of the course in meters.   

Code snippet:

data-distance=”42195”

Code snippet before: 

 <div class="strava-embed-placeholder" data-embed-type="route" data-embed-id="3155579856449932622" data-style="standard" data-slippy="true"></div><script src="https://strava-embeds.com/embed.js"></script>

Code snippet after: 

<div class="strava-embed-placeholder" data-embed-type="route" data-embed-id="3155579856449932622" data-style="standard" data-distance="42195" data-slippy="true"></div><script src="https://strava-embeds.com/embed.js"></script> 

Elevation Correction Code Snippet:

data-elevation-gain="162"

To change the total elevation gain displayed on the embed, insert the following code snippet into the embed code. Between the quotation marks, insert the official elevation gain of the course in meters.   

You can change either the elevation gain, the distance, both or neither as fits your needs. This will not change the measured distance on the strava routes page, but it will ensure visitors to your site see the official course measurement.