Want to help runners learn more about your course and connect your race to their Strava accounts? Read on to learn how to embed a Strava route directly to your UltraSignup registration page.
Copying the Code from Strava #
A Strava course can be added to your description by using the iFrame code provided by Strava. You can find the embed code on the Route Page by clicking the drop down menu and selecting “embed”.
If you do not already have your race course on Strava, please check out these resources to get started:
- How to create a route with Strava’s Route Builder
- How to create a club on Strava
- How to embed a Strava Route
Customize your Route Display #
Select settings for your embedded route, and click the button “Copy Embed Code”:
- Elevation Profile: uncheck the box to omit elevation profile
- Units: enables you to change the default units shown
- Embed width: “Fixed” width embeds are as wide as the page; “Responsive” width embeds will be as wide as the column on the page
- Map Style: select the default map style runners will see in the embed
Link your Route to your Strava Club #
If you are the owner or admin of a Strava club, you will have the option to link your route to your club on the embed customization screen. This will allow runners to see the footer of the map referencing your club, and give them the option to join directly from the embed.
Once you’ve set your preferences, click the orange button “copy embed code”.
Embedding the Route in Your Event’s Description #
When adding an iframe to your description, we recommend opening a new section in your description so that the iframe code does not get mixed up in your content or other code you may have added.
Once you have the iframe, simply copy/paste the iframe into a new section in your description editor.
Change or Update the Distance & Elevation
To change the total distance displayed on the embed, insert the following code snippet into the embed code. Include your official course length in meters between the quotation marks.
Code snippet:
data-distance="10000"Embed Code Before:
<div class="strava-embed-placeholder" data-embed-type="route" data-embed-id="3134632207460794898" data-style="standard" data-slippy="true"></div><script src="https://strava-embeds.com/embed.js"></script>Embed Code After:
<div class="strava-embed-placeholder" data-embed-type="route" data-embed-id="3134632207460794898" data-style="standard" data-distance="10000" data-slippy="true"></div><script src="https://strava-embeds.com/embed.js"></script>To change the total elevation gain displayed on the embeded map, insert the following code snipet into the embed code. Include your official course elevation gain in meters between the quotation marks.
Code snippet:
data-elevation-gain="274.32"Embed Code Before:
<div class="strava-embed-placeholder" data-embed-type="route" data-embed-id="3134632207460794898" data-style="standard" data-slippy="true"></div><script src="https://strava-embeds.com/embed.js"></script>Embed Code After:
<div class="strava-embed-placeholder" data-embed-type="route" data-embed-id="3134632207460794898" data-style="standard" data-elevation-gain="274.32" data-slippy="true"></div><script src="https://strava-embeds.com/embed.js"></script>