1. Virtuellen Rundgang per iframe einbetten

Virtuelle Rundgänge können ähnlich wie YouTube-Videos über ein <iframe> in Websites eingebettet werden.

Ersetze YOUR-PROJECT-URL durch den Link zu deinem virtuellen Rundgang:

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

Hinweise

Wechsle in den HTML-Editor, bevor du den Code in deinen Website-Builder oder dein CMS einfügst.
Du kannst die Höhe des iframe an das Layout deiner Website anpassen.
Wir empfehlen, den Standard-iframe-Code direkt zu verwenden und keine Drittanbieter-Plugins zu nutzen, da Plugins Funktionen wie den Vollbildmodus deaktivieren können.

2. Rundgang per Hyperlink öffnen

Wenn du den Rundgang nicht direkt in die Seite einbetten möchtest, kannst du ihn öffnen, wenn ein Nutzer auf einen Textlink oder ein Bild klickt.

Textlink

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

Bildlink

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

Hinweise

Entferne target="_blank", wenn der Rundgang im selben Browser-Tab geöffnet werden soll.
Diese Methode ist besonders hilfreich für mobile Layouts oder Websites mit begrenztem Platz.

3. Vollbildmodus aktivieren

Damit Besucher den virtuellen Rundgang im Vollbildmodus öffnen können, füge das Attribut allowfullscreen zum iframe hinzu.

Beispiel

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

Wenn alles korrekt eingerichtet ist, wird die Vollbild-Schaltfläche im Player des virtuellen Rundgangs angezeigt.

4. Analytics-Tracking deaktivieren

Du kannst Analytics- und Cookie-Tracking deaktivieren, indem du ?nocookie zur URL des Rundgangs hinzufügst.

Analytics aktiviert (Standard)

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

Analytics deaktiviert

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

Das ist hilfreich für datenschutzsensible Umgebungen und strengere Cookie-Compliance-Anforderungen.

5. Erweiterte iframe-Integrationen

Für erweiterte Integrationen unterstützen in iframes eingebettete Rundgänge die Kommunikation mit der Host-Website über postMessage.

Damit kann deine Plattform:

Auf Hotspot-Klicks reagieren
Eine eigene Hotspot-Benutzeroberfläche anzeigen
Direkt zu bestimmten Hotspots verlinken
Das standardmäßige Giraffe360-Hotspot-Popup deaktivieren

5.1. Auf Klicks auf Info-Hotspots reagieren

Wenn ein Besucher in einem per iframe eingebetteten Rundgang auf einen Info-Hotspot klickt, sendet der Player ein postMessage-Event an die übergeordnete Seite.

Wann Events gesendet werden

Nur wenn der Rundgang in einem iframe eingebettet ist. Rundgänge, die direkt im Browser geöffnet werden, senden diese Nachrichten nicht.
Bei jedem Klick auf einen Info-Hotspot.
Unabhängig davon, ob das standardmäßige Hotspot-Popup aktiviert oder deaktiviert ist.

Nachrichtenformat

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

Hinweise

text enthält den Inhalt des Hotspots als reinen Text.
images enthält signierte CDN-Bild-URLs, die direkt in <img src> verwendet werden können.
Wenn das Inhaltsformat des Hotspots nicht unterstützt wird, ist text leer und images ist ein leeres Array.

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

Sicherheitshinweis

Der Ziel-Ursprung von postMessage ist '*'. Daher solltest du immer Folgendes validieren:

event.source
event.data.type

bevor du eingehenden Nachrichten vertraust.

5.2. Standardmäßiges Hotspot-Popup deaktivieren

Standardmäßig öffnet ein Klick auf einen Info-Hotspot das Giraffe360-Popup im Rundgang.

Du kannst dieses Verhalten deaktivieren, wenn du eine eigene Benutzeroberfläche wie eine Seitenleiste, ein Modal oder ein Panel verwenden möchtest, um Hotspot-Inhalte anzuzeigen..

So deaktivierst du das Popup

Gehe zu: Dashboard → Virtueller Rundgang → Rundgang bearbeiten → Einstellungen

Schalte aus: "Informations-Popup für Hotspots anzeigen"

Verhalten bei deaktiviertem Popup

Hotspot-Klicks funktionieren weiterhin.
g360:info-hotspot-click Events werden weiterhin gesendet.
Nur das standardmäßige Popup wird ausgeblendet.
Navigations-Hotspots und andere Hotspot-Typen sind nicht betroffen.

Empfohlenes Vorgehen

