Integrácia virtuálnej prehliadky na webovú stránku

Q: Kam na webe umiestniť prehliadku?

• Samostatná podstránka alebo sekcia „3D prehliadka" – hlavné miesto, na ktoré vedú všetky odkazy • Hlavná stránka – v hornej časti alebo pri popise ubytovania • Galéria – vedľa fotografií ako interaktívna alternatíva • Kontaktná stránka – „Pozrite si nás pred návštevou"

Q: Porovnanie: vloženie alebo odkaz?

• Vloženie je lepšie, keď chcete, aby návštevník videl prehliadku hneď, prehliadka je hlavný obsah stránky a chcete, aby na webe zostal čo najdlhšie. • Odkaz je lepší, keď je prehliadka doplnkový obsah, chcete ju dať do menu, pätičky alebo tlačidla, alebo máte viac prehliadok. • Kombinácia oboch prináša najlepší výsledok. Prehliadku vložte do sekcie alebo na podstránku a veďte na ňu odkaz z menu aj tlačidlo z úvodu, tak ako na webe Zrub pod Poľanou.

Ako vložiť 3D virtuálnu prehliadku na web kódom iframe alebo odkazom z menu, tlačidla či textu. Ukážka na skutočnom webe zrubpodpolanou.sk vrátane kódu a obrázkov.

Krátka odpoveď: Virtuálnu prehliadku dostanete na web dvoma spôsobmi. Buď ju vložíte priamo do stránky kódom iframe, alebo na ňu odkážete z menu, tlačidla či textu. Najlepšie funguje kombinácia oboch, ako na webe Zrub pod Poľanou: prehliadka je vložená v samostatnej sekcii a vedie na ňu položka v menu, tlačidlo pod galériou aj odkazy priamo do jednotlivých miestností.

Pozrite si to naživo na stránke https://www.zrubpodpolanou.sk/#prehliadka

Dva spôsoby, ako dostať prehliadku na web

1. Vloženie priamo do stránky (iframe) – prehliadka sa zobrazí ako súčasť stránky a návštevník ju vidí okamžite bez klikania.
2. Otváranie cez odkaz – návštevník klikne na položku v menu, tlačidlo alebo text a prehliadka sa otvorí v sekcii na stránke alebo v novom okne.

Oba spôsoby fungujú na akomkoľvek webe. Nižšie ich ukazujeme na skutočnej stránke chaty Zrub pod Poľanou, vrátane kódu, ktorý na nej je.

1. Vloženie priamo do stránky (iframe)

Kód iframe zobrazí prehliadku ako súčasť stránky. Návštevník sa prechádza po chate bez toho, aby opustil váš web.

Príklad z praxe: Zrub pod Poľanou

Na webe Zrub pod Poľanou je prehliadka vložená v sekcii „Prejdite sa zrubom v 3D". Nad ňou sú záložky na prepínanie medzi 3D interiérom, pohľadom z dronu a videom. Pod ňou je tlačidlo na celú obrazovku a rezervácia.

Vložená 3D prehliadka na webe zrubpodpolanou.sk. Návštevník ju spustí priamo na stránke.

Naživo: https://www.zrubpodpolanou.sk/#prehliadka

Kód, ktorý je na stránke

Presne tento kód je vložený na webe Zrub pod Poľanou:

<iframe width="100%" height="550"
        src="https://my.roowax.sk/sk/tour/zrub-pod-polanou-web?play=1"
        frameborder="0" allowfullscreen loading="lazy"></iframe>

Čo znamenajú jednotlivé časti:

src – adresa prehliadky. Vždy je to stály odkaz my.roowax.sk, ktorý sa nemení ani po aktualizácii modelu.
width="100%" – prehliadka vyplní celú šírku stránky, aj na mobile
height="550" – výška okna v pixeloch. Na počítači odporúčame 500 až 650.
allowfullscreen – povolí tlačidlo na celú obrazovku
loading="lazy" – prehliadka sa načíta, až keď k nej návštevník doroluje, takže nespomalí úvod stránky

Tip: všimnite si ?play=1 na konci adresy v src. Vďaka nemu sa prehliadka spustí hneď, bez úvodnej obrazovky s tlačidlom. Hotový kód vám pošleme s týmto nastavením.

Kam na webe umiestniť prehliadku?

Samostatná podstránka alebo sekcia „3D prehliadka" – hlavné miesto, na ktoré vedú všetky odkazy
Hlavná stránka – v hornej časti alebo pri popise ubytovania
Galéria – vedľa fotografií ako interaktívna alternatíva
Kontaktná stránka – „Pozrite si nás pred návštevou"

WordPress, Wix, Squarespace

Väčšina webových platforiem vloženie kódu iframe podporuje:

WordPress: blok „Vlastné HTML"
Wix: prvok „HTML Embed"
Squarespace: blok „Code"

Vo WordPresse stačí v editore napísať /html a vybrať blok „Vlastné HTML". Do neho vložíte kód.

WordPress: po napísaní /html sa ponúkne blok Vlastné HTML (Custom HTML)

