Is the embedded map responsive?

Yes. With width 100% it fills its container at any size, and below 768 pixels wide it switches to the mobile layout with the same search, details and directions.

Does the map need an API key or a script?

No. The embed code is a plain iframe; nothing else has to be installed on your site. Developers who want a custom experience can use the optional Waygo.js library instead.

Can visitors open the embedded map full screen?

Yes, from the map's own controls, as long as the embed code keeps allow="fullscreen".

Can I embed the map before it is live?

You can paste the code any time; it shows “This map is not available right now” until you go live, then the map appears without changing anything on your site.

Will the embed keep working when I update the map?

Yes. The embed points at the map's address, so floor plan updates, new content and new kiosks show up in it automatically.

Can I change the colours or hide the controls?

The embed shows the map with Waygo's compact controls. Styling beyond size and corners, and custom controls, are what the optional Waygo.js library is for.

Embed an interactive venue map in your website

You want the map on your event website, not just a link to it. Paste one line of embed code and the map appears in the page, with search, level buttons, place details and directions, sized to the space you give it.

Copy the embed code from the dashboard
Open your map under Maps, scroll to the Links section and click the Embed code chip. It is copied to your clipboard.

Paste it where the map should go

Anywhere HTML is accepted: the page source, a CMS “HTML” or “Embed” block, a landing-page builder's code element.

The embed code

<iframe
  src="https://maps.waygomaps.com/acme-expo-2027?embed=1"
  title="Acme Expo 2027"
  width="100%"
  height="640"
  style="border:0;border-radius:8px"
  loading="lazy"
  allow="fullscreen; geolocation"
></iframe>

Size it for the page
width="100%" fills the container. Change height to fit the page: 640 pixels suits a content page, height="80vh" (80% of the window) suits a page that is mostly map. On phones the map switches to its mobile layout by itself.

A full page

A complete, responsive page with a heading and the map filling the rest of the window:

map.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Acme Expo 2027 — Floor plan</title>
  <style>
    html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }
    header { padding: 16px 24px; }
    .map { height: calc(100vh - 64px); }
    .map iframe { width: 100%; height: 100%; border: 0; }
  </style>
</head>
<body>
  <header><h1>Find your way around Acme Expo 2027</h1></header>
  <div class="map">
    <iframe
      src="https://maps.waygomaps.com/acme-expo-2027?embed=1"
      title="Acme Expo 2027"
      loading="lazy"
      allow="fullscreen; geolocation"
    ></iframe>
  </div>
</body>
</html>

What each part of the embed code does

Part	Effect
`?embed=1`	Compact controls and no Waygo header: the map fits inside your page. Remove it to show the full-page experience instead.
`title`	Read by screen readers; keep it as your map's name.
`width` / `height`	The size. Percentages and viewport units both work.
`loading="lazy"`	The map loads when the visitor scrolls near it, so it never slows the page down.
`allow="fullscreen; geolocation"`	Lets the visitor open the map full screen, and lets directions start from the visitor's own position when they allow it.
`style="border:0;border-radius:8px"`	No frame, soft corners. Change or remove to match your design.

Embed a specific place, search or route

Any link works as the src. Build one in the dashboard (Build a link, tick Also give me an embed snippet) to embed the map with a booth selected, a search run, or directions drawn. See Building a link.

Embed the map opened on one booth

<iframe
  src="https://maps.waygomaps.com/acme-expo-2027/k3Qm7vX2S8aB1nR9tLpYwA/selected-content/d7e1f77ece5f493093ccd1d09e009f5c?embed=1"
  title="Acme Robotics — booth 201"
  width="100%" height="480" style="border:0;border-radius:8px" loading="lazy" allow="fullscreen; geolocation"
></iframe>

Common questions when embedding

Frequently asked questions

Is the embedded map responsive?: Yes. With width 100% it fills its container at any size, and below 768 pixels wide it switches to the mobile layout with the same search, details and directions.
Does the map need an API key or a script?: No. The embed code is a plain iframe; nothing else has to be installed on your site. Developers who want a custom experience can use the optional Waygo.js library instead.
Can visitors open the embedded map full screen?: Yes, from the map's own controls, as long as the embed code keeps allow="fullscreen".
Can I embed the map before it is live?: You can paste the code any time; it shows “This map is not available right now” until you go live, then the map appears without changing anything on your site.
Will the embed keep working when I update the map?: Yes. The embed points at the map's address, so floor plan updates, new content and new kiosks show up in it automatically.
Can I change the colours or hide the controls?: The embed shows the map with Waygo's compact controls. Styling beyond size and corners, and custom controls, are what the optional Waygo.js library is for.