Virtuális túra integrálása weboldalra: teljes útmutató 2026-ra

Ha már létrehoztál egy túrát a Toursban, és szeretnéd megjeleníteni a weboldaladon, nem kell nulláról kódot írnod. Közzététel után lépj be a Saját túráim oldalra, válaszd ki a kívánt túrát, nyisd meg a hárompontos menüt, és kattints az Integráció lehetőségre. Ott kiválasztod a weboldaladon használt platformhoz illő változatot — HTML, React, Angular, WordPress vagy Wix —, majd kimásolod a generált kódot.

Ugyanabban az ablakban be- és kikapcsolhatod az integrációt, és meghatározhatod, hogy mely doméneken jelenhet meg a túra. Így teljes kontrollt kapsz a megjelenítés felett anélkül, hogy visszamennél a szerkesztőbe, vagy módosítanád a túra tartalmát.

A látogató számára az eredmény egyszerű: a 360 fokos virtuális bejárás közvetlenül a te oldaladban nyílik meg. Nem irányítod más weboldalra, nem veszed ki a bemutató oldalból, és nem kell külön keresnie a galériát. Pontosan ott fedezheti fel a szobákat, asztalokat, lakást, showroomot vagy rendezvényteret, ahol a leírás, az ajánlat, a kapcsolatfelvételi űrlap vagy a foglalási gomb is megtalálható.

Röviden

• A weboldalba integrált virtuális túra közvetlenül az oldalon jelenik meg, nem külső platformra mutató linkként.
• A Toursban a kódot a Saját túráim oldalon találod, miután a túrát közzétetted.
• A lépések: Saját túráim → hárompontos menü → Integráció → platform kiválasztása → kód másolása.
• Az integrációs ablakban be- és kikapcsolhatod a túra megjelenítését külső weboldalakon.
• Beállíthatod, hogy mely doméneken jelenhet meg a túra, így megakadályozhatod az illetéktelen felhasználást.
• HTML, React, Angular, WordPress és Wix változat is elérhető.
• Ha módosítod a túrát a szerkesztőben, a weboldalba integrált változat automatikusan frissül.
• Az integrált túra tartalmazhat 360 fokos jeleneteket, interaktív pontokat, foglalásokat és használati statisztikákat.

Mit jelent egy virtuális túra weboldalba integrálása?

Egy virtuális túra weboldalba integrálása azt jelenti, hogy a látogató közvetlenül az oldalon belül fedezhet fel egy 360 fokos teret. Nem csak egy nagy képet lát, és nem irányítják külső galériába. Forgathatja a képet, átléphet egyik helyiségből a másikba, rákattinthat interaktív pontokra, és olyan részleteket fedezhet fel, amelyeket a hagyományos fotók nem mutatnak meg ilyen szemléletesen.

Egy szálloda esetén ez meggyőzőbb szobabemutató lehet. Egy étteremnél azt jelenti, hogy a vendégek még foglalás előtt látják a hangulatot és a termet. Ingatlanoknál csökkenti a felesleges kérdéseket, mert a látogató jobban megérti az elrendezést és a méreteket, mielőtt megtekintést kérne.

Technikai szempontból az integráció a platform által generált kóddal történik. Kimásolod a Toursból, és beilleszted a weboldaladba. WordPress vagy Wix esetén egy HTML elembe kerül. Egyedi fejlesztésű oldalnál az oldal kódjába illeszted be. React vagy Angular projekteknél az adott technológiához készített változatot használod.

A legnagyobb előny az, hogy a látogató ugyanabban a kontextusban marad. A túra elhelyezhető a szobaleírás, a kapcsolatfelvételi űrlap, az árak vagy a foglalás gomb mellé. Ez gördülékenyebb és kényelmesebb felhasználói élményt teremt.

Hogyan szerzed meg az integrációs kódot a Toursban?

A Toursban az integrációs kód automatikusan generálódik. Nem kell manuálisan összerakni, és nem kell rejtett beállítások között keresgélni. Miután a túra közzé van téve, megtalálod a túráid listájában, és onnan közvetlenül megnyitod az integrációt.

