Virtuellen Rundgang einbinden: so klappt es auf der Website

So können Sie einen virtuellen Rundgang einbinden: Code kopieren, in einen HTML-Block auf der Objektseite einfügen, die Größe anpassen und vor dem Veröffentlichen auf dem Handy testen. Genauso funktioniert es mit einem einzelnen 360-Grad-Foto. Hier finden Sie die Schritte für WordPress, Wix und Squarespace, einen Code zum Kopieren und eine Prüfliste für das Handy.

Was Sie vor dem Start brauchen

• Den Einbettungscode, nicht nur den Link. Der Code ist eine Zeile, die mit <iframe beginnt. Ein Link öffnet den Rundgang auf einer eigenen Seite, der Code zeigt ihn mitten in Ihrer Objektseite.
• Einen öffentlichen Rundgang. Steht er auf privat, sehen Besucher im Rahmen nur einen Hinweis statt der Räume.
• Das Recht, die Seite zu bearbeiten. Bei WordPress braucht Ihr Konto die Erlaubnis, Code einzufügen (WordPress-Dokumentation). Betreut eine Agentur Ihre Homepage, schicken Sie ihr den Code per E-Mail.
• Für ein einzelnes 360-Grad-Foto: Machen Sie daraus einen Rundgang mit nur einem Raum. Das Einbinden ist danach dasselbe. Ob ein Foto wirklich als 360 aufgenommen wurde, sehen Sie vorher im kostenlosen 360-Grad-Viewer im Browser.

Wenn Sie noch keinen Rundgang haben, beginnen Sie mit dem Leitfaden zum virtuellen Rundgang für Immobilien.

Schritt 1: den Code kopieren

Die meisten Rundgang-Programme legen den Code unter Teilen, Einbetten oder Veröffentlichen ab. Suchen Sie nach dem Wort "Code" oder "embed".

In Vistura öffnen Sie den Rundgang, klicken auf Teilen und finden im Fenster "Tour teilen" den Abschnitt "Auf einer Website einbetten" mit der Schaltfläche "Code kopieren", in jedem Tarif, auch bei Kostenlos. Der Code füllt die Breite der Seite und trägt den Namen des Rundgangs als Titel. Er zeigt auf den Rundgang selbst: Ändern Sie später einen Raum, sehen Besucher die neue Version, ohne dass jemand den Code austauschen muss.

Schritt 2: den Code in Ihren Baukasten einfügen

WordPress (eigene Installation)

1. Öffnen Sie die Objektseite im Editor und tippen Sie in einem neuen Absatz /html. Wählen Sie den HTML-Block, im Original "Custom HTML".
2. Fügen Sie den Code in den Block ein.
3. Speichern Sie die Seite.

Der Haken: Fehlt Ihrem Konto die Berechtigung unfiltered_html, zum Beispiel weil Sie als Mitarbeiter ("Contributor") angemeldet sind, entfernt WordPress beim Speichern Tags wie <iframe> (WordPress-Dokumentation). Der Block sieht dann leer aus. Bitten Sie einen Administrator, den Code einzufügen.

WordPress.com

Auf WordPress.com dürfen nur Websites mit einem Tarif, der Plugins erlaubt, und mit aktivierten Hosting-Funktionen ein iframe verwenden. Vorher gelten dieselben Grenzen wie für kostenlose Websites (WordPress.com Support). Prüfen Sie Ihren Tarif, bevor Sie nach einem Fehler im Code suchen.

Wix

1. Klicken Sie im Editor auf Hinzufügen > Code einbetten > Beliebte Einbettungen > HTML einbetten (Wix Hilfe-Center).
2. Wählen Sie die Option für Code, fügen Sie den Code ein und übernehmen Sie ihn.
3. Ziehen Sie das Element auf die gewünschte Größe.

Der Haken: "Dein Code muss HTTPS und nicht HTTP enthalten", schreibt Wix. Außerdem ist das HTML-Element von Wix selbst ein iframe und passt sich nicht von allein an. Setzen Sie Breite und Höhe im Code auf 100 % und bestimmen Sie die Größe über das Element im Editor (Wix, englische Fassung). Prüfen Sie auch die mobile Ansicht im Wix-Editor.

Squarespace

1. Klicken Sie auf der Seite auf Block hinzufügen und wählen Sie Code.
2. Fügen Sie den Code ein. Lassen Sie die Option zum Anzeigen des Quelltexts aus, sonst erscheint der Code als Text.