Verwende den g360:info-hotspot-click-postMessage-Listener zusammen mit der deaktivierten Popup-Einstellung, um eine eigene Seitenleiste, ein Modal oder ein Panel auf der Host-Website anzuzeigen.

5.3. Deep-Link zu einem Hotspot mit Reference IDs

Info-Hotspots können optional eine benutzerdefinierte Reference ID erhalten.

Dadurch kann deine Plattform den Rundgang mit Fokus auf einen bestimmten Hotspot öffnen.

Reference IDs aktivieren

Gehe zu: Dashboard → Virtueller Rundgang → Rundgang bearbeiten → Einstellungen

Schalte ein: "Referenz-IDs für Hotspots aktivieren"

Diese Einstellung ist standardmäßig deaktiviert.

Anschließend erscheint im Editor ein Feld Reference ID für Info-Hotspots.

Verhalten von Reference IDs

Reference IDs sind innerhalb eines Rundgangs eindeutig.
Der Abgleich unterscheidet nicht zwischen Groß- und Kleinschreibung.
Führende und nachgestellte Leerzeichen werden ignoriert.

Beispiel für einen Deep-Link

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

Verhalten

Wenn der Rundgang geladen wird:

Der Player sucht nach einer passenden Hotspot-Reference-ID.
Wenn eine passende ID gefunden wird, öffnet sich die Kamera zentriert auf diesen Hotspot.
Andernfalls wird die Standard-Startszene des Rundgangs verwendet.

Wenn keine passende Reference ID gefunden wird:

Der Player verwendet den Parameter ?v=, falls vorhanden.
Otherwise the default tour starting scene is used

Zusammenspiel mit `?v=`

Die Funktion „Share Tour“ erzeugt weiterhin nur ?v=-URLs. Der Parameter ?rid= ist für clientgesteuertes Deep-Linking vorgesehen.

Wenn sowohl ?rid= als auch ?v= vorhanden sind:

?rid= hat Vorrang, wenn ein passender Hotspot gefunden wird.
Wenn kein passender Hotspot gefunden wird, fällt der Rundgang auf ?v= zurück.

5.4. Beispiel: Einen Hotspot-Deep-Link erzeugen

const tourUrl = new URL(baseTourUrl);

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

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

6. Kurzübersicht

Funktion	Beschreibung
iframe embed	Rundgänge direkt in Webseiten einbetten
?nocookie	Analytics und Cookies deaktivieren
g360:info-hotspot-click	Hotspot-Klicks über `postMessage` erfassen
Hide hotspot popup	Eigene Benutzeroberfläche außerhalb des Rundgangs anzeigen
?rid=	Direkt zu einem Hotspot verlinken
Reference IDs	Hotspots mit Objekten in deiner eigenen Plattform verknüpfen

7. Einschränkungen und Hinweise

postMessage-Events sind nur für per iframe eingebettete Rundgänge verfügbar.
Der Parameter ?rid= positioniert die Kamera, öffnet aber nicht automatisch den Hotspot-Inhalt.
Reference IDs sind nur pro Rundgang eindeutig, nicht global.
Bild-URLs im Hotspot-Payload sind signierte CDN-URLs und können nach einiger Zeit ablaufen.
Validiere immer event.source, bevor du eingehenden postMessage-Daten vertraust.

Verwandte Artikel

Editor für virtuellen Rundgang: Info-Hotspots

Virtuelle Rundgänge auf Zillow integrieren

Virtuelle Rundgänge integrieren

1. Virtuellen Rundgang per iframe einbetten

Hinweise

2. Rundgang per Hyperlink öffnen

Textlink

Bildlink

Hinweise

3. Vollbildmodus aktivieren

Beispiel

4. Analytics-Tracking deaktivieren

Analytics aktiviert (Standard)

Analytics deaktiviert

5. Erweiterte iframe-Integrationen

5.1. Auf Klicks auf Info-Hotspots reagieren

Wann Events gesendet werden

Nachrichtenformat

Hinweise

Beispiel-Listener

Sicherheitshinweis

5.2. Standardmäßiges Hotspot-Popup deaktivieren

So deaktivierst du das Popup

Verhalten bei deaktiviertem Popup

5.3. Deep-Link zu einem Hotspot mit Reference IDs

Reference IDs aktivieren

Verhalten von Reference IDs

Beispiel für einen Deep-Link

Verhalten

Zusammenspiel mit ?v=

5.4. Beispiel: Einen Hotspot-Deep-Link erzeugen

6. Kurzübersicht

7. Einschränkungen und Hinweise

Zusammenspiel mit `?v=`