Zum Inhalt springen
← Zurück zum Ratgeber

Rundgang, Projekt oder Portfolio auf Ihrer Website einbetten

5 Min. Lesezeit

Der Einbettungscode ist in jedem Tarif enthalten, auch im kostenlosen. Sie fügen ihn einmal ein; danach sehen Besucher immer den aktuellen Stand Ihres 360°-Rundgangs. Dieser Ratgeber zeigt, wo Sie den Code finden, welche der beiden Versionen Sie wählen und wo er in gängigen Website-Baukästen hingehört.

Code abrufen

  1. Öffnen Sie den Rundgang im Studio und klicken Sie auf den Tab Teilen.
  2. Bestätigen Sie unter Auf Ihrer Website einbetten beim ersten Mal die Rechteerklärung und klicken Sie auf Einbettungscode abrufen. Es ist dieselbe Erklärung wie beim Veröffentlichen, denn ein eingebetteter Rundgang ist faktisch öffentlich, auch wenn er nur über Link erreichbar ist.
  3. Wählen Sie die Optionen:
    • Design: Wie beim Besucher (automatisch), Hell oder Dunkel. Passen Sie es an die Seite an, in die Sie den Code einfügen.
    • Credits anzeigen: zeigt die Personen, die Sie im Rundgang genannt haben, im Infobereich des Rundgangs.
    • Zwei-Finger-Navigation auf Smartphones: Auf dem Smartphone scrollt ein Finger Ihre Seite, zwei Finger bewegen den Rundgang. Aktivieren Sie die Option, wenn der Rundgang mitten auf einer langen Seite steht.
    • Akzent (ab Pro): Ihre Hervorhebungsfarbe für Schaltflächen.
  4. Wählen Sie die Code-Version und klicken Sie auf Code kopieren.

Empfohlen oder feste Höhe?

Empfohlen ist ein iframe plus ein kleines Skript von prewalk.co. Das Skript passt die Größe der Einbettung an ihren Inhalt an, und wenn ein Besucher auf einen Rundgang klickt, öffnet er sich im Vollbild auf Ihrer Seite, sodass niemand Ihre Website verlässt. Verwenden Sie diese Version überall, wo Sie HTML mit einem <script>-Tag einfügen können.

Feste Höhe ist nur das iframe, ohne Skript. Verwenden Sie diese Version in Baukästen, die Skripte entfernen, oder wenn die Regeln der Seite keine Skripte erlauben. Sie legen die Höhe (px) fest. Das Vollbild nutzt den Vollbildmodus des Browsers; in Safari auf dem iPhone, das ihn für eingebettete Inhalte nicht erlaubt, öffnet sich der Rundgang stattdessen in einem neuen Tab.

Probieren Sie zuerst „Empfohlen“. Wenn sich die Einbettung nie in der Größe anpasst oder nie im Vollbild öffnet, hat der Baukasten das Skript blockiert: Wechseln Sie zu „Feste Höhe“.

Plattform für Plattform

WordPress (Block-Editor). Bearbeiten Sie die Seite, klicken Sie auf + und fügen Sie einen Block Individuelles HTML hinzu. Fügen Sie den Code ein. Sehen Sie sich die Vorschau des Blocks an und aktualisieren Sie dann die Seite. Wechseln Sie im klassischen Editor vor dem Einfügen zum Tab Text oder Code.

Wix. Klicken Sie im Editor auf Elemente hinzufügen, dann auf Code einbetten und wählen Sie HTML einbetten. Fügen Sie den Code in das HTML-Feld ein. Wix führt Einbettungen in einem eigenen Frame aus. Wenn sich die empfohlene Version also nicht in der Größe anpasst, verwenden Sie Feste Höhe und stellen Sie die Höhe des Elements passend ein.

Squarespace. Bearbeiten Sie die Seite, fügen Sie einen Block hinzu und wählen Sie Code. Stellen Sie den Typ auf HTML und fügen Sie den Code ein. Squarespace erlaubt Skripte auf kostenpflichtigen Websites, daher funktioniert „Empfohlen“; verwenden Sie auf einer Test-Website „Feste Höhe“, wenn der Code als Text erscheint.

