Seamless embed

The seamless embed is built to look like part of your website rather than a map dropped onto it.

• The page around the map follows your site: list, cards, buttons, typefaces and colours.
• The map keeps your Wander map’s own style, pins and clusters.

It works with any Wander map: pass its slug or UUID.

Surface	URL pattern	What it renders
Places	/native/{mapId}	Your map’s filter pills, search, a list of places in view, the map with your category pins and clusters, a place card, and “Take the trail with you”.
Artist / person	/native/{mapId}/artist?pois=… or ?sb={listId}	One person’s or one topic’s places: a title, a list and a compact map.
Road trips	/native/{mapId}/trips?lists=…	One or more multi-day itineraries: day tabs, a route line, numbered stops and “More road trips”.

Install with the script (recommended)

The script creates the iframe, reads your page’s fonts and colours, and keeps the iframe exactly as tall as its content.

<div data-wander-native="places" data-map="explore-julian"></div>
<script src="https://web.wander-app.com/native.js" async></script>

Replace explore-julian with your map’s slug or UUID.

Attribute	Meaning
data-wander-native	places, artist or trips
data-map	Required. Your map’s slug or UUID.
data-params	Extra query string, e.g. pois=…&title=…, or any parameter below
data-height	Initial height in pixels (default 720). The script then sizes the frame to its content.
data-theme	auto (default) reads your page’s fonts and colours. off uses your map’s preset or the URL parameters.
data-title	The iframe’s accessible title

On single-page apps, call window.WanderNative.mount() after adding new containers.

Install with a plain iframe

<iframe src="https://web.wander-app.com/native/explore-julian"
  style="width:100%;height:760px;border:0" loading="lazy" title="Explore our map"></iframe>

Without the script, set fonts and colours with URL parameters:

Parameter	Values
fontDisplay, fontBody, fontUi	A Google Fonts family, optionally with :serif or :sans, e.g. Young%20Serif:serif
bg, surface, ink, heading, muted, accent, onAccent, line	Colours as #rgb, #rrggbb or rgb(r,g,b). Encode # as %23.
radius	Corner radius, 0–40 px
mapTone	satellite (default: your map’s own style) or brand (a light map tinted to your colours)
poiId (or f)	Open with one place selected
lat, lng, z, b, p	Override the opening view (Places)

Precedence: Wander defaults < your map’s preset < your page (script) < URL parameters. theme=host-off ignores the page hand-off.

Artist / person pages

Show one list from your map:

<div data-wander-native="artist" data-map="explore-julian"
  data-params="sb=8c84e17d-a8fb-43d2-bcd6-51b6d6e97fb5"></div>
<script src="https://web.wander-app.com/native.js" async></script>

Or name the places yourself, with your own title and a link back to your full map page:

<div data-wander-native="artist" data-map="{mapId}"
  data-params="pois={id},{id},{id}&title=Levon%E2%80%99s%20Arkansas&trail=https%3A%2F%2Fexample.com%2Fexplore"></div>
<script src="https://web.wander-app.com/native.js" async></script>

Parameter	Meaning
pois	Up to 50 place IDs, in display order
sb	A Wander list ID, instead of pois (it can be a draft list)
title, intro	Optional text (80 and 200 characters)
next + nextLabel	An optional “Next on the trail” card linking to your next page (https: only)
trail	An optional “See the whole trail” link (https: only)

Road trips

<div data-wander-native="trips" data-map="explore-julian"
  data-params="lists=8c84e17d-a8fb-43d2-bcd6-51b6d6e97fb5"></div>
<script src="https://web.wander-app.com/native.js" async></script>

Parameter	Meaning
lists	Required. Up to 8 list IDs, in order
trip, day	The trip and day open at first
dayLabels	Pipe-separated day names for the first trip, e.g. Helena%20to%20Cotton%20Plant|West%20Memphis%20to%20Osceola

What every surface includes

• Your map’s filters: the same pills as your full Wander map, plus trails, areas, landmarks, the boundary, terrain and the opening view.
• “Take the trail with you”: visitors text themselves the link, scan a QR code or open the Wander app. A draft or unpublished list is handed to the app as a trip the visitor can save.
• Your marketing pixels and analytics: embed_viewed, with embed_type: native_places | native_artist | native_trips.
• An attribution caption under the map: “Interactive map by Wander”. Keep it.

Fonts

Google Fonts load automatically. Licensed or self-hosted fonts (Typekit and similar) fall back to a matching serif or sans. Wander never loads your site’s font files.