2. Otváranie prehliadky cez odkaz

Odkaz je jednoduchší. Návštevník klikne a prehliadka sa otvorí, buď v sekcii na tej istej stránke, alebo na celú obrazovku v novom okne. Web Zrub pod Poľanou používa tri druhy odkazov.

A) Položka v menu

V hornom menu je položka „3D prehliadka". Neotvára nové okno, ale posunie stránku priamo na sekciu s vloženou prehliadkou.

Položka „3D prehliadka" v menu webu zrubpodpolanou.sk

<a href="#prehliadka">3D prehliadka</a>

Odkaz #prehliadka vedie na sekciu, ktorá má na stránke označenie id="prehliadka". Ak máte prehliadku na samostatnej podstránke, do odkazu dajte adresu tej podstránky.

B) Tlačidlo

Tlačidlo priťahuje pozornosť najviac. Na webe Zrub pod Poľanou je pod galériou tlačidlo „Prejdite sa zrubom v 3D", ktoré tiež posúva na vloženú prehliadku.

Tlačidlo „Prejdite sa zrubom v 3D" pod galériou

Pod samotnou prehliadkou je druhé tlačidlo, „Otvoriť na celú obrazovku". To otvorí prehliadku v novom okne na celú plochu.

Tlačidlo „Otvoriť na celú obrazovku" otvorí prehliadku v novom okne

<a href="https://my.roowax.sk/sk/tour/zrub-pod-polanou-web" target="_blank" rel="noopener">Otvoriť na celú obrazovku</a>

Časť target="_blank" otvorí prehliadku v novom okne, takže návštevník neodíde z vášho webu.

C) Odkaz priamo do konkrétnej miestnosti

Odkaz môže viesť rovno do vybranej miestnosti. Web Zrub pod Poľanou má pod prehliadkou karty „Všetky spálne", „Kuchyňa & obývačka" a „Výhľad & terasa". Každá otvorí prehliadku presne na danom mieste.

Karty s odkazmi do spální, kuchyne a na terasu

<a href="https://my.roowax.sk/tour/zrub-pod-polanou-web?play=1&sr=-.31,.59&ss=64" target="_blank" rel="noopener">Všetky spálne</a>

Časť ss=64 určuje miesto v prehliadke a sr smer pohľadu. Takéto odkazy vám pripravíme pre miestnosti, ktoré chcete zvýrazniť.

Všetky tri druhy odkazov zo stránky zrubpodpolanou.sk

D) Otvorenie v okne nad stránkou (popup)

Ak váš web podporuje vyskakovacie okná (pluginy vo WordPresse, lightbox vo Wixe), prehliadka sa dá otvoriť aj v nich. Princíp je jednoduchý: klik otvorí okno a vnútri je kód iframe.

Porovnanie: vloženie alebo odkaz?

Vloženie je lepšie, keď chcete, aby návštevník videl prehliadku hneď, prehliadka je hlavný obsah stránky a chcete, aby na webe zostal čo najdlhšie.
Odkaz je lepší, keď je prehliadka doplnkový obsah, chcete ju dať do menu, pätičky alebo tlačidla, alebo máte viac prehliadok.
Kombinácia oboch prináša najlepší výsledok. Prehliadku vložte do sekcie alebo na podstránku a veďte na ňu odkaz z menu aj tlačidlo z úvodu, tak ako na webe Zrub pod Poľanou.

Často kladené otázky

Ako vložiť virtuálnu prehliadku na web?

Skopírujte kód iframe, ktorý od nás dostanete, a vložte ho do HTML bloku na stránke. Vo WordPresse je to blok „Vlastné HTML", vo Wixe „HTML Embed", v Squarespace blok „Code".

Spomalí vložená prehliadka môj web?

Nie, ak má kód loading="lazy". Prehliadka sa potom načíta až vtedy, keď k nej návštevník doroluje.

Je lepšie prehliadku vložiť, alebo na ňu odkázať?

Najlepšie oboje. Prehliadku vložte do samostatnej sekcie alebo na podstránku a veďte na ňu odkaz z menu aj tlačidlo z úvodnej stránky.

Dá sa odkázať priamo do konkrétnej miestnosti?

Áno. Odkaz môže otvoriť prehliadku rovno v spálni, kuchyni alebo na terase. Pripravíme vám ho.

Kam prehliadku vložiť a kam dať len odkaz, napríklad v Google mapách, na Bookingu alebo v e-maile, rozoberáme v článku /blog/kam-virtualnu-prehliadku-vlozit-a-kam-dat-len-odkaz

ROOWAX ku každej prehliadke dodá hotový kód na vloženie aj stály odkaz my.roowax.sk. S umiestnením na web radi pomôžeme, napíšte na info@roowax.sk.

Autor: Ing. Róbert Vaško, ROOWAX (3DvirtualSK s. r. o.) – 3D virtuálne prehliadky Matterport pre chaty, ubytovanie a firmy na Slovensku. Kontakt: info@roowax.sk, +421 950 891 933.