• Lépj be a Tours fiókodba.
• Nyisd meg a Saját túráim oldalt.
• Keresd meg a közzétett túrát, amelyet meg szeretnél jeleníteni a weboldaladon.
• Kattints a túra melletti hárompontos menüre.
• Válaszd az integrációs lehetőséget.
• Ellenőrizd, hogy az integráció aktív-e.
• Add meg vagy módosítsd az engedélyezett doméneket.
• Válaszd ki a kódváltozatot: HTML, React, Angular, WordPress vagy Wix.
• Másold ki a megjelenő kódot, és illeszd be a weboldalad kívánt oldalára.

Minden túrának saját integrációs beállításai vannak. Ez különösen fontos, ha több helyszínt, több ingatlant vagy több bemutató oldalt kezelsz. Lehet külön túrád a recepcióhoz, a szobákhoz, az étteremhez és egy rendezvényteremhez — mindegyiknek saját kóddal és saját engedélyezett doménekkel.

Mit állíthatsz be az integrációs ablakban?

Az integrációs ablak nem csupán a kód másolásának helye. Itt szabályozhatod azt is, hogyan használják a túrát külső weboldalakon. Innen kikapcsolhatod az integrációt, engedélyezhetsz csak bizonyos doméneket, és kiválaszthatod a platformodhoz illő kódot.

• Be- és kikapcsolás: leállíthatod a túra megjelenítését külső weboldalakon anélkül, hogy törölnéd a túrát a fiókodból.
• Engedélyezett domének: meghatározhatod, hogy mely weboldalakon jelenhet meg a túra — például a szálloda, az étterem vagy az ingatlaniroda doménjén.
• Platform kiválasztása: HTML, React, Angular, WordPress vagy Wix közül választhatsz.
• Azonnal másolható kód: a platform kiválasztása után a megfelelő kód megjelenik a választó alatt.
• Túránkénti külön beállítások: minden közzétett túrának saját integrációs szabályai lehetnek.

Az engedélyezett domének listája hasznos a kontroll szempontjából. Ha például egy szálloda hivatalos weboldalára készítettél túrát, engedélyezheted a megjelenítést csak azon a doménen. Ha valaki kimásolja a kódot és más weboldalra próbálja feltenni, az integráció blokkolható.

Melyiket válaszd: HTML, React, Angular, WordPress vagy Wix?

Nem minden weboldal épül ugyanúgy, ezért a Tours több kódváltozatot kínál. A lényeg az, hogy ne neked kelljen manuálisan igazítani az integrációt — csak válaszd ki a megfelelő változatot, és másold ki a generált kódot.

Ha nem tudod, melyiket válaszd, az ökölszabály egyszerű: WordPress esetén WordPress, Wix esetén Wix, React vagy Next.js esetén React, Angular esetén Angular, minden más egyedi kódot elfogadó weboldalnál pedig HTML.

Virtuális túra integrálása WordPressre

WordPressre az integráció meglehetősen egyszerű. Kiválasztod a WordPress változatot a Toursban, kimásolod a kódot, és beilleszted arra az oldalra, ahol meg szeretnéd jeleníteni a virtuális bejárást. Nincs szükség külön virtuális túra bővítményre, amíg a témád vagy a szerkesztőd lehetővé teszi egyedi HTML hozzáadását.

• Gutenbergben adj hozzá egy egyedi HTML blokkot, és illeszd be a kódot.
• Elementorban használd a HTML elemet, és helyezd el a kódot a kívánt szekcióban.
• Diviben használd a kódmodult.
• WPBakery esetén használhatsz nyers HTML vagy egyedi kód elemet.
• A klasszikus szerkesztőben válts Szöveg / HTML nézetre, és illeszd be a kódot a megfelelő helyre.

Érdemes figyelni arra is, mekkora helyre kerül a túra. Ha túl kis szekcióba zsúfolod, az élmény nem fog jól kinézni. Asztali nézetben körülbelül 600 px magasság általában jó kiindulópont, mobilon pedig mindenképpen ellenőrizd az oldalt közzététel előtt.

Virtuális túra integrálása Wixre

Wix esetén válaszd a Wix változatot a Toursban, és másold ki a generált kódot. Ezután lépj be a Wix szerkesztőbe, és adj hozzá egy HTML integrációs elemet az oldal azon részéhez, ahol meg szeretnéd jeleníteni a virtuális túrát.

• Nyisd meg a kívánt oldalt a Wix szerkesztőben.
• Adj hozzá egy új elemet a + menüből.
• Válaszd az integrációs vagy egyedi kód területet.
• Válaszd a HTML elemet.
• Illeszd be a Tours által Wixhez generált kódot.
• Állítsd be a szélességet és magasságot asztali és mobil nézethez.
• Tedd közzé az oldalt, és teszteld a túrát az élő weboldalon.

