Virtuellen Rundgang auf der Website einbinden: vollständige Anleitung 2026

Wenn du in Tours bereits eine Tour erstellt hast und sie auf deiner Website anzeigen möchtest, musst du keinen Code von Grund auf schreiben. Nach der Veröffentlichung öffnest du 'Meine Touren', wählst die gewünschte Tour, klickst auf das Drei-Punkte-Menü und wählst die Einbindungsoption. Von dort wählst du die passende Variante für deine Website — HTML, React, Angular, WordPress oder Wix — und kopierst den generierten Code.

Im selben Fenster kannst du die Einbindung aktivieren oder deaktivieren und festlegen, auf welchen Domains die Tour angezeigt werden darf. Du hast also die volle Kontrolle darüber, wo deine Tour erscheint — ohne den Editor erneut öffnen oder den Tourinhalt ändern zu müssen.

Für den Besucher ist das Ergebnis denkbar einfach: Der 360-Grad-Rundgang öffnet sich direkt auf deiner Seite. Du leitest ihn nicht auf eine externe Plattform weiter, nimmst ihn nicht aus dem Präsentationskontext heraus und zwingst ihn nicht, die Galerie separat zu suchen. Er kann Zimmer, Tische, Wohnungen, Showrooms oder Veranstaltungsräume genau dort erkunden, wo sich Beschreibung, Angebot, Kontaktformular oder Buchungsschaltfläche befinden.

Auf einen Blick

• Ein virtueller Rundgang, der auf der Website eingebunden ist, erscheint direkt auf deiner Seite — nicht als separater Link zu einer anderen Plattform.
• Den Code holst du in Tours unter 'Meine Touren', nachdem die Tour veröffentlicht wurde.
• Der Ablauf: Meine Touren → Drei-Punkte-Menü → Einbindung → Plattform wählen → Code kopieren.
• Im Einbindungsfenster kannst du die Anzeige der Tour auf externen Websites aktivieren oder deaktivieren.
• Du kannst festlegen, auf welchen Domains die Tour erscheinen darf, damit der Code nicht beliebig kopiert werden kann.
• Es stehen Codevarianten für HTML, React, Angular, WordPress und Wix zur Verfügung.
• Wenn du die Tour im Editor änderst, aktualisiert sich die eingebundene Version auf deiner Website automatisch.
• Die eingebundene Tour kann 360°-Szenen, interaktive Hotspots, Buchungen und Nutzungsstatistiken enthalten.

Was bedeutet es, einen virtuellen Rundgang einzubinden?

Einen virtuellen Rundgang auf der Website einzubinden bedeutet, dass Besucher einen Raum direkt auf deiner Seite in 360° erkunden können. Sie sehen nicht nur ein großes Foto und werden auch nicht in eine externe Galerie weitergeleitet. Sie können das Bild drehen, von einem Raum in den nächsten wechseln, auf interaktive Hotspots klicken und Details entdecken, die gewöhnliche Fotos nicht so klar zeigen.

Für ein Hotel kann das eine überzeugendere Präsentation der Zimmer bedeuten. Für ein Restaurant können Besucher Atmosphäre und Gastraum sehen, bevor sie reservieren. Im Immobilienbereich kann es unnötige Rückfragen reduzieren, weil Interessenten Grundriss und Raumgröße besser einschätzen können, bevor sie einen Besichtigungstermin anfragen.

Technisch gesehen erfolgt die Einbindung über einen von der Plattform generierten Code. Du kopierst ihn aus Tours und fügst ihn in deine Website ein. Auf WordPress oder Wix fügst du ihn in ein HTML-Element ein. Auf einer individuell entwickelten Website fügst du ihn direkt in den Seitencode ein. Für React- oder Angular-Projekte verwendest du die jeweilige Variante für diese Technologie.

Der größte Vorteil ist, dass der Besucher im selben Kontext bleibt. Die Tour kann neben der Zimmerbeschreibung, dem Kontaktformular, den Preisen oder der Buchungsschaltfläche platziert werden. Das macht die Erfahrung flüssiger und benutzerfreundlicher.

Wie erhältst du den Integrationscode in Tours?

In Tours wird der Integrationscode automatisch generiert. Du musst ihn nicht manuell erstellen und musst keine versteckten Einstellungen in der App suchen. Sobald die Tour veröffentlicht ist, findest du sie in deiner Tourliste und öffnest die Einbindung direkt von dort.

