Embed interactive content

Interactive content - embed event visualizations or leaderboards on your pages, directly with iFrames. Dynamic links for specific features.

Unique URL

Each event has a unique URL for the tracking map and for the leaderboard.

  • format tracking map: https://racemap.com/player/slug

  • format leaderboard: https://racemap.com/timing/slug

The slug is generated with the event name and the start date of the event 100km-duathlon_2018-05-05 for the event 100km-Duathlon starting on 5th of May in 2018.

iFrame integration

Embed event visualizations or leaderboards on any page or blog. Through the iFrame you show the interactive content on your sites directly. Your visitors don't have to navigate to external pages.

sample with corresponding html-code: https://racemap.com/embed-samples#iframe

<iframe src="https://racemap.com/player/100km-duathlon_2018-05-05" style="width: 100%; height: 800px"></iframe>

width: 100% and height: 800px adjust the size of the tracking map on your site.

Option - shadow around the map

sample: https://racemap.com/embed-samples#shadow

<iframe src="https://racemap.com/player/100km-duathlon_2018-05-05" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen style="border: none; box-shadow: 0 0 10px rgb(112, 139, 161); width: 100%; height: 800px"></iframe>

Option - custom color in visualization

Set the hex color code in the URL of the tracking map color=<your_color>.

sample: https://racemap.com/embed-samples#color

<iframe src="https://racemap.com/player/100km-duathlon_2018-05-05" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen style="border: none; box-shadow: 0 0 10px rgb(112, 139, 161); width: 100%; height: 800px"></iframe>

Option - leaderboard: https://racemap.com/timing/virtual-race

sample: https://racemap.com/embed-samples#leaderboard

<iframe src="https://racemap.com/timing/virtual-race" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen style="border: none; box-shadow: 0 0 10px rgb(112, 139, 161); width: 100%; height: 800px"></iframe>

Option - activity upload: https://racemap.com/upload?key=6G615L

sample: https://racemap.com/embed-samples#upload

<iframe src="https://racemap.com/upload?key=6G615L" allowfullscreen webkitallowfullscreen mozallowfullscreen style="border: none; box-shadow: 0 0 10px rgb(112, 139, 161); width: 100%; height: 1150px"></iframe>

Option - key link to enroll key or passcode https://racemap.com/app/redeem_key?key=6G615L

sample: https://racemap.com/embed-samples#key-link

<iframe src="https://racemap.com/app/redeem_key?key=6G615L" loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen style="border: none; box-shadow: 0 0 10px rgb(112, 139, 161); width: 100%; height: 1100px;"></iframe>

The tracking map centers around selected participants and the URL changes dynamically - eg. link to follow the teams "Flaming Sideburns" and "Wolfsrudel Mädels" at 100km-Duathlon: https://racemap.com/player/100km-duathlon_2018-05-05#selected=5ba8e1900e341e2f93f036f1,5ba8e1909193f62fab70115c

sample: https://racemap.com/embed-samples#dynamic-link

<iframe loading="lazy" allowfullscreen webkitallowfullscreen mozallowfullscreen style="border: none; box-shadow: 0 0 10px rgb(112, 139, 161); width: 100%; height: 1000px" src="https://racemap.com/player/100km-duathlon_2018-05-05#selected=5ba8e1900e341e2f93f036f1,5ba8e1909193f62fab70115c" allowfullscreen="allowfullscreen"></iframe>