Iframe plugin

One <iframe> tag. Map, summary, scores, or any combination — all configured through URL parameters. No JavaScript on your site, nothing to maintain. This is the integration we recommend for almost everyone.

Live demo

The default mode shows a map and a POI summary side by side:

Hello world

Copy this into your page, replace the license key, and you’re done:

<iframe
    width="100%"
    height="560"
    src="https://map.yatmo.com/plugin.html?licenseKey=YOUR_KEY&country=BE&language=EN&latitude=50.8520525&longitude=4.3442926&mode=overlay&zoom=15"
    frameborder="0"
    allowfullscreen
    loading="lazy">
</iframe>

Display modes

The mode parameter switches what the iframe shows. Five options:

Name	Type	Description
overlay	default	Map and POI summary side by side. The most popular layout for listing-detail pages.
overlay-scores	value	Map plus the “scores” summary — a compact rating per category instead of per-POI travel times.
map-top	value	Map stacked on top of the summary. Better on narrow columns / mobile-first layouts.
map	value	Map only. No summary panel.
summary	value	Summary only. No map.

Required parameters

Name	In	Type	Description
licenseKey required	query	string	Your Yatmo frontend key — the one safe to embed in HTML. See License & keys.
country required	query	string	ISO country code (BE, FR, NL, LU, CH, DE, IT, ES, PT, IE, UK, AT).
language required	query	string	ISO 639-1 language code (EN, FR, NL, DE, IT, ES, PT, CA).
latitude required	query	number	Latitude of the property.
longitude required	query	number	Longitude of the property.

Pin style

The marker parameter picks how the property is shown on the map:

Name	Type	Description
pin	default	Classic map pin. Colored using `accentColor`.
circle	value	Renders a translucent circle instead of a pin — good when you don’t want to reveal the exact address. Pair with `circleRadiusInMeters` (50–2000).
custom	value	Use your own marker image. Pair with `customMarkerUrl` (PNG or SVG, served over HTTPS), `customMarkerWidth`, `customMarkerHeight`.

Appearance

Name	In	Type	Description
accentColor	query	string	Hex color used for the pin, summary highlights, and module accents. URL-encode the `#` as `%23`. Default: `#428BFF`.
mapStyle	query	integer 1-5	Basemap style. Pick the one that fits your site’s palette. Default: `1`.
corners	query	string	`square` or `rounded`. With `rounded`, also set `rounded` to a pixel value. Default: `square`.
rounded	query	string	Border radius when corners are rounded, e.g. `8px` (1–15).
zoom	query	integer 7-20	Initial map zoom level. Default: `15`.

Side modules

Optional panels that attach to the iframe’s left or right edge:

Name	In	Type	Description
isochrone	query	string	`left` or `right` — show 5 / 10 / 20-minute travel-time polygons toggled by a small side panel. Omit to disable.
routeFrom	query	string	`left` or `right` — show route directions from the property to whichever POI the visitor clicks. Omit to disable.

Favorite addresses

Let a signed-in visitor pin their own “starting points” — home, work, the kids’ school, the gym — right on the map (up to 5, each with its own colour and icon). Once saved, every listing they open shows the travel time and distance from each of their places to that property. It turns “is this a good location?” into “is this a good location for me?”.

Enabling it is a single extra parameter — userId:

<iframe
    width="100%"
    height="560"
    src="https://map.yatmo.com/plugin.html?licenseKey=YOUR_KEY&country=BE&language=EN&latitude=50.8520525&longitude=4.3442926&mode=overlay&zoom=15&userId=THE_LOGGED_IN_USER_ID"
    frameborder="0"
    allowfullscreen
    loading="lazy">
</iframe>

The favorite-addresses panel attaches to the map, so this only applies to the map-bearing modes (overlay, overlay-scores, map-top, map). It is ignored in summary / scores modes.

Name	In	Type	Description
userId	query	string	Enables the feature. A stable, unique id for the logged-in visitor on your site. Saved addresses are keyed by this id on the Yatmo side, so the same id on a later visit brings the same places back. Omit it and the favorite-addresses UI simply doesn’t appear.
startLatitude	query	number	Point the commute times are measured from. Defaults to the property `latitude` — usually what you want.
startLongitude	query	number	Longitude counterpart of `startLatitude`. Defaults to the property `longitude`.

The visitor must be logged in on your site

Yatmo doesn’t know who your visitors are — you do. To save addresses we need a unique id that represents that person on your side, and you can only produce one once they’ve authenticated. Pass it as userId (a database key, a hashed email, a session-bound id — whatever your auth uses). For anonymous visitors, just leave userId out: the rest of the plugin works exactly as before.

A built-in reason to create an account

Because the feature only works for signed-in users, it’s a natural lever to grow your registrations: “Create a free account to save your home and work and see your real commute from every listing.” The personalised commute times keep people coming back to your site to compare properties — not a portal’s.

userId is a primary key, not a secret

Anyone who knows a visitor’s userId can read that visitor’s saved addresses through the map. Use values that are random or hashed (not raw emails or guessable counters), and never put one visitor’s id in a page served to another.

All parameters at a glance

Name	In	Type	Description
licenseKey required	query	string	Your Yatmo frontend key.
country required	query	string	ISO country code.
language required	query	string	ISO 639-1 language code.
latitude required	query	number	Property latitude.
longitude required	query	number	Property longitude.
mode	query	string	`overlay` / `overlay-scores` / `map-top` / `map` / `summary`. Default: `overlay`.
marker	query	string	`pin` / `circle` / `custom`. Default: `pin`.
circleRadiusInMeters	query	integer	When `marker=circle`: 50–2000.
customMarkerUrl	query	string	When `marker=custom`: HTTPS URL to a PNG or SVG icon.
customMarkerWidth	query	integer	Custom marker width in pixels.
customMarkerHeight	query	integer	Custom marker height in pixels.
accentColor	query	string	Hex color, URL-encoded (`%23` for `#`). Default: `#428BFF`.
mapStyle	query	integer 1-5	Basemap style. Default: `1`.
corners	query	string	`square` or `rounded`. Default: `square`.
rounded	query	string	Pixel radius when corners are rounded, e.g. `8px`.
zoom	query	integer 7-20	Initial map zoom level. Default: `15`.
isochrone	query	string	`left` or `right` to enable the isochrone side panel.
routeFrom	query	string	`left` or `right` to enable the route-from side panel.
userId	query	string	Unique id of the logged-in visitor on your site. Enables the favorite-addresses feature (map modes only). See Favorite addresses.
startLatitude	query	number	Favorite addresses: point commute times are measured from. Defaults to `latitude`.
startLongitude	query	number	Favorite addresses: defaults to `longitude`.

Interactive generator

Don't hand-craft the URL

There’s an interactive plugin generator on yatmo.com that lets you tweak every option visually, preview the result in three viewports, and copy the final <iframe> snippet. Use that when you’re iterating on the look — come back here when you need the parameter reference.

Why this is the easiest plugin

Zero JavaScript on your site, zero updates to ship when Yatmo evolves the plugin (the iframe URL stays the same), works inside every CMS / framework / static site, and the same iframe can swap between map, summary, or both just by changing the mode parameter.