Virtual Tour Embed: Giraffe360 Tours and 3D Floor Plans on Your Website

Your agency's website has a page for the property, and the Giraffe360 virtual tour and 3D floor plan are ready. Both go onto that page the way a YouTube video does, in an iframe, or behind a text or image link where the page has little room. Visitors then walk through the property on your own site.

From the Dashboard to Your Property Page

It starts with a published link. For the tour, open the three-dot menu on the project's virtual tour card and select Tour links, then copy the Regular link, the one made for your website and social posts. For the floor plan, the same menu on the 3D Floor plan card opens Links, where you copy the 3D floor plan link. Each needs to say Published first, which takes edit access to the project. Both cards also have a Collect cookies switch that changes the link you copy, so decide on it before you copy.

Then, in your website builder or CMS, switch to the HTML editor and paste an iframe with that link as its source, the same kind of code a YouTube video uses. Size it to your layout: a height for the tour, a width and height for the floor plan. Giraffe360's own embed code includes allowfullscreen, which puts the fullscreen button in the tour player, and allow="vr", and our Help Centre has it ready to copy for the tour and the 3D floor plan. Paste the code in yourself, because a plugin's version of it can differ and switch features like fullscreen off.

Making It Fit Your Site

Some pages have no room for an embed, a mobile layout most of all. There, the tour or floor plan can open from a line of text or an image linked to the same address. With target="_blank" it opens in a new browser tab; without it, in the same one.

Your site's cookie rules may also decide which link you use. Embedded tours and floor plans collect analytics by default, and the link itself can turn that off. A tour link takes ?nocookie at the end and a 3D floor plan link takes /nocookie, which suits privacy-sensitive sites and stricter cookie compliance. The floor plan's Listing site friendly link already has analytics off and needs nothing added; /nocookie on it leads to a page that doesn't exist.

When Your Developer Wants More

An embedded tour can also talk to the page around it, which lets a developer build the tour into your site. Each time a visitor clicks an Info hotspot, the player sends the page a postMessage event of type g360:info-hotspot-click, carrying the hotspot's ID, its scene and its content as plain text and image addresses. Your page can show that content in its own sidebar or panel. To stop Giraffe360's popup appearing as well, turn off "Show info hotspot popup" in the virtual tour's Edit Tour settings; the clicks still send their events.

The same settings can give Info hotspots Reference IDs of your own, once "Enable info hotspot reference IDs" is on. Each ID is unique within the tour, and a tour link with ?rid= and the ID opens the tour centred on that hotspot, without opening its content. If no hotspot matches, the tour falls back to the view in ?v=, or its starting scene. The tour's own Share Tour feature still makes ?v= links only, and ?rid= links are for your site to build. These messages only come from a tour in an iframe, never from one opened directly in the browser. They are sent to any origin, so check the event's source and its type before trusting one, and treat the image addresses as temporary, since they are signed and can expire.