The Best Way to Showcase your Routes

screenshot komoot

The world’s best routes deserve to be shared on the world’s best maps—and in the most beautiful, detail-rich and informative way possible. With komoot’s seamless embed feature, that’s exactly what you get: A simple, customizable and interactive way to better share your Tours on your website— and all in just a few quick clicks.

  • Topographic outdoor map

  • Interactive altitude profile

  • Mobile navigation

  • GPX download

  • Fully customizable

Better Maps in Three Simple Steps

Share

Step 1

Share your Tour

Simply save your Tour in komoot and click on the Share button once it’s ready.

Share

Step 2

Customize to your liking

Choose what you want to display and customize the map’s dimensions to your liking.

Copy and Paste

Step 3

Paste it onto your site or blog

Paste the code generated for you directly onto your site—wherever you want it to be displayed.

Fully Customizable

As only you know which details count, you decide what to include. Select whether you want show the map or photos as the default view—and decide whether you want to display your route’s altitude profile.

Try the live demo

Adjust width and height
Altitude profile
Choose default view

Examples

These websites already use komoot to better showcase their routes.

World of MTB Screenshot

World of MTB Magazine

View
World of MTB Screenshot

Aspire Cycling

View
World of MTB Screenshot

Visit Berlin

View

Tips & Tricks

  • How to get your embed code

    To get your embed code, just hit share on any Tour that’s been plotted in komoot, click embed and choose what you want to display. Then, komoot will automatically generate your code for you—all you have to do is copy it.

  • How to embed your code

    Don’t simply paste the snippet into your site’s visual editor or CMS. Doing so will result in the line of code being displayed on your page in place of your embedded route. To see the route embedded properly on your page, paste the code into the text, code or HTML view in your site’s backend.

  • How to embed routes on sites built with WordPress
    animation wordpress

    In your WordPress backend, simply switch your editor to text mode and paste your embed code directly in as HTML.

  • How to embed Collections

    To embed a Collection, copy the code to the right and swap out the Collection ID with the ID of the Collection you want to embed. You’ll find your Collection’s ID in its URL, e.g.

    https://www.komoot.de/collection/120
    <iframe src="https://www.komoot.de/collection/120/embed" width="780" height="640" frameborder="0" scrolling="no"></iframe>
  • How to embed your user profile

    To embed a user profile, copy the code to the right and swap out the profile ID with the ID of the profile you want to embed. You’ll find your profile’s ID in its URL, e.g.

    https://www.komoot.de/user/123678900
    <iframe src="https://www.komoot.de/user/123678900/embed" width="780" height="640" frameborder="0" scrolling="no"></iframe>

Still Got Questions?

If you need a little extra help getting set up, contact Betty.

Contact Betty