Webflow. Fügen Sie ein Embed-Element (unter Components) hinzu und fügen Sie den Code ein. Webflow zeigt ihn auf der veröffentlichten Website an, nicht im Designer.

Google Sites und andere Baukästen, die Skripte blockieren. Wählen Sie Feste Höhe. Fügen Sie ein Element „Code einbetten“ hinzu und fügen Sie das iframe ein.

Einfaches HTML. Fügen Sie den Code im Body der Seite dort ein, wo der Rundgang erscheinen soll.

Ein Projekt oder Ihr ganzes Portfolio einbetten

  • Ein Projekt: Öffnen Sie das Projekt im Studio; sein Bereich „Teilen“ hat dieselben Optionen unter Auf Ihrer Website einbetten. Die Einbettung zeigt Titelbild, Rundgänge, Galerie und Grundrisse ohne das Prewalk-Menü.
  • Ihr Portfolio: Klicken Sie auf Ihrer Profilseite auf Teilen und dann auf Portfolio einbetten. Wählen Sie Layout (Raster oder Karussell), Elemente (6 bis 48), Anzeigen (Rundgänge und Projekte, nur Rundgänge, nur Projekte), einen Filter nach Kategorie, Tag oder Projekt, das Design und ob der Profilkopf erscheinen soll. Alles, was Sie später veröffentlichen, erscheint automatisch in der Einbettung.

Die Zeile „Bereitgestellt von Prewalk“

Im kostenlosen Tarif enthält der Code einen kleinen Link „Bereitgestellt von Prewalk“ unter der Einbettung, und der Player zeigt ein Prewalk-Abzeichen. Ab dem Pro-Tarif entfällt das Abzeichen, und die Einbettung trägt Ihr Logo und Ihre Akzentfarbe aus Einstellungen → Branding.

Festlegen, wo Einbettungen geöffnet werden

Unter Einstellungen → Branding:

  • Einbettung erlauben ist standardmäßig aktiviert. Wenn Sie es deaktivieren, zeigt jede Einbettung Ihrer Arbeiten eine schlichte Karte „nicht verfügbar“; Rundgang-Links funktionieren weiter.
  • Erlaubte Websites (ab Pro): Listen Sie die Websites auf, auf denen Ihre Einbettungen geöffnet werden dürfen, eine pro Zeile, bis zu 20. Eine leere Liste bedeutet: überall. firma.com und www.firma.com sind verschiedene Adressen, und *.firma.com deckt Subdomains ab.

Aufrufe und das Häkchen bei „Erste Schritte“

Das Laden einer Einbettung zählt nicht als Aufruf. Erst das erste Ziehen, Tippen oder Drücken einer Schaltfläche darin zählt. In der Liste „Erste Schritte“ im Studio wird „Rundgang auf Ihrer Website einbetten“ abgehakt, sobald der Rundgang in einer Einbettung auf einer anderen Website angesehen wurde. Der Browser des Besuchers muss mit dem Aufruf die Seitenadresse (den Referrer) senden, und Aufrufe auf prewalk.co selbst zählen nicht.

Häufige Fehler

  • Einfügen in einen normalen Textblock. Der Code erscheint als Text. Verwenden Sie den HTML-, Code- oder Einbettungsblock.
  • Die Rück-Hotspots vor dem Einbetten vergessen. Besucher bleiben auf Ihrer Website hängen, nicht auf Prewalk.
  • Das Design „Dunkel“ auf einer weißen Seite lassen oder umgekehrt.
  • Einen nur über Link erreichbaren Rundgang einbetten und erwarten, dass er privat bleibt. Jeder auf dieser Seite kann ihn ansehen.
  • Den Benutzernamen ändern. Die Adressen von Portfolio-Einbettungen und Einbettungen öffentlicher Projekte enthalten ihn: Die alte Adresse funktioniert noch 30 Tage, dann nicht mehr. Rundgang-Einbettungen und Einbettungen privater Projekte verwenden eine ID und funktionieren weiter.

Weiter

Rundgang teilen: WhatsApp, Immobilienportale, E-Mail-Signatur und QR

Teilen: 𝕏 LinkedIn WhatsApp