• Melde dich in deinem Tours-Konto an.
• Öffne die Seite 'Meine Touren'.
• Finde die veröffentlichte Tour, die du auf deiner Website anzeigen möchtest.
• Klicke auf das Drei-Punkte-Menü neben der Tour.
• Wähle die Einbindungsoption.
• Prüfe, ob die Einbindung aktiviert ist.
• Füge erlaubte Domains hinzu oder bearbeite sie.
• Wähle die Codevariante für HTML, React, Angular, WordPress oder Wix.
• Kopiere den angezeigten Code und füge ihn auf der gewünschten Seite deiner Website ein.

Jede Tour hat eigene Einbindungseinstellungen. Das ist besonders wichtig, wenn du mehrere Standorte, mehrere Objekte oder mehrere Präsentationsseiten verwaltest. Du kannst eine Tour für die Rezeption, eine für die Zimmer, eine für das Restaurant und eine für einen Veranstaltungsraum haben — jede mit eigenem Code und eigenen erlaubten Domains.

Was kannst du im Einbindungsfenster einstellen?

Das Einbindungsfenster ist nicht nur ein Ort, von dem du den Code kopierst. Hier steuerst du auch, wie die Tour auf externen Websites verwendet wird. Du kannst die Einbindung deaktivieren, nur bestimmte Domains zulassen und den passenden Code für deine Plattform auswählen.

• Aktivieren oder deaktivieren: Du kannst die Anzeige der Tour auf externen Websites stoppen, ohne die Tour aus deinem Konto zu löschen.
• Erlaubte Domains: Du legst fest, auf welchen Websites die Tour erscheinen darf — zum Beispiel die Domain des Hotels, Restaurants oder der Immobilienagentur.
• Plattformauswahl: Du kannst HTML, React, Angular, WordPress oder Wix wählen.
• Fertiger Code zum Kopieren: Nachdem du die Plattform gewählt hast, erscheint der passende Code unterhalb der Auswahl.
• Separate Einstellungen pro Tour: Jede veröffentlichte Tour kann eigene Einbindungsregeln haben.

Die Liste der erlaubten Domains ist nützlich für die Zugriffskontrolle. Wenn du zum Beispiel eine Tour für die offizielle Website eines Hotels erstellt hast, kannst du die Anzeige auf genau diese Domain beschränken. Wenn jemand den Code kopiert und versucht, ihn auf einer anderen Website einzubinden, kann die Einbindung blockiert werden.

Welche Variante wählst du: HTML, React, Angular, WordPress oder Wix?

Nicht alle Websites sind gleich aufgebaut, deshalb bietet Tours mehrere Codevarianten an. Die Idee ist, dass du die Einbindung nicht manuell anpassen musst, sondern einfach die passende Variante wählst und den generierten Code kopierst.

Wenn du nicht weißt, welche Variante du wählen sollst, gilt eine einfache Regel: WordPress für WordPress, Wix für Wix, React für React oder Next.js, Angular für Angular und HTML für jede andere Website, die benutzerdefinierten Code akzeptiert.

Virtuellen Rundgang auf WordPress einbinden

Auf WordPress ist die Einbindung recht unkompliziert. Du wählst die WordPress-Variante in Tours, kopierst den Code und fügst ihn auf der Seite ein, auf der die Tour erscheinen soll. Du benötigst kein spezielles Plugin für virtuelle Rundgänge, solange dein Theme oder Editor das Hinzufügen von benutzerdefiniertem HTML erlaubt.

• In Gutenberg fügst du einen benutzerdefinierten HTML-Block hinzu und fügst den Code ein.
• In Elementor verwendest du das HTML-Element und platzierst den Code im gewünschten Bereich.
• In Divi verwendest du das Code-Modul.
• In WPBakery kannst du ein Element für reines HTML oder benutzerdefinierten Code verwenden.
• Im klassischen Editor wechselst du in die Text-/HTML-Ansicht und fügst den Code an der gewünschten Stelle ein.

Es lohnt sich, auf den Platz zu achten, in dem du die Tour platzierst. Wenn du sie in einen zu kleinen Bereich zwängst, sieht die Erfahrung nicht gut aus. Auf dem Desktop ist eine Höhe von etwa 600 px in der Regel ein guter Ausgangspunkt, und auf Mobilgeräten solltest du die Seite vor der Veröffentlichung prüfen.

Virtuellen Rundgang auf Wix einbinden

Auf Wix wählst du die Wix-Variante in Tours und kopierst den generierten Code. Dann öffnest du den Wix-Editor und fügst ein HTML-Einbindungselement in den Bereich der Seite ein, auf dem die Tour erscheinen soll.