Ha a túra levágva jelenik meg Wixben, az esetek többségében a HTML elem mérete a probléma, nem a Tours kódja. Növeld meg a túrának szánt területet, ellenőrizd a mobil nézetet, és győződj meg róla, hogy az oldal legújabb verzióját tetted közzé.

Integráció React, Angular, Webflow, Squarespace vagy HTML esetén

Ha a weboldalad nem WordPress vagy Wix alapú, válaszd a projektedhez illő változatot. Nulláról épített weboldalnál a HTML változat általában elegendő. Modern alkalmazásokhoz a React vagy Angular kódot használhatod.

• React / Next.js: használd a React változatot, és illeszd be abba a komponensbe, ahol meg szeretnéd jeleníteni a túrát.
• Angular: használd az Angular változatot a megfelelő komponens sablonjában.
• Webflow: adj hozzá egy integrációs elemet, és illeszd be a Tours HTML kódját.
• Squarespace: adj hozzá egy kódblokkot, és illeszd be a HTML változatot.
• Shopify: helyezd el a kódot egy egyedi HTML szekcióban vagy egy oldalsablonban, a használt témától függően.
• Tiszta HTML: illeszd be a kódot közvetlenül oda, ahol a túrát be szeretnéd tölteni.

Ha a platformod nem enged egyedi kódot, használhatod a túra nyilvános linkjét vagy a Tours által generált QR-kódot. Ha azonban lehetőséged van rá, a közvetlen integráció jobb megoldás kereskedelmi oldalakhoz, mert a látogató az ajánlat, az űrlap vagy a foglalás gomb közelében marad.

Hogyan hozd létre a túrát az integráció előtt?

Mielőtt eljutnál az integrációs kódhoz, szükséged van egy közzétett túrára. A Toursban a túra létrehozása vizuálisan történik: feltöltöd a 360 fokos jeleneteket, rendezed őket, és hozzáadod a szükséges interaktív pontokat.

• Hozz létre fiókot a getours.app oldalon, és lépj be a Tours alkalmazásba.
• Nyisd meg a Saját túráim oldalt, és kattints az új túra létrehozása gombra.
• Add meg a túra nevét és kategóriáját; opcionálisan hozzáadhatsz helyszínt, árat vagy címkéket.
• Töltsd fel az első 360 fokos jelenetet, és adj neki egyértelmű nevet.
• A szerkesztőben adj hozzá további jeleneteket, navigációs pontokat, információkat, képeket, videókat, külső linkeket és jelenetcsoportokat.
• Ha egyes pontokat foglaláshoz szeretnél kötni, szervezd őket belső címkékkel.
• Tedd közzé a túrát, és válaszd ki a megfelelő láthatósági beállítást.
• Közzététel után térj vissza a Saját túráim oldalra, nyisd meg a hárompontos menüt, és válaszd az integrációt.

Röviden: a szerkesztő az a hely, ahol felépíted a 360 fokos élményt, az integrációs ablak pedig az, ahonnan felteszed a túrát a weboldaladra, és szabályozod, hol jelenhet meg.

Lehet foglalás az integrált virtuális túrában?

Igen. Ha beállítottad a foglalásokat a Toursban, azok a weboldalba integrált túrában is működnek. A látogató felfedezheti a teret, és foglalást vagy kérést küldhet anélkül, hogy másik oldalra kellene navigálnia.

• Foglalás a teljes túrához: megjeleníthetsz egy foglalás gombot, amely a túra teljes időtartama alatt elérhető.
• Foglalás jelenetszinten: csak bizonyos szobákban vagy területeken aktiválhatod a foglalást.
• Foglalás jelenetcsoport szinten: több jelenetet csoportosíthatsz, ami hasznos különböző szobatípusoknál, lakásoknál vagy tereknél.
• Foglalás interaktív ponton keresztül: egy pont a túrában megnyithatja a foglalási ablakot egy asztalhoz, szobához, térhez vagy megtekintési időponthoz.
• Foglalás címkék alapján: több interaktív pont ugyanazt a naptárat használhatja, ha ugyanazzal a címkével vannak összekötve.

