Das Einbetten einer 360°-Tour auf Ihrer Website verwandelt Besucher, die bereits auf Ihrer Seite sind, von passiven Interessenten in aktive Entdecker Ihrer Räumlichkeiten. Seiten mit eingebetteten 360°-Touren verzeichnen eine durchschnittliche Sitzungsdauer von über 5 Minuten – gegenüber unter 2 Minuten ohne Tour. Und die Sitzungsdauer ist eines der wichtigsten Signale im organischen Such-Ranking von Google. Dieser Leitfaden behandelt jede Einbettungsmethode, plattformspezifische Integration und Optimierungstechniken.
So funktioniert das Einbetten von 360°-Touren
Die iFrame-Methode
Der Standardweg, eine 360°-Tour einzubetten, ist ein HTML-iFrame-Tag. Ein iFrame bettet eine Webseite in eine andere ein – der 360°-Viewer lädt innerhalb des iFrames auf Ihrer Seite. Der Tour-Inhalt wird auf der Plattform gehostet (Travvir, Kuula, Momento360 usw.) und Ihre Website zeigt ihn einfach über den iFrame-Container an.
Der grundlegende iFrame-Einbettungscode sieht folgendermaßen aus:
<iframe
src="https://app.travvir.com/tour/IHRE-TOUR-ID"
width="100%"
height="500"
frameborder="0"
allowfullscreen
allow="xr-spatial-tracking; gyroscope; accelerometer"
></iframe> Das Attribut allowfullscreen ermöglicht es dem Viewer, sich auf den Vollbildmodus zu erweitern. Das Attribut allow gewährt die Berechtigungen, die für die gyroskopegesteuerte Anzeige auf Mobilgeräten benötigt werden – essenziell für ein gutes mobiles Nutzungserlebnis.
Einbettungscode von Travvir abrufen
In Ihrem Travvir-Dashboard: Tour auswählen → Teilen klicken → Einbetten auswählen → bereitgestellten iFrame-Code kopieren. Travvir's Einbettungscode enthält die korrekten Berechtigungen und Seitenverhältniseinstellungen, die bereits vorkonfiguriert sind. Sie können die Breiten- und Höhenparameter anpassen, bevor Sie den Code in Ihre Seite einfügen.
Integration in Website-Plattformen
WordPress
Im WordPress Block-Editor (Gutenberg): Fügen Sie einen „Benutzerdefiniertes HTML"-Block an der gewünschten Stelle ein, fügen Sie den iFrame-Einbettungscode ein und veröffentlichen Sie. Verwenden Sie nicht den „HTML"-Modus in einem Absatz-Block – dieser entfernt iFrame-Tags. Sie müssen den dedizierten HTML-Block verwenden.
Für WordPress-Seiten mit Page-Buildern (Elementor, Divi, WPBakery): Verwenden Sie das HTML-Widget/Modul auf die gleiche Weise – fügen Sie ein HTML-Element hinzu und fügen Sie den iFrame direkt ein.
Squarespace
Squarespace verwendet einen Einbettungsblock für externe Inhalte. Fügen Sie einen Einbettungsblock zu Ihrer Seite hinzu, wechseln Sie zur Option „Einbettungscode" (nicht URL-Einbettung, die nur für zugelassene Domains funktioniert) und fügen Sie den iFrame-Code ein. Squarespace bewahrt den iFrame und rendert ihn korrekt.
Wix
Im Wix Editor: Hinzufügen → Einbetten → HTML iFrame → Einbettungscode einfügen. Wix verwendet eine sicher abgegrenzte Einbettungskomponente, die 360°-Viewer korrekt rendert. Passen Sie die Größe der Komponente auf der Arbeitsfläche an Ihre gewünschten Maße an.
Shopify
Für Produkt- oder Shop-Seiten: Bearbeiten Sie die Seite im Code-Editor des Themes (Online-Shop → Themes → Code bearbeiten → relevante Template-Datei finden) und fügen Sie den iFrame-HTML direkt in das Template ein. Alternativ verwenden Sie Shopify's Abschnitt „Benutzerdefiniertes HTML", wenn Ihr Theme dies unterstützt.
Webflow
Im Webflow Designer: Fügen Sie ein Einbettungselement zu Ihrer Arbeitsfläche hinzu und fügen Sie den iFrame-Code in das HTML-Einbettungsfeld ein. Webflow rendert iFrames nativ und der 360°-Viewer funktioniert mit voller Interaktivität, einschließlich Gyroskop auf Mobilgeräten.
Einbettung für beste Leistung optimieren
Lazy Loading
Standardmäßig lädt ein iFrame sofort beim Laden der Seite – auch wenn der Besucher nie dorthin scrollt, wo die Tour angezeigt wird. Das Hinzufügen des Attributs loading="lazy" verzögert das Laden, bis der Viewer kurz davor ist, in den Sichtbereich zu scrollen:
<iframe
src="https://app.travvir.com/tour/IHRE-TOUR-ID"
loading="lazy"
width="100%"
height="500"
frameborder="0"
allowfullscreen
></iframe>Lazy Loading verbessert die Seitenladegeschwindigkeit für Besucher, die den Tour-Bereich nicht erreichen – wichtig für Core Web Vitals und Googles Seitenerfahrungs-Signale.
Responsive Abmessungen
Fest codierte Pixel-Abmessungen (z. B. width="800" height="500") erstellen ein fest großes Einbettbereich, das auf Mobilgeräten überläuft oder beengt aussieht. Verwenden Sie einen CSS-Wrapper für responsive Einbettung:
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
src="https://app.travvir.com/tour/IHRE-TOUR-ID"
style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
allowfullscreen
allow="xr-spatial-tracking; gyroscope; accelerometer"
loading="lazy"
></iframe>
</div> Das padding-bottom: 56.25% erstellt einen 16:9-Container, der responsiv skaliert. Ändern Sie es auf 66.66% für ein 3:2-Verhältnis oder 75% für 4:3.
Wo Einbetten den größten Effekt hat
Seiten mit dem höchsten Einfluss
Startseite: Für Unternehmen, bei denen der physische Raum ein wesentliches Verkaufsargument ist (Hotels, Restaurants, Fitnessstudios, Showrooms). Platzieren Sie die Tour prominent im Hero-Bereich oder direkt darunter.
Standort-/Kontaktseite: Einbettungen, die die Frage „Wie sieht dieser Ort aus?" beantworten, reduzieren die Einstiegshürde für Erstbesucher und verbessern die Anfrage-Rate für Wegbeschreibungen.
Immobilien-Listing-Seiten: Platzieren Sie die Tour direkt nach der Fotogalerie. Käufer, die alle Standbilder durchgesehen haben, wechseln natürlich zur Tour.
Produkt-/Showroom-Seiten (Einzelhandel): Einbetten auf der relevanten Produkt- oder Kollektionsseite, um den Raum zu zeigen, in dem Produkte ausgestellt werden.
Buchungs-/Konversionsseiten: Die Seite, auf der die Kauf- oder Buchungsentscheidung getroffen wird. Eine Tour auf einer Hotel-Buchungsseite oder Fitnessstudio-Anmeldeseite gibt Besuchern, die kurz vor der Konversion stehen, das nötige letzte Vertrauen.
Einbetten in sozialen Medien und anderen Kanälen
Facebook rendert 360°-Fotos nativ als interaktive Beiträge, wenn sie direkt hochgeladen werden (nicht als Links). Laden Sie Ihre equirektanguläre Bilddatei direkt zu Facebook hoch – es erkennt automatisch die 360°-Metadaten und wendet den sphärischen Viewer an. Beim Teilen eines Travvir-Tour-Links auf Facebook zeigt die Vorschau ein statisches Vorschaubild. Für das interaktive Erlebnis empfiehlt es sich, das Quell-360°-Bild direkt hochzuladen.
Google Business-Profil
Fügen Sie Ihre 360°-Tour-URL in das Feld „Virtuelle Tour" in Ihrem Google Business-Profil ein, um die Funktion „Innen ansehen" in Google Maps und lokalen Suchergebnissen zu aktivieren. Dies unterscheidet sich vom Einbetten auf Ihrer Website – es platziert Ihre Tour direkt in der Google-Sucherfahrung.
E-Mail-Marketing
iFrames funktionieren nicht in E-Mail-Clients (die meisten entfernen sie aus Sicherheitsgründen). Fügen Sie stattdessen einen Screenshot oder animiertes GIF der Tour als E-Mail-Bild ein, mit einem „Tour erkunden"-Button, der zur vollständigen Tour-URL führt. Das visuelle Preview in der E-Mail treibt Klicks zur Tour auf Ihrer Website.
Fazit: Einbetten maximiert den ROI Ihrer Tour
Eine 360°-Tour, die nur als teilbarer Link existiert, hat begrenzte Wirkung. Das direkte Einbetten auf Ihre meistbesuchten Seiten und Seiten mit hoher Kaufabsicht stellt die Tour genau im richtigen Moment im Entscheidungsprozess vor Besuchern bereit – wenn sie bereits auf Ihrer Seite sind und einen Kauf erwägen.
Der technische Prozess ist unkompliziert: Kopieren Sie den iFrame-Code aus Travvir, fügen Sie ihn in einen HTML-Block auf Ihrer Website ein, wenden Sie Lazy Loading und responsiven Wrapper-CSS an und platzieren Sie ihn auf den Seiten, wo er den größten Konversionseffekt erzielt.
Weiterlesen
Travvir herunterladen & loslegen
Bitte prüfen Sie unsere Preistabelle um Pläne und Funktionen zu vergleichen.