So betten Sie eine interaktive 3D-Immobilienkarte von Georivo in Webflow ein
Fuegen Sie ein Georivo-Iframe mit dem Code-Einbettungselement von Webflow hinzu, bewahren Sie das Seitenverhaeltnis, veroeffentlichen Sie die autorisierte Domain und ueberpruefen Sie das Live-Widget.
Um eine Georivo-Standortstory in Webflow einzubetten, veroeffentlichen Sie zuerst das Widget und autorisieren Sie die genaue oeffentliche Website-Domain in Georivo. Kopieren Sie das generierte HTTPS-Iframe, fuegen Sie es ueber das von der Plattform unterstuetzte HTML- oder Code-Element hinzu, bewahren Sie das Seitenverhaeltnis und veroeffentlichen Sie die Seite. Ueberpruefen Sie die Live-URL auf Desktop- und Mobilgeraeten, einschliesslich Domain-Zugriff, Ladezeit, Urheberrechtsangaben, Einwilligungsverhalten und Fallback-Verhalten.
Voraussetzungen fuer die Webflow-Integration
Die Integration einer interaktiven 3D-Standortstory in eine Webflow-Website erfordert eine sorgfaeltige Vorbereitung auf beiden Plattformen. Bevor Sie versuchen, Code einzubetten, muessen Sie sicherstellen, dass alle technischen und administrativen Voraussetzungen erfuellt sind. Zunaechst benoetigen Sie ein vollstaendig konfiguriertes und veroeffentlichtes Georivo-Widget. Dieses Widget repraesentiert Ihre Immobilienpraesentation, Ihre Nachbarschaftsstory oder Ihren Anfahrtsplan, komplett mit programmierten Kamerabewegungen und markierten Orten. Ungespeicherte Entwuerfe oder unveroeffentlichte Konfigurationen werden in Produktionsumgebungen nicht korrekt dargestellt.
Zweitens muessen Sie ueber Editor-Zugriff auf das Ziel-Webflow-Projekt verfuegen. Die Integration basiert auf den benutzerdefinierten Code-Funktionen von Webflow, die je nach Ihrer Kontostruktur eingeschraenkt sind. Konkret benoetigen Sie einen Webflow-Tarif, der das Einbetten von Iframes oder benutzerdefiniertem HTML-Code erlaubt. Wenn sich Ihre Website in der kostenlosen Starter-Stufe ohne aktiven Website-Tarif oder Workspace-Upgrade befindet, ist das Element nicht verfuegbar. Schliesslich muessen Sie den genauen oeffentlichen Domainnamen ermitteln, unter dem Ihre Website gehostet wird. Georivo verwendet domaingebundene Einbettungen als zentrales Sicherheitsmerkmal, um lizenziertes Geodatenmaterial vor unbefugtem Hotlinking und der Nutzung auf externen Websites zu schuetzen.
Kopieren des Georivo-Einbettungscodes
Sobald Ihre 3D-Standortstory im Georivo-Dashboard fertiggestellt und veroeffentlicht wurde, können Sie den sicheren Einbettungscode abrufen. Navigieren Sie zu den Freigabe- oder Distributionseinstellungen Ihres spezifischen Widgets. Hier finden Sie die Konfiguration fuer die Domain-Autorisierung. Sie muessen die genaue oeffentliche Domain Ihrer Webflow-Website eingeben, einschliesslich aller Staging-Subdomains, die Sie vor dem offiziellen Start zum Testen verwenden moechten. Dieser Autorisierungsschritt ist zwingend erforderlich; der Sicherheits-Handshake des Widgets blockiert die Darstellung auf allen Domains, die nicht explizit aufgefuehrt sind.
Kopieren Sie nach dem Speichern Ihrer autorisierten Domains das generierte HTTPS-Iframe-Code-Snippet. Gemaess den strengen Einbettungsbedingungen duerfen Sie nur den exakten Iframe-Code verwenden, den Sie aus Ihrem veroeffentlichten Georivo-Widget-Dashboard kopiert haben. Versuchen Sie niemals, die geschuetzte URL oder die im Quellcode eingebetteten eindeutigen Sicherheitstoken manuell freizulegen, zu aendern oder neu zu erfinden. Eine Aenderung dieser Parameter fuehrt dazu, dass der Sicherheits-Handshake ungueltig wird, was zu Ladefehlern oder Berechtigungsproblemen fuehrt, wenn das Iframe versucht, eine Verbindung zu den Rendering-Servern herzustellen.
Hinzufuegen des Code-Einbettungselements in Webflow
Oeffnen Sie mit dem in Ihre Zwischenablage kopierten sicheren HTTPS-Iframe-Code Ihren Webflow Designer und navigieren Sie zu der spezifischen Seite und dem Bereich, in dem die interaktive 3D-Karte erscheinen soll. Suchen Sie in der Webflow-Benutzeroberflaeche das Element-Auswahlmenue. Scrollen Sie durch die verfuegbaren Komponenten, um das Code-Einbettungselement (Code Embed) zu finden, das normalerweise unter den erweiterten oder benutzerdefinierten Komponenten gruppiert ist. Ziehen Sie dieses Element per Drag-and-Drop in Ihren Ziel-Layout-Container, Bereich oder Div-Block.
Nach dem Platzieren des Elements oeffnet Webflow seinen Editor fuer benutzerdefinierten Code. Fuegen Sie Ihren kopierten Georivo-Iframe-Code direkt in dieses Editorfenster ein. Stellen Sie sicher, dass beim Einfuegen keine zusaetzlichen Leerzeichen, Zeichen oder beschaedigten Tags entstehen. Speichern und schliessen Sie den Editor nach dem Einfuegen. Bitte beachten Sie, dass Webflow die Ausfuehrung von benutzerdefiniertem Code innerhalb der Designer-Arbeitsflaeche aus Sicherheits- und Stabilitaetsgruenden einschraenkt. Daher sehen Sie dort nur eine Platzhalter-Box anstelle der interaktiven 3D-Karte. Die tatsaechliche Darstellung erfolgt erst auf den veroeffentlichten Staging- oder Produktions-Domains.
Regeln fuer responsive Groessenanpassung und Seitenverhaeltnisse
Um sicherzustellen, dass Ihre 3D-Standortstory auf allen Bildschirmgroessen hervorragend aussieht, muessen Sie in Webflow klare Regeln fuer responsives Styling festlegen. Das Iframe selbst ist so konzipiert, dass es sich an den uebergeordneten Container anpasst. Das bedeutet, dass seine Breite und Hoehe im benutzerdefinierten Code-Snippet auf 100% eingestellt sein sollten. Diese Layout-Strategie uebertraegt die gesamte Groessenanpassung, Skalierung und die responsiven Grenzen an das native Webflow-Style-Panel, sodass Sie das Layout visuell steuern koennen.
Erstellen Sie in Webflow einen eigenen uebergeordneten Div-Block, der das Code-Einbettungselement aufnimmt. Stellen Sie die Positionierung dieses uebergeordneten Div-Blocks auf relativ (relative). Um ein konsistentes Seitenverhaeltnis beizubehalten, koennen Sie prozentuale Padding-Bottom-Techniken verwenden oder explizite Hoehenbeschraenkungen anwenden. Bei mobilen Breakpoints ist es wichtig, dass der uebergeordnete Container eine Mindesthoehe von beispielsweise 400 Pixeln beibehaelt, um zu verhindern, dass die 3D-Karte in sich zusammenfaellt oder abgeschnitten wird. Diese ausreichende Hoehe stellt auch sicher, dass mobile Nutzer problemlos mit den Touch-Bedienelementen der Karte interagieren koennen, ohne versehentlich die Hauptseite zu scrollen.
Veroeffentlichung der Domain und Schritte zur Ueberpruefung
Sobald Ihr Layout konfiguriert und der benutzerdefinierte Code gespeichert ist, besteht der naechste Schritt darin, Ihr Webflow-Projekt zu veroeffentlichen, um die Integration live zu schalten. Klicken Sie in der Webflow-Benutzeroberflaeche auf die Veroeffentlichungsoptionen und waehlen Sie die autorisierten Domains aus, einschliesslich Ihrer Staging-Subdomain und Ihrer primaeren benutzerdefinierten Produktions-Domain. Starten Sie den Veroeffentlichungsprozess und warten Sie, bis Webflow bestaetigt, dass die Aenderungen im Web live sind.
Navigieren Sie nach der Veroeffentlichung zu der oeffentlichen Live-URL in einem Webbrowser, um die Integration zu ueberpruefen. Sie sollten die Seite sowohl auf Desktop- als auch auf Mobilgeraeten testen. Ueberpruefen Sie in dieser Testphase den erfolgreichen Domain-Zugriff und die Ladegeschwindigkeit. Vergewissern Sie sich, dass die erforderliche Quellenangabe der Google Maps Platform sichtbar und korrekt platziert ist, was den Nutzungsbedingungen fuer das Live-Bildmaterial entspricht. Beobachten Sie ausserdem das Einwilligungsverhalten und wie das Widget mit Fallbacks umgeht, falls ein Nutzer bestimmte Skripte eingeschraenkt hat oder die Verbindung langsam ist.
Unterscheidung zwischen 3D-Visualisierung und Drohnenaufnahmen
Eine wesentliche Richtlinie fuer Immobilienprofis, Projektentwickler und Vermarkter, die Georivo nutzen, ist die klare Unterscheidung zwischen computergenerierter 3D-Visualisierung und echten Drohnenaufnahmen. Georivo erstellt interaktive, fotorealistische 3D-Standortstorys, indem es Immobilienadressen und nahegelegene Orte mithilfe von lizenziertem Geodatenmaterial verarbeitet. Es hostet oder zeigt keine rohen, physischen Drohnenvideos oder statischen Videodateien.
Wenn Sie diese interaktiven Karten potenziellen Kaeufern oder Kunden praesentieren, muessen Ihre Objektbeschreibungen und Marketingmaterialien klar darauf hinweisen, dass es sich bei dem Erlebnis um eine 3D-Visualisierung und nicht um real aufgezeichnetes Drohnenmaterial handelt. Diese Transparenz gewaehrleistet die vollstaendige Einhaltung der Werbestandards der Branche und verhindert Missverstaendnisse bezueglich des aktuellen Zustands der physischen Immobilie. Es hilft auch dabei, die Erwartungen der Kunden zu steuern, indem verdeutlicht wird, dass das Tool ein interaktiver raeumlicher Leitfaden zur Erkundung der Nachbarschaft ist und keine physische Echtzeitaufnahme.
Fehlerbehebung bei haeufigen Einbettungsproblemen
Wenn Ihre eingebettete 3D-Karte nicht korrekt angezeigt wird, koennen mehrere haeufige Probleme diagnostiziert und behoben werden. Ein leeres Iframe oder ein Domain-Blockierungsfehler deutet in der Regel auf eine Diskrepanz zwischen der Live-Website-URL und der Liste der autorisierten Domains in Ihrem Georivo-Dashboard hin. Ueberpruefen Sie, ob die genaue Domain, einschliesslich aller Staging-Subdomains oder spezifischer Praefixe, in Ihren Georivo-Einstellungen korrekt eingegeben ist. Selbst ein kleiner Tippfehler loest die Sicherheitsblockade aus.
Weitere haeufige Probleme sind eine fehlerhafte Hoehendarstellung und das Abschneiden von Inhalten auf Mobilgeraeten. Wenn das Iframe auf eine Hoehe von Null zusammenfaellt, pruefen Sie, ob Ihr uebergeordneter Webflow-Container eine explizite Hoehe oder eine relative Positionierung mit definierten Abmessungen aufweist. Stellen Sie ausserdem sicher, dass Content Security Policies (CSP) oder Mixed-Content-Blockaden Ihres Hosting-Anbieters die von Georivo benoetigte sichere HTTPS-Verbindung nicht beeintraechtigen. Ueberpruefen Sie schliesslich, ob veraltete Browser-Caches oder Consent-Management-Tools die Initialisierung der interaktiven Kartenskripte blockieren.
Best Practices fuer Performance und Optimierung
Um eine optimale Website-Performance und schnelle Ladezeiten auf Ihrer Webflow-Website aufrechtzuerhalten, sollten Sie Best Practices fuer das Einbetten interaktiver Medien von Drittanbietern befolgen. Da die fotorealistischen 3D-Karten von Georivo hochaufloesendes Geodatenmaterial rendern, kann das sofortige Laden bei der Seiteninitialisierung die Core Web Vitals und die anfaenglichen Ladezeiten Ihrer Website beeintraechtigen. Erwaegen Sie, den Karten-Container weiter unten auf der Seite zu platzieren, sodass er nicht Teil des kritischen Inhalts im direkt sichtbaren Bereich (above the fold) ist.
Zudem koennen Sie die native Browser-Optimierung nutzen, indem Sie Lazy-Loading-Attribute auf das Iframe-Element anwenden. Dies weist den Browser an, das Laden der interaktiven 3D-Inhalte zu verzoegern, bis der Besucher in die Naehe des Karten-Containers scrollt. So werden die anfaengliche Bandbreite und die CPU-Zyklen fuer Ihre Hauptinhalte in Webflow geschont. Dieser Ansatz stellt sicher, dass Ihre Website schnell und reaktionsschnell bleibt, waehrend sie dennoch eine detailreiche, interaktive Standortstory liefert, sobald der Nutzer bereit ist, die umliegende Nachbarschaft zu erkunden.
Einschraenkungen und Eignung
Nutzen Sie dieses Material zur Praesentation und Entscheidungsunterstuetzung, nicht als Ersatz fuer unabhaengig verifizierte Originalquellen. Bestaetigen Sie Routen, Entfernungen, Zugaenge, Verfuegbarkeit, Bildmaterial, rechtliche Grenzen, Plattformanforderungen und aktuelle Bedingungen vor der Veroeffentlichung oder Nutzung mit der jeweils zustaendigen Behoerde oder Quelle.
| Integrationsmethode | Bestens geeignet fuer | Anpassungsgrad | Erforderlicher Webflow-Tarif |
|---|---|---|---|
| Code-Einbettungselement | Einzelne Immobilienseiten und benutzerdefinierte Landingpages | Hoch (Vollstaendige CSS-Kontrolle) | Core, Growth oder ein beliebiger Website-Tarif |
| Benutzerdefinierter Code im Rich-Text | Dynamische Blogbeitraege und CMS-Elemente fuer mehrere Immobilien | Mittel (Erbt Stile des uebergeordneten Elements) | CMS- oder Enterprise-Tarif |
| Website-weiter benutzerdefinierter Code | Globale Karten, die in jedem Seiten-Header angezeigt werden | Niedrig (Gilt global) | Beliebiger kostenpflichtiger Tarif |
| HTML-Einbettung im CMS-Template | Automatisierte Immobilienverzeichnisse mit dynamischen URLs | Hoch (Dynamische Feldbindung) | CMS- oder Enterprise-Tarif |
Schritt-fuer-Schritt-Ablauf zur Webflow-Einbettung
- Konfigurieren und veroeffentlichen Sie Ihre interaktive 3D-Standortstory im Georivo-Dashboard.
- Fuegen Sie Ihre genauen Webflow-Staging- und Produktions-Domains zur Liste der autorisierten Domains in Georivo hinzu.
- Kopieren Sie den von der Georivo-Plattform generierten sicheren HTTPS-Iframe-Einbettungscode.
- Oeffnen Sie den Webflow Designer, navigieren Sie zu Ihrer Zielseite und ziehen Sie ein Code-Einbettungselement in Ihr Layout.
- Fuegen Sie den kopierten Iframe-Code in den Editor fuer benutzerdefinierten Code ein und speichern Sie das Element.
- Stellen Sie das Styling des uebergeordneten Containers auf relative Positionierung mit einer definierten Hoehe oder einem definierten Seitenverhaeltnis ein.
- Veroeffentlichen Sie Ihr Webflow-Projekt auf den autorisierten Staging- oder Produktions-Domains.
- Testen Sie die Live-URL auf mehreren Geraeten, um die interaktiven Bedienelemente und das Rendern des Geodatenmaterials zu ueberpruefen.
Die interaktive 3D-Visualisierung bietet eine skalierbare und richtlinienkonforme Alternative zu echten Drohnenaufnahmen. Sie ermoeglicht es Immobilienprofis, den Kontext einer Immobilie ohne wetterbedingte Verzoegerungen oder Luftraumbeschraenkungen zu praesentieren.
Häufige Fragen
Warum zeigt meine eingebettete Karte einen Domain-Autorisierungsfehler an?
Dieser Fehler tritt auf, wenn die Live-Website-URL nicht mit der Liste der autorisierten Domains in Ihren Georivo-Einstellungen uebereinstimmt. Stellen Sie sicher, dass Sie sowohl Ihre webflow.io-Staging-Subdomain als auch Ihre benutzerdefinierte Produktions-Domain zur autorisierten Liste hinzugefuegt haben.
Kann ich Georivo-Einbettungen mit einem kostenlosen Webflow-Starter-Tarif nutzen?
Webflow schraenkt die Nutzung des Code-Einbettungselements bei kostenlosen Starter-Tarifen ohne aktiven Website-Tarif ein. Um benutzerdefiniertes HTML oder Iframes einzubetten, muessen Sie Ihren Webflow-Workspace upgraden oder einen kostenpflichtigen Website-Tarif hinzufuegen.
Wie mache ich die 3D-Karte auf Mobilgeraeten responsiv?
Stellen Sie die Breite und Hoehe des Iframes auf 100 Prozent ein und verwenden Sie dann einen uebergeordneten Div-Block in Webflow, um die Abmessungen zu steuern. Stellen Sie sicher, dass der uebergeordnete Div-Block bei mobilen Breakpoints eine Mindesthoehe von 400 Pixeln hat, um eine komfortable Touch-Interaktion zu ermoeglichen.
Werden die eingebetteten 3D-Bilder in Echtzeit aktualisiert?
Das 3D-Bildmaterial besteht aus hochwertigen, lizenzierten Geodaten. Obwohl es eine genaue und fotorealistische Darstellung der Nachbarschaft bietet, handelt es sich nicht um einen Live-Echtzeit-Video-Feed und sollte von echten Drohnenaufnahmen unterschieden werden.
Kann ich verschiedene Karten auf verschiedenen Webflow-CMS-Sammlungsseiten einbetten?
Ja, Sie koennen ein Code-Einbettungselement zu Ihren Webflow-CMS-Sammlungsvorlagen hinzufuegen. Stellen Sie sicher, dass jedes Element seinen jeweiligen autorisierten Georivo-Iframe-Code verwendet, der aus Ihrem veroeffentlichten Widget-Dashboard kopiert wurde.
Beeinflusst die Einbettung die SEO-Performance meiner Webflow-Website?
Da Georivo-Einbettungen in einem Iframe ausgefuehrt werden, laden sie unabhaengig von den Hauptinhalten Ihrer Webflow-Seite. Die Verwendung von Lazy-Loading-Attributen fuer das Iframe hilft, das Laden von Inhalten zu verzoegern, wodurch Ihre anfaengliche Seitengeschwindigkeit und die Core Web Vitals optimiert bleiben.