RoomTour

Virtuellen Rundgang in die eigene Website einbinden (mit Code)

· 2 Min. Lesezeit

Ein virtueller Rundgang verkauft auf Ihrer eigenen Website mehr als als Link, den vielleicht niemand anklickt. Wenn Sie ihn einbetten, können sich Besucher in der Immobilie umsehen, ohne Ihre Seite zu verlassen. Das ist einmal Kopieren und einmal Einfügen, solange Sie den richtigen Code verwenden.

Der Einbettungscode

Jeder Rundgang, der sich einbetten lässt, gibt Ihnen ein <iframe>. Das ist die Version, die wir empfehlen, bereits responsiv (sie füllt die Breite aus und behält ein Format von 16:9):

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe src="https://roomtourapp.com/embed/ihr-rundgang"
    title="Virtueller 360°-Rundgang"
    allow="fullscreen; gyroscope; accelerometer; magnetometer; xr-spatial-tracking"
    allowfullscreen loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>

Was die einzelnen Teile bewirken:

  • aspect-ratio:16/9 am Kasten hält die Form des Rundgangs auf jedem Bildschirm. Ohne das drücken viele Themes das iframe auf 150 Pixel Höhe zusammen.
  • allow="…gyroscope; accelerometer…" lässt Besucher sich umsehen, indem sie das Handy bewegen. Ohne das sperrt der Browser die Sensoren im iframe.
  • allowfullscreen sorgt dafür, dass die Vollbild-Schaltfläche funktioniert.
  • loading="lazy" bedeutet, dass der Rundgang erst lädt, wenn der Besucher zu ihm scrollt; Ihre Seite bleibt also schnell.
  • title wird von Screenreadern vorgelesen. Beschreiben Sie die Immobilie.

Mit RoomTour müssen Sie ihn nicht selbst schreiben: Die Seite des Rundgangs im Web-Dashboard hat den Code fertig zum Kopieren, mit der Adresse Ihres Rundgangs.

Wo Sie ihn einfügen

  • WordPress (Block-Editor): Fügen Sie einen Block Individuelles HTML (Custom HTML) hinzu und fügen Sie den Code ein. Im klassischen Editor wechseln Sie zuerst zum Tab Text.
  • Wix: Add → Embed code → Embed HTML, Code einfügen und den Kasten auf die Breite des Abschnitts ziehen.
  • Squarespace: Fügen Sie einen Code-Block hinzu und fügen Sie den Code ein.
  • Webflow: Ziehen Sie ein Embed-Element auf die Seite und fügen Sie den Code ein.
  • Reines HTML: Fügen Sie ihn dort ein, wo der Rundgang erscheinen soll.

Immobilienportale

Portale lassen Sie keinen Einbettungscode einfügen: Sie haben ein Feld für den Link zum virtuellen Rundgang. Nutzen Sie dort den Kurzlink des Rundgangs, nicht den Einbettungscode. Unsere Schritt-für-Schritt-Anleitung erklärt, wie Sie einen virtuellen Rundgang mit dem Handy erstellen, von der Aufnahme bis zur Veröffentlichung.

Häufige Probleme

  1. Der Rundgang erscheint als schmaler Streifen. Das Theme ignoriert die Höhe des iframes. Nutzen Sie den Container mit aspect-ratio von oben.
  2. Umsehen durch Bewegen des Handys funktioniert nicht. Das Attribut allow fehlt, oder Ihr Website-Baukasten entfernt es. Fügen Sie den vollständigen Code ein.
  3. Die Seite ist langsam. Prüfen Sie, ob loading="lazy" noch da ist und ob nur ein Rundgang pro Seite eingebunden ist.
  4. Zwei Logos. Wenn Ihre Website schon Ihre Marke trägt, nutzen Sie den Einbettungsmodus des Rundgangs, der das Logo des Rundgang-Anbieters ausblendet. Die /embed/-Adressen von RoomTour tun genau das.

Häufige Fragen

Wie binde ich einen virtuellen Rundgang in meine Website ein?

Kopieren Sie den Einbettungscode des Rundgangs (ein iframe) bei Ihrem Rundgang-Anbieter und fügen Sie ihn in einen HTML- oder Einbettungsblock auf der Seite ein. Nutzen Sie einen responsiven Container, damit er auf dem Handy seine Form behält.

Wie sieht der Einbettungscode für einen virtuellen Rundgang aus?

Es ist ein iframe, der auf den Rundgang zeigt, mit Berechtigungen für den Vollbildmodus und die Bewegungssensoren des Handys, damit Besucher sich umsehen können, indem sie das Handy bewegen. Die responsive Version legt ihn in einen Kasten mit festem Seitenverhältnis.

Macht ein eingebetteter Rundgang meine Website langsamer?

Nicht, wenn er verzögert lädt: Mit loading=„lazy“ beginnt der Rundgang erst zu laden, wenn der Besucher zu ihm scrollt. Setzen Sie nicht mehrere Rundgänge auf dieselbe Seite.

Kann ich einen virtuellen Rundgang in ein Immobilienportal einbetten?

Portale nehmen meist keinen Einbettungscode an. Sie haben stattdessen ein Feld für einen Link zum virtuellen Rundgang: Fügen Sie dort den Link des Rundgangs ein.

Weitere Artikel