A foglalásokat külön kell beállítani, a Foglaláskezelőben. Ott adod meg az elérhetőségi naptárat, a kapacitási szabályokat, a manuális vagy automatikus jóváhagyást, és a kéréseket kezelő személyeket. Ezután a kezelőt összekapcsolod a túrával, bizonyos jelenetekkel, jelenetcsoportokkal vagy interaktív pontokkal.

Ha már használsz PMS-t, csatornamanagert vagy más foglalási platformot, a Tours vizuális kiegészítő csatornaként működhet. Ha az elérhetőséget több helyen kezeled, a manuális jóváhagyás segít elkerülni az átfedéseket.

Mit lát a látogató az integrált túrában?

A látogató pontosan azt az élményt látja, amelyet a Tours szerkesztőjében felépítettél. Nem csupán egy panorámaképet kap az oldalra illesztve, hanem egy interaktív virtuális bejárást, amely tartalmazhat navigációt, információkat, linkeket, foglalásokat és háttérben futó használati statisztikákat.

• 360 fokos jelenetek, amelyeket a látogató minden irányba forgathat.
• Navigáció szobák vagy területek között interaktív pontokon keresztül.
• Információs pontok szöveggel, képekkel vagy videóval.
• Külső linkek menükhöz, katalógusokhoz, termékoldalakhoz vagy űrlapokhoz.
• Foglalás gomb vagy interaktív pontok, amelyek megnyitják a foglalási ablakot.
• Többnyelvű tartalom, ha beállítottad a túrában.
• Látogatási statisztikák az elért jelenetekről és interakciókról.

Miért nem jelenik meg a túra a weboldalon?

Ha beillesztetted a kódot a weboldaladra, de a túra nem jelenik meg, az nem feltétlenül jelenti azt, hogy az integráció hibás. Az esetek többségében egy beállítás hiányzik, vagy a kód olyan helyre került, ahol nem tud helyesen megjelenni.

• Ellenőrizd, hogy a túra közzé van-e téve. Egy közzé nem tett túra nem fog helyesen megjelenni a weboldalon.
• Ellenőrizd, hogy az integráció aktív-e: Saját túráim → hárompontos menü → integráció.
• Ellenőrizd az engedélyezett doméneket. A weboldalad doménjének szerepelnie kell az elfogadott listán.
• Győződj meg róla, hogy a megfelelő kódváltozatot választottad: WordPress esetén WordPress, Wix esetén Wix, React esetén React, Angular esetén Angular, minden más esetben HTML.
• Ha Wixet vagy vizuális szerkesztőt használsz, növeld meg az elem magasságát, amelybe a túrát helyezted.
• Ellenőrizd, hogy a platformod engedélyezi-e a HTML vagy külső kód beillesztését. Egyes ingyenes csomagoknak lehetnek korlátozásai.
• Tedd közzé az oldalt a kód beillesztése után. Néha a túra megjelenik az előnézetben, de az élő weboldalon nem, ha a módosítások nem lettek közzétéve.

A leggyorsabb ellenőrzés: térj vissza az integrációs ablakba, nézd meg, hogy az integráció aktív-e, a domén engedélyezett-e, és a kiválasztott kód megfelel-e a platformodnak. Az esetek nagy részében a probléma megoldódik anélkül, hogy bármit változtatnál a túrán.

Összehasonlítás más virtuális túra platformokkal

Sok virtuális túra platform kínál valamilyen weboldalba integrálási lehetőséget. A különbség akkor mutatkozik meg, ha többet szeretnél az egyszerű megjelenítésnél: domén-szintű kontroll, foglalások, használati statisztikák, többnyelvű tartalom vagy különböző technológiákhoz készített kódváltozatok.

A Tours mögötti gondolat nem csupán az, hogy panorámaképet tegyél az oldaladra, hanem hogy a virtuális bejárást az oldalad hasznos részévé tedd: bemutató, interakció, foglalás, ajánlatkérés vagy a látogatói érdeklődés mérése.

Ha ki szeretnéd próbálni az integrációt, kezdheted egy egyszerű túrával. Létrehozod a fiókot, közzéteszed az első túrát, belépesz a Saját túráim oldalra, megnyitod az integrációt, és kimásolod a platformodhoz illő kódot. Néhány perc alatt megjelenik a 360 fokos virtuális bejárás közvetlenül a weboldaladon, interaktív pontokkal, foglalásokkal és valós használatra kész statisztikákkal.