Embedding OpenRunner routes on your website enhances the visitor experience by allowing users to discover and download routes directly from your site. This makes route information easier to access and explore. Below are the steps and the different embedding options available.
Want to display multiple routes on the same page? You can also use the OpenRunner Collection embed, which allows you to group several routes within a single embed.
How to embed a route on your website
- Open the route page: go to the detail page of the route you want to embed.
- Click the sharing option.
- Select “Embed the route on a website”: choose this option to generate the embed code. Make sure the route is public for the embedding options to be available. You can change its visibility if necessary.
- Copy the embed code: copy the provided code and paste it into the source code of your website.
Embedding options
Three options are available for embedding a route on your website.
1. Route only
- Display: only the route map is shown, allowing visitors to zoom in, zoom out and move around the map.
- Responsive: the map adapts to the screen size and available space.
- Access to OpenRunner: by clicking “View route details”, users are redirected to OpenRunner to view all available route information, including reviews, photos and the description.
2. Route with elevation profile
- Display: this format includes both the route map and its elevation profile.
- Dimensions: the display window measures 500 × 650 pixels.
- Responsive: the content adapts to the screen size.
- Access to OpenRunner: “View route details” opens the full route page on OpenRunner.
3. Elevation profile only
- Display: this option shows only the route’s elevation profile.
- Responsive: the content is designed to adapt to different screen sizes.
- Access to OpenRunner: by clicking “View route details”, users can access additional information about the route on OpenRunner.
Explore a route in 3D with Flyover
Flyover allows visitors to explore an embedded route through a 3D flyover directly from your website.
From the route embed, click “Start” to launch the visualization. The view automatically follows the route from start to finish, providing a clearer view of the terrain, climbs, descents and surrounding environment.
During the flyover, the distance and elevation remain visible. The playback speed can also be adjusted to quickly explore the entire route or take a closer look at specific sections.
Flyover is particularly useful for presenting a race course, preparing an outing or giving visitors a more concrete preview of the route before they set off.
Key points
OpenRunner embeds allow you to display a route directly on your website in several formats: map only, map with elevation profile or elevation profile only. With Flyover, visitors can also explore the route and its terrain through a dynamic 3D visualization.
If you want to present several routes in the same place, use an OpenRunner Collection embed, which allows you to group multiple routes within a single embed.