• Öffne die gewünschte Seite im Wix-Editor.
• Füge ein neues Element über das +-Menü hinzu.
• Wähle den Bereich für Einbindung oder benutzerdefinierten Code.
• Wähle das HTML-Element aus.
• Füge den von Tours für Wix generierten Code ein.
• Passe Breite und Höhe für Desktop und Mobilgeräte an.
• Veröffentliche die Seite und teste die Tour auf der Live-Website.

Wenn die Tour auf Wix abgeschnitten erscheint, liegt das meistens an der Größe des HTML-Elements und nicht am Code aus Tours. Vergrößere den Bereich, in dem du die Tour platziert hast, prüfe die mobile Ansicht und stelle sicher, dass du die aktuelle Version der Seite veröffentlicht hast.

Einbindung auf React, Angular, Webflow, Squarespace oder HTML

Wenn deine Website weder auf WordPress noch auf Wix basiert, wählst du die Variante, die zu deinem Projekt passt. Für eine von Grund auf entwickelte Website ist die HTML-Variante in der Regel ausreichend. Für moderne Anwendungen kannst du den Code für React oder Angular verwenden.

• React / Next.js: Verwende den React-Code und füge ihn in die Komponente ein, in der die Tour erscheinen soll.
• Angular: Verwende den Angular-Code im Template der passenden Komponente.
• Webflow: Füge ein Einbindungselement hinzu und füge den HTML-Code aus Tours ein.
• Squarespace: Füge einen Code-Block hinzu und füge die HTML-Variante ein.
• Shopify: Füge den Code in einen benutzerdefinierten HTML-Bereich oder ein Seiten-Template ein, je nach verwendetem Theme.
• Reines HTML: Füge den Code direkt an der Stelle ein, an der die Tour geladen werden soll.

Wenn deine Plattform keinen benutzerdefinierten Code erlaubt, kannst du den öffentlichen Link der Tour oder den von Tours generierten QR-Code verwenden. Wenn es jedoch möglich ist, ist die direkte Einbindung für kommerzielle Seiten die bessere Wahl, weil der Besucher neben dem Angebot, dem Formular oder der Buchungsschaltfläche bleibt.

Wie erstellst du die Tour, bevor du sie einbindest?

Bevor du zum Integrationscode gelangst, musst du eine veröffentlichte Tour haben. In Tours erfolgt die Tourerstellung visuell: Du lädst 360°-Szenen hoch, organisierst sie und fügst die benötigten interaktiven Hotspots hinzu.

• Erstelle ein Konto auf getours.app und öffne die Tours-App.
• Öffne 'Meine Touren' und klicke auf die Schaltfläche für eine neue Tour.
• Gib den Tournamen und die Kategorie ein; optional kannst du Standort, Preis oder Tags hinzufügen.
• Lade die erste 360°-Szene hoch und gib ihr einen klaren Namen.
• Im Editor fügst du weitere Szenen, Navigations-Hotspots, Informationsfenster, Bilder, Videos, externe Links und Szenengruppen hinzu.
• Wenn du bestimmte Hotspots mit Buchungen verknüpfen möchtest, kannst du sie mit internen Tags organisieren.
• Veröffentliche die Tour und wähle die passende Sichtbarkeit.
• Nach der Veröffentlichung gehst du zurück zu 'Meine Touren', öffnest das Drei-Punkte-Menü und wählst die Einbindungsoption.

Kurz gesagt: Der Editor ist der Ort, an dem du das 360°-Erlebnis aufbaust, und das Einbindungsfenster ist der Ort, von dem aus du die Tour auf deiner Website platzierst und steuerst, wo sie angezeigt werden darf.

Können Buchungen in der eingebundenen Tour funktionieren?

Ja. Wenn du Buchungen in Tours konfiguriert hast, funktionieren sie auch in der auf der Website eingebundenen Tour. Besucher können den Raum erkunden und eine Buchung oder Anfrage absenden, ohne auf eine andere Seite weitergeleitet zu werden.

• Buchung auf Tourebene: Du kannst eine Buchungsschaltfläche anzeigen, die während der gesamten Tour sichtbar ist.
• Buchung auf Szenenebene: Du kannst die Buchung nur in bestimmten Räumen oder Bereichen aktivieren.
• Buchung auf Gruppenebene: Du kannst mehrere Szenen gruppieren — nützlich für Zimmerkategorien, Wohnungen oder verschiedene Bereiche.
• Buchung über einen Hotspot: Ein interaktiver Punkt in der Tour kann ein Buchungsfenster für einen Tisch, ein Zimmer, einen Raum oder eine Besichtigung öffnen.
• Buchungen über Tags: Mehrere Hotspots können denselben Kalender verwenden, wenn sie über dasselbe Tag verknüpft sind.