Der Haken: Für JavaScript oder einen iframe in einem Code-Block "musst du für deine Website das Core-, Plus- oder Advanced-Abonnement haben" (Squarespace Hilfe). Solange Sie angemeldet sind, zeigt Squarespace eingefügten Code manchmal nicht an; die Hilfe empfiehlt dafür die Vorschau im "Safe Mode". Und Squarespace warnt, dass eigener Code das Aussehen der Seite stören kann, "especially on mobile devices" (Squarespace Help, englisch).

Eine Website aus Ihrer Maklersoftware

Viele Maklerbüros pflegen ihre Homepage über die Maklersoftware. Suchen Sie auf der Objektseite nach einem Block oder Feld mit dem Namen HTML, Code, Einbetten oder Widget. Finden Sie keines, fragen Sie den Anbieter, wo ein iframe hingehört. Das gilt auch für andere Baukästen wie Jimdo oder IONOS.

Ein Hinweis zum Datenschutz: Ein iframe lädt Inhalte von einem anderen Anbieter in Ihre Seite. Fragen Sie, wer Ihre Datenschutzerklärung betreut, ob der Rundgang dort erwähnt werden muss.

Schritt 3: den Rahmen an jeden Bildschirm anpassen

Ein Einbettungscode sieht kompliziert aus, hat aber nur wenige Teile:

Fügen Sie loading="lazy" hinzu, wenn der Rundgang unter den Fotos steht. Der Browser lädt ihn dann erst, wenn der Besucher in seine Nähe scrollt (MDN). Das spart Daten, beschleunigt den Rest der Seite und braucht weniger Speicher, und alle großen Browser unterstützen es (web.dev).

Eine Form, die auf jedem Bildschirm hält. Eine feste Höhe von 500 Pixeln ist auf dem Laptop flach und auf dem Handy fast der ganze Bildschirm. Besser ist ein festes Seitenverhältnis:

<iframe src="https://IHRE-RUNDGANG-ADRESSE" title="3-Zimmer-Wohnung in Leipzig, 360-Grad-Rundgang"
  width="100%" loading="lazy" allow="fullscreen"
  style="border:0; aspect-ratio:4/3; max-height:80vh"></iframe>

Übernehmen Sie die Adresse aus dem src Ihres eigenen Codes. Hat Ihr Code eine feste Höhe wie height="500px", löschen Sie diese: aspect-ratio hält das Verhältnis von Breite zu Höhe nur, wenn eine der beiden Seiten automatisch ist. Die Eigenschaft funktioniert seit September 2021 in allen gängigen Browsern (MDN). Prüfen Sie das Ergebnis trotzdem auf dem Handy.

Unsere Empfehlung: 4/3 oder höher passt auf dem Handy besser als ein breiter 16/9-Streifen. Und max-height:80vh hält den Rahmen kürzer als den Bildschirm, damit immer etwas Seite bleibt, an der man weiterscrollen kann.

Wo der Rundgang auf die Objektseite gehört

1. Weit oben, nach der Bildergalerie und vor der langen Beschreibung. Wer die Fotos mag, will als Nächstes hineingehen.
2. Text, Preis und Eckdaten bleiben auf der Seite selbst. Der Rundgang im Rahmen liegt unter einer anderen Adresse. Wohnfläche, Zimmer, Energieausweis und Beschreibung gehören als normaler Text auf Ihre Objektseite.
3. Unter den Rahmen ein einfacher Link, etwa "360-Grad-Rundgang im Vollbild öffnen", zur eigenen Adresse des Rundgangs. Auf dem Handy sehen Interessenten ihn so über den ganzen Bildschirm.
4. Ein Rundgang pro Seite. Mehrere schwere Rahmen auf einer Seite laden langsam.

Schritt 4: vor dem Veröffentlichen auf dem Handy testen

Gehen Sie diese Liste auf Ihrem eigenen Handy durch, nicht nur am Bildschirm im Büro:

• Mit einem Daumen am Rundgang vorbeiscrollen. Dreht jede Wischbewegung den Raum, statt die Seite zu bewegen, machen Sie den Rahmen niedriger.
• Im Rahmen ziehen. Der Raum soll sich drehen.
• Den Link unter dem Rahmen antippen. Der Rundgang soll sich auf seiner eigenen Seite öffnen.
• Abgemeldet ansehen, oder in einem privaten Fenster. Squarespace blendet Code für angemeldete Bearbeiter manchmal aus (Squarespace Help).
• Mit mobilen Daten laden, nicht nur im WLAN des Büros.
• Ist der Rahmen leer, prüfen Sie der Reihe nach: HTTPS (Wix), Tarif (WordPress.com, Squarespace), Rechte des Kontos (WordPress) und ob der Rundgang öffentlich ist.

