How to Embed a Georivo 3D Map in Squarespace
Add a Georivo HTTPS iframe with a Squarespace Code block, confirm plan support, make it responsive, authorize the domain and verify the public page.
To embed a Georivo location story in Squarespace, 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 and plan support
Before attempting to integrate an interactive 3D location story into your website, you must confirm that several technical and administrative prerequisites are fully satisfied. First, you must have a published Georivo widget ready in your account. This widget represents your configured property presentation, which may utilize templates such as the Property Showcase, Neighborhood Story, or Arrival Guide. Each of these templates relies on licensed geospatial imagery to construct a photorealistic 3D environment, complete with programmed camera movements and custom spatial markers.
Second, you must ensure you have appropriate editor or administrator access to your Squarespace website. It is critical to verify your Squarespace subscription plan before proceeding. Squarespace restricts the use of custom code blocks, raw HTML, and external iframe embeds to specific premium tiers, typically starting with their Business plan. If your website is on a personal or basic tier that does not permit custom code execution, the embedded 3D map will not render. This platform requirement was verified against official Squarespace Code blocks help documentation on 2026-07-24.
Finally, you must configure domain authorization within your Georivo dashboard. Georivo utilizes domain-bound embeds as a core security feature to protect your licensed geospatial visualizations. By restricting the iframe to run only on your authorized public domain, you prevent unauthorized third parties from copying your embed code and displaying your interactive 3D content on unapproved external sites. You must input the exact public domain of your Squarespace site into Georivo before the embed will function on your live pages.
Copying the Georivo embed code
Once all prerequisites are met, you can retrieve the secure iframe code from your Georivo dashboard. Navigate to the project settings for your published 3D location story. Within the share or publish panel, the system provides a dedicated option to copy the embed code. This code is structured as a standard HTTPS iframe element designed to load the interactive 3D environment securely and seamlessly on external platforms.
When copying this code, you must adhere strictly to the embed contract. You are required to use only the exact, unaltered iframe code copied directly from the published Georivo widget interface. Never attempt to expose, modify, or manually invent the protected URL or the security token embedded within the code. Modifying these parameters or attempting to reverse-engineer the source URL will invalidate the security handshake, causing the domain-bound protection system to block the request and render an error.
The copied iframe snippet contains specific default attributes, including width and height parameters, designed to establish a baseline layout. Keep this code copied to your clipboard without any manual adjustments, as any modifications to the core source attributes can interfere with the secure connection established between the Squarespace hosting environment and Georivo's visualization servers.
Adding the Code block in Squarespace
With the secure HTTPS iframe code copied to your clipboard, log in to your Squarespace account and navigate to the page editor for the specific page where you want to display the 3D map. Locate the target section on your page layout where the visualization will provide the most value to your visitors, such as directly below the primary property details or within a dedicated neighborhood exploration section.
Add a new block to your chosen section and select the Code block from the available options. The Code block is the designated element for rendering raw HTML and custom iframe snippets on Squarespace. Once the block is added, open its settings panel. It is essential to ensure that the format setting within the Code block is set specifically to HTML. If the block is left in plain text mode, the browser will display the raw code as text rather than executing the iframe to load the interactive 3D map.
Paste the copied Georivo iframe code directly into the Code block text area. While working in the Squarespace editor, you may see a placeholder or a message indicating that the preview has been disabled. This is standard platform behavior designed to optimize editor performance and prevent external scripts or complex WebGL contexts from interfering with the editing interface. The complete interactive 3D location story will render and function normally once the page is viewed on the live, public URL.
Managing responsive layout and aspect ratios
To ensure a seamless user experience across all devices, you must manage the responsive layout of the embedded 3D map. The iframe code provided by Georivo is designed to scale horizontally to fill the width of its container. Therefore, the responsiveness of the map is largely determined by how you configure the surrounding Code block container within your Squarespace layout.
When using Squarespace's layout engine, you can adjust the boundaries of the Code block to establish a balanced aspect ratio. For desktop displays, maintaining a widescreen aspect ratio, such as 16:9, is highly recommended. This proportion ensures that the photorealistic 3D terrain, programmed camera movements, and nearby points of interest are clearly visible without requiring excessive vertical scrolling. It also provides sufficient space for users to interact with the map comfortably.
After configuring the desktop layout, switch to the mobile editing view within Squarespace. Because mobile screens have limited horizontal space, you must adjust the Code block's height and width specifically for mobile viewports. Ensure that the block is tall enough to prevent the interactive controls and 3D visualization from feeling cramped, while avoiding an excessive height that might disrupt the vertical flow of your mobile page layout.
Publishing and verifying the live page
After positioning the Code block and adjusting its dimensions, save your changes and publish the updated page to make it live. Verification is a critical final step in the integration process. Because the Georivo widget uses domain-bound security, you cannot fully verify its functionality solely within the Squarespace editing preview. You must test the live, public URL to confirm that all security and rendering checks pass successfully.
Open a new browser window—ideally in incognito or private browsing mode to bypass any active editor sessions or cached files—and navigate to the live public URL of your Squarespace page. Confirm that the interactive 3D map loads completely and that the initial programmed camera movements play smoothly. Once the automated playback finishes, verify that the live exploration mode is active, allowing you to interact with the photorealistic 3D environment by panning, zooming, and rotating the view.
During this verification process, check both desktop and mobile layouts. Ensure that all required attributions, which are mandatory under the Google Maps Platform Terms of Service, are clearly visible and legible at the bottom of the map interface. Additionally, verify how the embed behaves in relation to your site's cookie consent banners or privacy settings, ensuring that no external script blocks prevent the map from loading for new visitors.
Troubleshooting common embed issues
If the embedded 3D map does not display correctly on your live Squarespace site, you can systematically address the issue using a standard troubleshooting checklist. A blank iframe or an explicit loading error is most commonly caused by a blocked or mismatched domain. Go back to your Georivo project settings and verify that the authorized domain matches your live public Squarespace URL exactly, including any subdomains or prefixes like 'www'.
Another potential obstacle is a Content Security Policy (CSP) or mixed content block. Because Georivo requires a secure connection, your Squarespace site must be served entirely over HTTPS. If there are insecure elements on your page, the browser may block the secure iframe from loading. Additionally, check for stale browser cache or aggressive third-party consent blocks. Some privacy plugins or cookie management tools on your Squarespace site may block external scripts or WebGL frames until the visitor explicitly grants consent.
Layout issues, such as an incorrect height or a cropped display on mobile devices, can be resolved by adjusting the container settings. If the map appears vertically squished or has black bars, review the height and width attributes in your iframe code or resize the Code block boundaries within Squarespace's Fluid Engine. Ensuring that the iframe's width is set to 100% and that the container has adequate vertical padding will resolve most responsive layout issues.
Performance optimization and loading behavior
Because Georivo interactive maps utilize high-resolution, licensed geospatial imagery to construct photorealistic 3D environments, managing their impact on page performance is important. Georivo embeds are engineered to load asynchronously, meaning they do not block the critical rendering path of your Squarespace page. Your primary text, images, and navigation elements will load first, ensuring a fast initial page speed for your visitors.
To further optimize performance, you can implement native lazy loading. By adding the loading='lazy' attribute directly to your copied HTTPS iframe tag within the Squarespace Code block, you instruct modern browsers to delay downloading the 3D assets until the visitor actually scrolls down to the section containing the map. This saves bandwidth and processing power, particularly for mobile users who may not scroll down to view the interactive content.
Additionally, avoid embedding multiple interactive 3D maps on a single page. Loading multiple WebGL contexts simultaneously can strain system resources, leading to performance degradation on older mobile devices or slower computers. If you need to showcase multiple views or different properties, it is best to use a single primary embed on the page and provide protected share links for secondary presentations or detailed neighborhood stories.
Limitations and suitability
While Georivo is a powerful tool for real-estate professionals, marketers, developers, and hospitality teams, it is essential to understand its technical limitations and suitability boundaries. Georivo is an interactive 3D visualization platform powered by licensed geospatial imagery; it is not a physical drone production service. It does not provide real-time, live video feeds of physical properties, nor does it represent a physical drone flyover.
Because the platform relies on compiled geospatial datasets, the 3D environment may not immediately reflect recent construction, temporary road closures, or current weather conditions. Marketers must clearly distinguish these interactive 3D visualizations from physical drone footage in their listing descriptions to manage buyer expectations accurately.
Furthermore, users bear the responsibility of verifying address coverage in the Georivo system before finalizing marketing campaigns. You must also ensure that your use of the interactive map complies with the Google Maps Platform Terms of Service, particularly regarding the display of required attributions and the permitted-use context of the live mapping experience. Finally, note that these 3D visualizations are designed for spatial context and neighborhood storytelling; they do not prove or establish legal or physical property boundaries.
| Feature / Setting | Recommended Value | Purpose | Squarespace Compatibility |
|---|---|---|---|
| Block Type | Code Block | Renders raw HTML and iframe code cleanly | Requires Business plan or higher |
| Format Setting | HTML | Prevents Squarespace from escaping the iframe tags | Available in all Code blocks |
| Iframe Width | 100% | Allows the map to scale to the container width | Standard responsive practice |
| Iframe Height | 500px to 600px | Provides adequate vertical space for 3D navigation | Adjustable via custom CSS or Fluid Engine |
| Loading Attribute | lazy | Improves initial page loading speed and performance | Supported by modern browsers |
Steps to Authorize Your Domain and Embed the Map
- Log in to your Georivo dashboard and select the specific property project you want to display.
- Navigate to the Share settings and enter your exact Squarespace public domain to authorize it.
- Copy the complete, generated HTTPS iframe code snippet directly to your clipboard.
- Open your Squarespace page editor, add a Code block to the desired section, and set the format to HTML.
- Paste the iframe code into the block, adjust the container dimensions, and publish your changes to make the interactive 3D map live.
Integrating interactive 3D visualization directly into property pages bridges the gap between static imagery and physical site visits, giving buyers immediate geographic context.
FAQ
Why does my embedded Georivo map show a blank screen on my live Squarespace site?
This usually happens if the live website domain has not been authorized in your Georivo project settings. Ensure the exact public domain, including any subdomains, is added to your authorized domains list in Georivo.
Do I need a premium Squarespace plan to embed a Georivo 3D map?
Yes, Squarespace typically restricts the use of custom Code blocks and raw HTML/iframe embeds to their Business and Commerce plans. Check your current Squarespace subscription to ensure it permits custom code.
How is a Georivo 3D location story different from physical drone footage?
Georivo uses licensed geospatial imagery to construct an interactive, photorealistic 3D environment that users can actively explore. Unlike a pre-recorded, static drone video, Georivo allows programmed camera movements and live exploration of nearby points of interest after playback.
Will embedding the 3D map slow down my Squarespace website loading speed?
Georivo embeds are optimized to load asynchronously, meaning they do not block the main text and images of your Squarespace page from rendering. To further optimize performance, you can enable native lazy loading on the iframe.
Can I use the standard Squarespace Embed block instead of the Code block?
While the Embed block can work with raw iframe code on some plans, the Code block set to HTML mode is the most reliable method for rendering custom HTTPS iframe elements without platform-specific modifications.
What should I do if the 3D map looks cropped on mobile devices?
Ensure your iframe code uses responsive CSS, such as setting the width to 100% and managing the height with viewport units or a fixed aspect ratio container. You should also adjust the mobile layout settings in Squarespace's Fluid Engine.