Buchungen werden separat im Booking Manager konfiguriert. Dort legst du Verfügbarkeit, Kapazitätsregeln, manuelle oder automatische Genehmigung und die Personen fest, die Anfragen verwalten. Danach verbindest du den Booking Manager mit der Tour, bestimmten Szenen, Szenengruppen oder Hotspots.

Wenn du bereits ein PMS, einen Channel Manager oder andere Buchungsplattformen verwendest, kann Tours als zusätzlicher visueller Kanal dienen. In Situationen, in denen die Verfügbarkeit an mehreren Stellen verwaltet wird, hilft die manuelle Genehmigung dabei, Überschneidungen zu vermeiden.

Was sieht der Besucher in der eingebundenen Tour?

Der Besucher sieht genau das Erlebnis, das du im Tours-Editor aufgebaut hast. Es ist nicht nur ein Panoramabild auf der Seite, sondern eine interaktive Tour, die Navigation, Informationen, Links, Buchungen und Nutzungsstatistiken im Hintergrund umfassen kann.

• 360°-Szenen, die der Besucher in alle Richtungen drehen kann.
• Navigation zwischen Räumen oder Bereichen über interaktive Hotspots.
• Informationspunkte mit Text, Bildern oder Videos.
• Externe Links zu Menüs, Katalogen, Produktseiten oder Formularen.
• Buchungsschaltfläche oder Hotspots, die ein Buchungsfenster öffnen.
• Mehrsprachige Inhalte, wenn du sie in der Tour konfiguriert hast.
• Nutzungsstatistiken zu Besuchen, aufgerufenen Szenen und Interaktionen.

Warum wird die Tour auf der Website nicht angezeigt?

Wenn du den Code auf deiner Website eingefügt hast, die Tour aber nicht erscheint, bedeutet das nicht automatisch, dass die Einbindung defekt ist. Meistens fehlt eine Einstellung oder der Code wurde an einer Stelle eingefügt, die ihn nicht korrekt anzeigt.

• Prüfe, ob die Tour veröffentlicht ist. Eine unveröffentlichte Tour wird auf der Website nicht korrekt angezeigt.
• Prüfe, ob die Einbindung aktiv ist: 'Meine Touren' → Drei-Punkte-Menü → Einbindung.
• Prüfe die erlaubten Domains. Die Domain deiner Website muss in der zugelassenen Liste stehen.
• Stelle sicher, dass du die richtige Codevariante gewählt hast: WordPress für WordPress, Wix für Wix, React für React, Angular für Angular und HTML für alle anderen Fälle.
• Wenn du Wix oder einen visuellen Website-Builder verwendest, vergrößere die Höhe des Elements, in das du die Tour eingefügt hast.
• Prüfe, ob deine Plattform HTML-Code oder externen Code erlaubt. Einige kostenlose Pläne können Einschränkungen haben.
• Veröffentliche die Seite, nachdem du den Code eingefügt hast. Manchmal erscheint die Tour in der Vorschau, aber nicht auf der Live-Website, wenn die Änderungen nicht veröffentlicht wurden.

Der schnellste Test ist, das Einbindungsfenster erneut zu öffnen und zu prüfen, ob die Einbindung aktiv ist, die Domain zugelassen ist und der gewählte Code zu deiner Plattform passt. In vielen Fällen lässt sich das Problem lösen, ohne etwas an der Tour selbst zu ändern.

Vergleich mit anderen Plattformen für virtuelle Rundgänge

Viele Plattformen für virtuelle Rundgänge bieten eine Form der Website-Einbindung an. Der Unterschied zeigt sich, wenn du mehr als nur die einfache Anzeige der Tour möchtest: Domain-Kontrolle, Buchungen, Nutzungsstatistiken, mehrsprachige Inhalte oder Codevarianten für verschiedene Technologien.

Bei Tours geht es nicht nur darum, ein Panorama auf die Website zu setzen, sondern die Tour zu einem nützlichen Teil deiner Seite zu machen: Präsentation, Interaktion, Buchung, Angebotsanfrage oder Auswertung des Besucherinteresses.

Wenn du die Einbindung ausprobieren möchtest, kannst du mit einer einfachen Tour beginnen. Du erstellst ein Konto, veröffentlichst deine erste Tour, öffnest 'Meine Touren', rufst die Einbindung auf und kopierst den Code für deine Plattform. In wenigen Minuten kannst du einen 360-Grad-Rundgang direkt auf deiner Website anzeigen — mit interaktiven Hotspots, Buchungen und Nutzungsstatistiken, die für den echten Einsatz bereit sind.