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.

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.

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.