1. Embed a virtual tour with iframe

Virtual tours can be embedded into websites similarly to YouTube videos using an <iframe>.

Replace YOUR-PROJECT-URL with the link to your virtual tour:

<iframe
  src="YOUR-PROJECT-URL"
  style="width:100%; height:500px; border:0;"
  allowfullscreen
  allow="vr"
></iframe>

Notes

Switch to HTML editor mode before pasting the code into your website builder or CMS
You can adjust the iframe height based on your website layout
We recommend using the standard iframe code directly instead of third-party plugins, as plugins may disable features such as fullscreen support

2. Open tour via hyperlink

If you do not want to embed the tour directly into the page, you can open it when a user clicks a text link or image.

Text link

<a href="YOUR-PROJECT-URL" target="_blank">
  Open Virtual Tour
</a>

Image link

<a href="YOUR-PROJECT-URL" target="_blank">
  <img src="YOUR-IMAGE-URL" alt="Open Virtual Tour"/>
</a>

Notes

Remove target="_blank" if you want the tour to open in the same browser tab
This approach is especially useful for mobile layouts or websites with limited space

3. Enable fullscreen mode

To allow visitors to open the virtual tour in fullscreen mode, include the allowfullscreen attribute in the iframe.

Example

<iframe
  src="https://tour.giraffe360.com/YOUR-PROJECT-URL"
  style="width:100%; height:500px; border:0;"
  allowfullscreen
  allow="vr"
></iframe>

When configured correctly, the fullscreen button will appear inside the virtual tour player.

4. Disable analytics tracking

You can disable analytics and cookie tracking by adding ?nocookie to the tour URL.

Analytics enabled (default)

https://tour.giraffe360.com/westfieldshouse/

Analytics disabled

https://tour.giraffe360.com/westfieldshouse/?nocookie

This is useful for privacy-sensitive environments and stricter cookie compliance requirements.

5. Advanced iframe integrations

For advanced integrations, iframe-embedded tours support communication with the host website through postMessage.

This allows your platform to:

React to hotspot clicks
Render custom hotspot UI
Deep-link to specific hotspots
Disable the default Giraffe360 hotspot popup

5.1. Listen for info hotspot click events

When a visitor clicks an Info hotspot inside an iframe-embedded tour, the player sends a postMessage event to the parent page.

When events are emitted

Only when the tour is embedded inside an iframe. Tours opened directly in the browser do not emit these messages
On every Info hotspot click
Regardless of whether the default hotspot popup is enabled or disabled

Message payload

{
  type: 'g360:info-hotspot-click',
  hotspotId: string,
  sceneKey: string,
  content: {
    text: string,
    images: string[]
  }
}

Notes

text contains the hotspot body as plain text
images contains signed CDN image URLs that can be used directly in <img src>
If the hotspot content format is unsupported, text will be empty and images will be an empty array

Example listener

<iframe
  id="tour"
  src="https://tour.giraffe360.com/?token=..."
></iframe>

<script>
window.addEventListener('message', (event) => {
  const tourFrame = document.getElementById('tour');

  // Always validate the message source
  if (event.source !== tourFrame.contentWindow) return;

  // Validate message type
  if (event.data?.type !== 'g360:info-hotspot-click') return;

  const { hotspotId, sceneKey, content } = event.data;

  // Your custom UI logic
  showInfoPanel({
    hotspotId,
    sceneKey,
    text: content.text,
    images: content.images
  });
});
</script>

Security note

The postMessage target origin is '*', so you should always validate:

event.source
event.data.type

before trusting incoming messages.

5.2. Disable the default hotspot popup

By default, clicking an Info hotspot opens the Giraffe360 popup inside the tour.

You can disable this behavior if you want your own UI (sidebar, modal, panel, etc.) to handle hotspot content instead.

How to disable the popup

Go to: Dashboard → Virtual Tour → Edit Tour → Settings

Turn off: "Show info hotspot popup"

Behavior when disabled

Hotspot clicks still work
g360:info-hotspot-click events are still emitted
Only the default popup is hidden
Navigation hotspots and other hotspot types are unaffected

Recommended pattern

Use the g360:info-hotspot-click postMessage listener together with the popup disabled setting to render your own sidebar, modal, or panel on the host website.

5.3. Deep-link to a hotspot with reference IDs

Info hotspots can optionally be assigned a custom Reference ID.

This allows your platform to open the tour focused on a specific hotspot.

Enable reference IDs

Go to: Dashboard → Virtual Tour → Edit Tour → Settings

Turn on: "Enable info hotspot reference IDs"

This setting is off by default.

A Reference ID field will then appear for Info hotspots inside the editor.

Reference ID behavior

Reference IDs are unique within a tour
Matching is case-insensitive
Leading and trailing whitespace is ignored

Example deep link

https://tour.giraffe360.com/?token=...&rid=KITCHEN-FAUCET-12

Behavior

When the tour loads:

The player searches for a matching hotspot reference ID
If found, the camera opens centered on that hotspot
The hotspot popup is not automatically opened

If no matching reference ID exists:

The player falls back to the ?v= parameter (if present)
Otherwise the default tour starting scene is used

Interaction with `?v=`

The Share Tour feature continues to generate ?v= URLs only. The ?rid= parameter is intended for client-driven deep-linking.

If both ?rid= and ?v= are present:

?rid= takes priority when a matching hotspot exists
If no matching hotspot is found, the tour falls back to ?v=

5.4. Example: Generate a hotspot deep link

const tourUrl = new URL(baseTourUrl);

tourUrl.searchParams.set(
  'rid',
  product.giraffeReferenceId
);

window.open(tourUrl.toString(), 'tour');

6. Quick reference

Feature	Description
iframe embed	Embed tours directly into webpages
?nocookie	Disable analytics and cookies
g360:info-hotspot-click	Listen for hotspot clicks via postMessage
Hide hotspot popup	Render custom UI outside the tour
?rid=	Deep-link directly to a hotspot
Reference IDs	Associate hotspots with entities in your own platform

7. Limitations and notes

postMessage events are only available in iframe-embedded tours.
The ?rid= parameter positions the camera but does not automatically open hotspot content.
Reference IDs are unique per tour, not globally.
Image URLs included in hotspot payloads are signed CDN URLs and may expire over time.
Always validate event.source before trusting incoming postMessage data.

Virtual Tour: Listing Site Friendly Link

Virtual Tour Editor: Branding

Measurement Tool – Virtual Tour

How to Embed Your Virtual Tour on StreetEasy

3D Floor Plan Integration

Virtual Tour Integration

1. Embed a virtual tour with iframe

Notes

2. Open tour via hyperlink

Text link

Image link

Notes

3. Enable fullscreen mode

Example

4. Disable analytics tracking

Analytics enabled (default)

Analytics disabled

5. Advanced iframe integrations

5.1. Listen for info hotspot click events

When events are emitted

Message payload

Notes

Example listener

Security note

5.2. Disable the default hotspot popup

How to disable the popup

Behavior when disabled

5.3. Deep-link to a hotspot with reference IDs

Enable reference IDs

Reference ID behavior

Example deep link

Behavior

Interaction with ?v=

5.4. Example: Generate a hotspot deep link

6. Quick reference

7. Limitations and notes

Interaction with `?v=`