Overview

Mountaya Studio Embedding makes it easy for customers to embed Mountaya's interactive 3D maps directly into their own websites. Whether you're showcasing itineraries, event schedules, activity recommendations, or interactive experiences, our iframes allow you to bring the Mountaya experience into your existing digital flow — no complex development required. With a single line of HTML code, you can offer your visitors an immersive experience powered by Mountaya, all without redirecting them away from your website. It's a simple, flexible way to elevate your online presence and better connect with your audience.

How it works

In addition to safety rules, Mountaya iframes are shaped by two key elements:

• Properties define consistent organization-wide settings — like language or map controls — that can also be customized per iframe.
• Branding customization enables iframes to seamlessly align with your website's design, allowing you to set your own colors and maintain visual consistency.

Together, these elements give you the flexibility to tailor embedded experiences while ensuring consistency, performance, and control.

At the end, embedding a Mountaya iframe is a single line of HTML and looks like this (formatted for clarity):

<iframe
  src="https://app.mountaya.com/studio/embed
    ?organization_id=uuid
    &collection_id=uuid
    &activeroute_id=uuid">
</iframe>

For clarity, all examples in the next guides will use the shortened path /studio/embed and omit the full base URL, as well as the required organization_id query parameter. In practice, always use the full URL with organization_id in your iframes.

Example

This iframe demonstrates how to embed Mountaya into a website.

This iframe is made possible using the following line of HTML only (formatted for clarity):

<iframe
  src="https://app.mountaya.com/studio/embed
    ?organization_id=66270afb-476e-45b2-b819-1118fa3f62ad
    &collection_id=0e9788ba-f680-4a74-8354-e7b7fe5ee061
    &activeroute_id=b61e7f93-fa79-4326-9a30-937e53d110c6
    #view=11.50/45.88796/6.97656/176.3/59">
</iframe>

The iframe is authenticated via the organization_id. At the organization level, safety rules are applied to restrict access such as the iframe's origin and the map's boundary to a defined area near Chamonix and Mont-Blanc. Additionally, the zoom level is restricted to a range between 9 and 15 (inclusive).

By including the collection_id, the iframe is able to display all routes and drawings tied to that collection. This can be turned on/off by using with_collection_routes and with_collection_drawings.