How to Embed a Georivo 3D Property Map in Webflow
Add a Georivo iframe with Webflow's Code Embed element, preserve the aspect ratio, publish the authorized domain and verify the live widget.
To embed a Georivo location story in Webflow, first publish the widget and authorize the exact public website domain in Georivo. Copy the generated HTTPS iframe, add it through the platform's supported HTML or code element, preserve its aspect ratio, and publish the page. Verify the live public URL on desktop and mobile, including domain access, loading, attribution, consent behavior, and fallback handling.
Prerequisites for Webflow Integration
Integrating an interactive 3D location story into a Webflow website requires careful preparation on both platforms. Before attempting to embed any code, you must ensure that you have met all technical and administrative prerequisites. First, you must have a fully configured and published Georivo widget. This widget represents your property showcase, neighborhood story, or arrival guide flow, complete with programmed camera movements and marked locations. Unsaved drafts or unpublished configurations will not render correctly in production environments.
Second, you must possess editor access to the target Webflow project. The integration relies on Webflow's custom code capabilities, which are restricted based on your account structure. Specifically, you must have a Webflow platform plan that permits iframe or custom HTML code embeds. If your site is on a free starter tier without an active site plan or workspace upgrade, the element will be unavailable. Finally, you must identify the exact public domain name where your site will be hosted. Georivo utilizes domain-bound embeds as a core security feature to protect licensed geospatial imagery from unauthorized hotlinking and usage on external sites.
Copying the Georivo Embed Code
Once your 3D location story is finalized and published within the Georivo dashboard, you can retrieve the secure embed code. Navigate to the sharing or distribution settings of your specific widget. Here, you will find the domain authorization configuration. You must input the exact public domain of your Webflow site, including any staging subdomains you plan to use for testing before full public launch. This authorization step is a strict requirement; the widget's security handshake will block rendering on any domain not explicitly listed.
After saving your authorized domains, copy the generated HTTPS iframe code snippet. According to the strict embed contract, you must use only the exact iframe code copied from your published Georivo widget dashboard. Never attempt to expose, modify, or manually invent the protected URL or the unique security tokens embedded within the source string. Altering these parameters will invalidate the security handshake, resulting in a failed load or permission errors when the iframe attempts to connect to the rendering servers.
Adding the Code Embed Element in Webflow
With the secure HTTPS iframe code copied to your clipboard, open your Webflow Designer and navigate to the specific page and section where you want the interactive 3D map to appear. In the Webflow interface, locate the element selection panel. Scroll through the available components to find the Code Embed element, which is typically grouped under advanced or custom components. Drag this element and place it within your target layout container, section, or div block.
Upon placing the element, Webflow will open its custom code editor interface. Paste your copied Georivo iframe code directly into this editor window. Ensure there are no extra spaces, characters, or broken tags introduced during pasting. Once pasted, save and close the editor. Note that because Webflow restricts custom code execution within the designer canvas for security and stability reasons, you will see a placeholder box rather than the live interactive 3D map. The actual rendering will only occur on the published staging or production domains.
Responsive Sizing and Aspect Ratio Rules
To ensure that your 3D location story displays beautifully on all screen sizes, you must establish clear responsive styling rules within Webflow. The iframe itself is designed to expand to fill its parent container, meaning its width and height should be set to 100% within the custom code snippet. This layout strategy delegates all sizing, scaling, and responsive boundaries to Webflow's native style panel, allowing you to manage the layout visually.
Create a dedicated parent div block in Webflow to house the Code Embed element. Set this parent div's positioning to relative. To preserve a consistent aspect ratio, you can utilize percentage-based padding-bottom techniques or apply explicit height constraints. On mobile breakpoints, it is critical to ensure the parent container maintains a minimum height, such as 400 pixels, to prevent the 3D map from collapsing or cropping. This adequate height also ensures that mobile users can comfortably interact with the map's touch controls without accidentally scrolling the main page.
Publishing the Domain and Verification Steps
With your layout configured and the custom code saved, the next step is publishing your Webflow project to make the integration live. Click the publish controls in the Webflow interface and select the authorized domains, including your staging subdomain and your primary custom production domain. Initiate the publishing process and wait for Webflow to confirm that the changes are live on the web.
Once published, navigate to the live public URL in a web browser to verify the integration. You must test the page on both desktop and mobile devices. During this verification phase, check for successful domain access and loading speed. Confirm that the required Google Maps Platform attribution is visible and correctly placed, satisfying the permitted-use context for the live imagery. Additionally, observe the consent behavior and how the widget handles fallbacks if a user has restricted certain scripts or if the connection is slow.
Distinguishing 3D Visualization from Drone Footage
An essential guideline for real-estate professionals, developers, and marketers using Georivo is the clear distinction between computer-generated 3D visualization and physical drone footage. Georivo creates interactive photorealistic 3D location stories by processing property addresses and nearby places using licensed geospatial imagery. It does not host or display raw, physical drone videography or static video files.
When presenting these interactive maps to prospective buyers or clients, your listing descriptions and marketing materials must clearly state that the experience is a 3D visualization rather than live-recorded drone footage. This transparency ensures full compliance with industry advertising standards and prevents any misrepresentation of the physical property's current state. It also helps manage client expectations by highlighting that the tool is an interactive spatial guide designed for neighborhood exploration rather than a real-time physical recording.
Troubleshooting Common Embed Errors
If your embedded 3D map fails to display correctly, several common issues can be diagnosed and resolved. A blank iframe or a domain block error typically points to a mismatch between the live website URL and the authorized domains list in your Georivo dashboard. Verify that the exact domain, including any staging subdomains or specific prefixes, is correctly entered in your Georivo settings. Even a minor spelling difference will trigger the security block.
Other common issues include incorrect height rendering and mobile cropping. If the iframe collapses to a height of zero, check that your Webflow parent container has an explicit height or a relative positioning with defined dimensions. Additionally, ensure that content security policies (CSP) or mixed content blocks on your hosting provider are not interfering with the secure HTTPS connection required by Georivo. Finally, verify that stale browser caches or consent management tools are not blocking the initialization of the interactive map scripts.
Performance and Optimization Best Practices
To maintain optimal site performance and fast page load speeds on your Webflow site, you should follow best practices for embedding third-party interactive media. Because Georivo's photorealistic 3D maps render high-resolution geospatial imagery, loading them immediately upon page initialization can affect your site's core web vitals and initial loading scores. Consider placing the map container lower on the page so that it is not part of the critical above-the-fold content.
Additionally, you can leverage native browser optimization by applying lazy loading attributes to the iframe element. This instructs the browser to defer loading the interactive 3D assets until the visitor scrolls near the map container, preserving initial bandwidth and CPU cycles for your main Webflow content. This approach ensures that your website remains fast and responsive while still delivering a rich, interactive location story when the user is ready to explore the surrounding neighborhood context.
Limitations and suitability
Use this material for presentation and decision support, not as a substitute for independently verified source information. Confirm routes, distances, access, availability, imagery, legal boundaries, platform requirements, and current conditions with the relevant authoritative source before publication or use.
| Integration Method | Best Used For | Customization Level | Required Webflow Plan |
|---|---|---|---|
| Code Embed Element | Single property pages and custom landing pages | High (Full CSS control) | Core, Growth, or any Site Plan |
| Rich Text Custom Code | Dynamic blog posts and multi-property CMS items | Medium (Inherits parent styles) | CMS or Enterprise Plan |
| Site-wide Custom Code | Global maps displayed on every page header | Low (Applies globally) | Any Paid Plan |
| HTML Embed in CMS Template | Automated listing directories with dynamic URLs | High (Dynamic field binding) | CMS or Enterprise Plan |
Step-by-Step Webflow Embed Workflow
- Configure and publish your interactive 3D location story within the Georivo dashboard.
- Add your exact Webflow staging and production domains to the authorized domains list in Georivo.
- Copy the secure HTTPS iframe embed code generated by the Georivo platform.
- Open Webflow Designer, navigate to your target page, and drag a Code Embed element into your layout.
- Paste the copied iframe code into the custom code editor and save the element.
- Set the parent container styling to relative positioning with a defined height or aspect ratio.
- Publish your Webflow project to the authorized staging or production domains.
- Test the live URL on multiple devices to verify interactive controls and geospatial imagery rendering.
Interactive 3D visualization offers a scalable and compliant alternative to physical drone footage, allowing real-estate professionals to showcase property context without weather delays or airspace restrictions.
FAQ
Why does my embedded map show a domain authorization error?
This error occurs when the live website URL does not match the authorized domains list in your Georivo settings. Ensure you have added both your webflow.io staging subdomain and your custom production domain to the authorized list.
Can I use Georivo embeds on a free Webflow starter plan?
Webflow restricts the use of the Code Embed element on free starter plans that do not have an active site plan. To embed custom HTML or iframes, you must upgrade your Webflow workspace or add a paid site plan.
How do I make the 3D map responsive on mobile devices?
Set the iframe width and height to 100 percent, then use a parent div block in Webflow to control the dimensions. Ensure the parent div has a minimum height of 400 pixels on mobile breakpoints to allow comfortable touch interaction.
Is the embedded 3D imagery updated in real time?
The 3D imagery consists of high-quality licensed geospatial data. While it provides an accurate and photorealistic representation of the neighborhood context, it is not a live real-time video feed and should be distinguished from physical drone footage.
Can I embed different maps on different Webflow CMS collection pages?
Yes, you can add a Code Embed element to your Webflow CMS collection templates. Ensure each item uses its respective authorized Georivo iframe code copied from your published widget dashboard.
Does the embed affect my Webflow site SEO performance?
Because Georivo embeds run inside an iframe, they load separately from your primary Webflow page content. Utilizing lazy loading attributes on the iframe helps defer asset loading, keeping your initial page speed and core web vitals optimized.