Displaying your virtual tours

There are two URLs for every tour, and you pick based on where it’s going.

Copy this into your page’s HTML where you want the tour to appear. It works on any website that lets you add HTML — no scripts, no libraries, no account.

<iframe
  src="https://vr.version2.hr/embed/demo?ui=minimal"
  width="100%"
  height="600"
  loading="lazy"
  allowfullscreen
  allow="gyroscope; accelerometer; fullscreen"
  style="border:0;border-radius:12px;"
  title="VR Šetnja: Demo"
></iframe>

The allow attribute is important: it’s what keeps the move-your-phone-to-look-around (gyroscope) and fullscreen buttons working inside the frame. loading="lazy" means the tour only loads when the visitor scrolls near it, so it never slows down the rest of your page.

If your layout has a flexible width (most modern sites), use the responsive wrapper. The tour keeps a fixed aspect ratio and scales to whatever width it’s given — perfect on both desktop and mobile.

<div style="position:relative;width:100%;aspect-ratio:16/9;">
  <iframe
    src="https://vr.version2.hr/embed/demo"
    loading="lazy"
    allowfullscreen
    allow="gyroscope; accelerometer; fullscreen"
    style="position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px;"
    title="VR Šetnja: Demo"
  ></iframe>
</div>

Add options to the embed URL with ?name=value, joined by &. Anything invalid is rejected rather than silently ignored, so a typo is easy to spot.

These change what the visitor sees

Accepted but not active yet

These are part of the URL contract so your links keep working as features land — today they have no visible effect.

Example — minimal chrome, starting in a chosen room:

https://vr.version2.hr/embed/demo?ui=minimal&scene=SCENE_ID

By default a tour opens on its main room. To open it somewhere specific, add ?scene=SCENE_ID. This works on both the share link and the embed:

https://vr.version2.hr/t/demo?scene=SCENE_ID
https://vr.version2.hr/embed/demo?scene=SCENE_ID

You get the exact URL (and matching QR code) from the tour’s Share & embed panel, where a drop-down lets you pick the starting room.

The embed is a standard iframe, so it works anywhere that accepts HTML. A few specifics:

WordPress

Add a Custom HTML block (block editor) and paste the snippet. In the classic editor, switch to the Text tab first. Note: some locked-down hosts strip iframes from the visual editor — the Custom HTML block avoids that.

Wix, Squarespace, Webflow

Use the Embed / HTML element (Wix “Embed HTML”, Squarespace “Code” block, Webflow “Embed”) and paste the responsive snippet. Give the element room to grow.

Plain HTML site

Paste either snippet directly into your markup. Nothing else needed.

React / Next.js

It’s just an iframe — remember JSX casing (allowFullScreen, a numeric height, and a style object).

JSXCopy

export function TourEmbed() {
  return (
    <iframe
      src="https://vr.version2.hr/embed/demo?ui=minimal"
      width="100%"
      height={600}
      loading="lazy"
      allowFullScreen
      allow="gyroscope; accelerometer; fullscreen"
      style={{ border: 0, borderRadius: 12 }}
      title="VR Šetnja: Demo"
    />
  );
}

Real-estate portals & marketplaces

Many portals don’t allow custom iframes in a listing. When that’s the case, paste the /t/ share link into the listing’s virtual-tour / video field, or print the QR code on the exposé.

Paste a /t/your-slug link into WhatsApp, Messenger, Slack, LinkedIn or iMessage and it unfurls into a rich card — the tour title, a one-line description and a preview image of the entry room. That image is generated automatically for every tour, so there’s nothing to set up.

The embedded viewer talks to the page hosting it using the browser’s postMessage. You can react to what the visitor does, and drive the tour from your own buttons. Entirely optional — the iframe works fine without any of this.

Listen to the tour

The viewer sends these events. Always check event.origin first.

window.addEventListener("message", (event) => {
  // Only trust messages coming from the tour's origin.
  if (event.origin !== "https://vr.version2.hr") return;
  const msg = event.data;
  if (!msg || typeof msg.type !== "string") return;

  switch (msg.type) {
    case "vrsetnja:ready":
      // { tour: { id, slug, sceneCount }, currentScene: { id, title } }
      console.log("Tour ready —", msg.tour.sceneCount, "scenes");
      break;
    case "vrsetnja:scene-changed":
      console.log("Now viewing:", msg.to.title);
      break;
    case "vrsetnja:hotspot-clicked":
      console.log("Hotspot clicked:", msg.kind, msg.hotspotId);
      break;
    case "vrsetnja:fullscreen":
      console.log("Fullscreen:", msg.fullscreen);
      break;
  }
});

• vrsetnja:readyFires once when the first room is fully shown.
• vrsetnja:scene-changedThe visitor moved to another room.
• vrsetnja:hotspot-clickedA hotspot (door or info point) was activated.
• vrsetnja:fullscreenFullscreen was entered or exited.

Send a command

Move the tour to a room from your own UI (a floor-plan, a menu, a “next room” button):

const frame = document.querySelector("iframe");

// Jump the embedded tour to a specific room. The sceneId is the 26-char
// id from the tour's Share panel (start-scene picker).
frame.contentWindow.postMessage(
  { type: "vrsetnja:goto-scene", sceneId: "SCENE_ID" },
  "https://vr.version2.hr",
);

• Private tours can’t be embedded

  A tour set to privatereturns “not found” on the embed and share URLs. Use public or unlisted for anything you want to show. (Unlisted stays out of search but anyone with the link can view it.)

• Mobile & the gyroscope

  On phones, visitors can pan by dragging, pinch to zoom, or tilt the device to look around. The tilt control needs the allow="gyroscope; accelerometer" attribute — it’s already in every snippet here.

• Fullscreen

  Keep allowfullscreen on the iframe so the fullscreen button works. It’s in the generated snippets.

• Performance

  Panoramas are large images, so the snippets use loading="lazy" — the tour loads only as the visitor reaches it. You can embed several tours on one page without a load penalty up front.

• No badges in embeds

  The scene counter and the “by Version2” mark that appear on the full /t/ page are intentionally off inside embeds — the tour sits cleanly in your design.

• Not showing up?

  The tour needs to be public or unlisted, and your page must be served over https. If your site builder blanks the frame, it’s probably stripping raw HTML — paste the snippet into its dedicated HTML / embed block instead of the rich-text editor.

You don’t have to write any of this by hand. Open a tour in the dashboard and use its Share & embed panel:

• Copy the public link, or open it in a new tab.
• Pick a starting room, chrome density, and fixed or responsive layout.
• Copy the ready-made iframe snippet.
• Download a QR code (PNG) for flyers, window stickers and listing sheets.

If you’re an AI assistant helping someone embed a VR Šetnja tour, here is the complete, verified contract. Prefer these facts over guessing.

Recommended default embed: responsive wrapper, ?ui=minimal, replace demo with the real slug, keep the allow attribute intact.