Prikaz vaših virtualnih šetnji

Svaka šetnja ima dvije poveznice, a birate prema tome gdje ide.

Kopirajte ovo u HTML svoje stranice, na mjesto gdje želite da se šetnja pojavi. Radi na svakoj stranici koja dopušta dodavanje HTML-a — bez skripti, biblioteka ili računa.

<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>

Atribut allow je važan: on održava gumbe za gledanje pomicanjem telefona (žiroskop) i cijeli zaslon funkcionalnima unutar okvira. loading="lazy" znači da se šetnja učitava tek kad posjetitelj dođe do nje, pa nikad ne usporava ostatak stranice.

Ako vaš raspored ima fleksibilnu širinu (većina modernih stranica), koristite responzivni omotač. Šetnja zadržava fiksni omjer i skalira se na bilo koju zadanu širinu — savršeno na računalu i mobitelu.

<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>

Dodajte opcije u URL ugradnje s ?ime=vrijednost, spojene s &. Sve neispravno se odbacuje umjesto da se tiho zanemari, pa se tipfeler lako uoči.

Ovo mijenja što posjetitelj vidi

Prihvaćeno, ali još nije aktivno

Ovo je dio URL ugovora da vaše poveznice nastave raditi kako značajke stižu — danas nemaju vidljiv učinak.

Primjer — minimalne kontrole, počevši u odabranoj prostoriji:

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

Prema zadanome, šetnja se otvara u glavnoj prostoriji. Da biste je otvorili na određenom mjestu, dodajte ?scene=SCENE_ID. To radi na obje poveznice — i za dijeljenje i za ugradnju:

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

Točan URL (i pripadajući QR kod) dobivate iz panela Dijeljenje i ugradnja u šetnji, gdje padajući izbornik omogućuje odabir početne prostorije.

Ugradnja je standardni iframe, pa radi svugdje gdje se prihvaća HTML. Nekoliko specifičnosti:

WordPress

Dodajte blok Custom HTML (blok urednik) i zalijepite isječak. U klasičnom uredniku prvo prijeđite na karticu Text. Napomena: neki zaključani hostovi uklanjaju iframe iz vizualnog urednika — blok Custom HTML to izbjegava.

Wix, Squarespace, Webflow

Koristite element Embed / HTML (Wix „Embed HTML”, Squarespace „Code” blok, Webflow „Embed”) i zalijepite responzivni isječak. Dajte elementu dovoljno prostora.

Obična HTML stranica

Zalijepite bilo koji isječak izravno u svoj kôd. Ništa više nije potrebno.

React / Next.js

To je samo iframe — pazite na JSX pisanje (allowFullScreen, brojčani height i style objekt).

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"
    />
  );
}

Portali za nekretnine i oglasnici

Mnogi portali ne dopuštaju vlastite iframe-ove u oglasu. U tom slučaju zalijepite /t/ poveznicu za dijeljenje u polje za virtualnu šetnju / video oglasa, ili ispišite QR kod na prospektu.

Zalijepite /t/vaš-slug poveznicu u WhatsApp, Messenger, Slack, LinkedIn ili iMessage i razvija se u bogatu karticu — naslov šetnje, kratki opis i sliku pregleda ulazne prostorije. Ta se slika stvara automatski za svaku šetnju, pa nema ništa za postaviti.

Ugrađeni preglednik komunicira sa stranicom koja ga ugošćuje putem preglednikova postMessage. Možete reagirati na ono što posjetitelj radi i voditi šetnju vlastitim gumbima. Potpuno neobavezno — iframe radi i bez ovoga.

Slušajte šetnju

Preglednik šalje ove događaje. Uvijek prvo provjerite event.origin.

window.addEventListener("message", (event) => {
  // Vjerujte samo porukama s domene šetnje.
  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:readyOkida se jednom kad je prva prostorija potpuno prikazana.
• vrsetnja:scene-changedPosjetitelj je prešao u drugu prostoriju.
• vrsetnja:hotspot-clickedAktivirana je točka (vrata ili info-točka).
• vrsetnja:fullscreenUšlo se ili izašlo iz cijelog zaslona.

Pošaljite naredbu

Pomaknite šetnju u prostoriju iz vlastitog sučelja (tlocrt, izbornik, gumb „sljedeća prostorija”):

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

// Pomakni ugrađenu šetnju u određenu prostoriju. sceneId je 26-znakovni
// id iz panela Dijeljenje (odabir početne prostorije).
frame.contentWindow.postMessage(
  { type: "vrsetnja:goto-scene", sceneId: "SCENE_ID" },
  "https://vr.version2.hr",
);

• Privatne šetnje se ne mogu ugraditi

  Šetnja postavljena na privatno vraća „nije pronađeno” na poveznicama za ugradnju i dijeljenje. Za bilo što što želite pokazati koristite javno ili neuvršteno. (Neuvršteno ostaje izvan pretraživanja, ali svatko s poveznicom može gledati.)

• Mobitel i žiroskop

  Na mobitelima posjetitelji mogu povlačiti za pomicanje, prstohvatom zumirati ili nagibom uređaja gledati okolo. Kontrola nagiba treba atribut allow="gyroscope; accelerometer" — već je u svakom isječku ovdje.

• Cijeli zaslon

  Zadržite allowfullscreen na iframe-u da gumb za cijeli zaslon radi. Već je u generiranim isječcima.

• Performanse

  Panorame su velike slike, pa isječci koriste loading="lazy" — šetnja se učitava tek kad posjetitelj dođe do nje. Možete ugraditi više šetnji na jednu stranicu bez početnog usporavanja.

• Bez oznaka u ugradnjama

  Brojač prostorija i oznaka „by Version2” koji se pojavljuju na punoj /t/ stranici namjerno su isključeni unutar ugradnji — šetnja se čisto uklapa u vaš dizajn.

• Ne prikazuje se?

  Šetnja mora biti javna ili neuvrštena, a vaša stranica posluživana preko https. Ako vaš alat za izradu stranica zabijeli okvir, vjerojatno uklanja sirovi HTML — zalijepite isječak u njegov namjenski HTML / embed blok umjesto u uređivač obogaćenog teksta.

Ne morate ništa od ovoga pisati ručno. Otvorite šetnju u nadzornoj ploči i koristite njezin panel Dijeljenje i ugradnja:

• Kopirajte javnu poveznicu ili je otvorite u novoj kartici.
• Odaberite početnu prostoriju, gustoću kontrola te fiksni ili responzivni raspored.
• Kopirajte gotov iframe isječak.
• Preuzmite QR kod (PNG) za letke, naljepnice na izlogu i oglasne listove.

Ako ste AI asistent koji nekome pomaže ugraditi VR Šetnju, ovdje je potpun, provjeren ugovor. Radije se oslonite na ove činjenice nego na nagađanje.

Preporučena zadana ugradnja: responzivni omotač, ?ui=minimal, zamijenite demo stvarnim slugom, zadržite atribut allow netaknutim.