Website, Portale und E-Mail sind drei verschiedene Aufgaben

• Ihre Website: der Einbettungscode, wie oben.
• ImmoScout24, Immowelt und andere Portale: Jedes Portal hat eigene Regeln für Rundgänge. Fügen Sie den Link im Feld für den virtuellen Rundgang der Anzeige ein, wo das Portal eines hat, und lesen Sie vorher die Anleitung des Portals.
• E-Mail und Nachrichten: ein Bild des Rundgangs mit Link, nicht der Code. Für Schild und Schaufenster gibt es den QR-Code für Immobilien.

Für die Portale erstellt Vistura unter "Link für Portale" einen eigenen Link pro Portal, auf Wunsch mit der Option "Ohne meine Kontakte und mein Logo". So erscheinen die Besuche jedes Portals getrennt, unter Statistiken > Nach Portal (diese Ansicht gehört zu Pro).

Sehen, ob Besucher den Rundgang auf Ihrer Website nutzen

Ein eingebetteter Rundgang soll Anfragen bringen, nicht nur gut aussehen. Bei Vistura behält er im Rahmen die Maklerkarte, WhatsApp und das Formular, und jede Anfrage landet in jedem Tarif vollständig bei Ihnen. Besuche von Ihrer Homepage werden als eigene Quelle gezählt, "Ihre Website (eingebettet)", getrennt von Portalen, QR-Code und WhatsApp. Die Aufschlüsselung nach Quellen, Räumen, Zeit und Geräten sehen Sie mit Pro, gespeichert ab dem ersten Tag. Mit Pro trägt der Rundgang Ihr Logo und Ihre Farben ohne Hinweis "Erstellt mit Vistura", und nach dem Einschalten der automatischen Drehung dreht sich der Raum von selbst weiter, wenn niemand ihn berührt, gut für eine Seite, die auf einem Bildschirm im Schaufenster offen bleibt. Der Gründerpreis für Pro liegt bei 24 US-Dollar im Monat, oder 19 US-Dollar im Monat bei jährlicher Zahlung, für Abonnements, die bis zum 31. Dezember 2026 beginnen. Ausprobieren können Sie es mit Kostenlos, mit 3 Rundgängen gleichzeitig online und der Marke Vistura. Alle Tarife finden Sie unter Preise.

Wenn der Rundgang nicht erscheint

Fazit

Einen virtuellen Rundgang einbinden dauert ein paar Minuten: Code kopieren, in den richtigen Block einfügen, die Form mit aspect-ratio festlegen und auf dem Handy testen. Die meisten Probleme kommen vom Baukasten, nicht vom Code: ein Tarif ohne iframes, ein Konto ohne Rechte oder eine Vorschau im angemeldeten Zustand. Wer diese drei Punkte prüft, hat den Rundgang beim ersten Versuch auf der Objektseite.

Häufige Fragen

Kann ich einen Rundgang auf einer kostenlosen Website einbinden?

Das hängt vom Baukasten ab. WordPress.com zeigt iframes nur mit einem Tarif, der Plugins erlaubt, und aktivierten Hosting-Funktionen, Squarespace nur mit Core, Plus oder Advanced. Bei einer selbst installierten WordPress-Seite fügt ein Konto mit dem Recht auf Code ihn ein; die Wix-Hilfe zum HTML-Element nennt keinen Tarif, nur HTTPS als Bedingung.

Wird die Objektseite dadurch langsamer?

Kaum, wenn Sie loading="lazy" in den Code schreiben. Dann lädt der Browser den Rundgang erst, wenn der Besucher in seine Nähe scrollt, und die Fotos und der Text oben erscheinen so schnell wie vorher.

Kann ich den Code bei ImmoScout24 einfügen?

Jedes Portal hat eigene Regeln für virtuelle Rundgänge. Wo das Portal ein Feld für den virtuellen Rundgang hat, gehört der Link hinein. Prüfen Sie die Anleitung von ImmoScout24 oder Immowelt, bevor Sie das Inserat freischalten.

Brauche ich einen neuen Code, wenn ich den Rundgang ändere?

Nein, solange der Code auf den Rundgang zeigt und nicht auf eine Kopie. Bei Vistura erscheinen Ihre Änderungen sofort auf der Website, mit demselben Code.