How to Embed a Georivo 3D Map in WordPress
Embed a published Georivo widget in WordPress with the Custom HTML block, a responsive wrapper, domain authorization and public-page verification.
To embed a Georivo location story in Wordpress, 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
Before integrating interactive 3D location stories into your WordPress website, you must ensure several technical and administrative prerequisites are satisfied. First, a published Georivo widget must be ready within your active dashboard. This widget is configured using a specific property address and nearby places of interest, which the Georivo system converts into an embeddable, interactive photorealistic 3D location story. This story utilizes licensed geospatial imagery to display the surrounding context of the property. Because the widget must be published before generating the integration code, verify that all programmed camera movements, flows (such as Property Showcase, Neighborhood Story, or Arrival Guide), and nearby locations are finalized.
Second, you must possess editor or administrator-level access to the target WordPress site. The WordPress platform implements strict security policies regarding the execution of custom scripts and raw HTML. Specifically, the capability to insert unfiltered HTML or iframe elements is subject to user role restrictions. If your account lacks these privileges, the WordPress editor may strip out the iframe tags when saving or publishing the page. Additionally, ensure that your active WordPress plan and hosting environment permit the use of custom code or external iframe integrations, as some basic tiers or security plugins restrict external script execution.
Third, your Georivo account must have the exact public domain of your WordPress website authorized. Georivo utilizes domain-bound embeds to protect your licensed geospatial imagery and prevent unauthorized third parties from hotlinking your interactive assets. Lastly, it is critical to clearly distinguish this 3D visualization from physical drone footage. The Georivo platform renders an interactive location story using licensed, photorealistic 3D geospatial imagery. It is not real-time physical drone footage, and it does not represent immediate physical conditions, current weather, or active construction details. Users must understand that this is a visualization tool designed to communicate spatial relationships and regional topography rather than a live physical capture.
Copy the Georivo embed
Once the prerequisites are met, you can retrieve the correct integration code from the Georivo platform. Log in to your dashboard, select the project that corresponds to your property, and navigate to the publishing or sharing settings. Here, you will find the generated HTTPS iframe code specifically designed for your widget. This code is bound to your project's unique token and is structured to load the interactive 3D environment securely.
According to the embed contract, you must use only the exact iframe code copied directly from the published Georivo widget. Never expose, modify, or invent its protected URL or security token. Attempting to manually alter the source URL or strip out required parameters can break the connection to the rendering engine or cause domain-bound security blocks to trigger.
Copy the entire block of code to your clipboard. To prevent formatting errors, avoid pasting the code into rich-text editors or word processors before transferring it to WordPress. These programs can introduce hidden formatting characters or convert standard straight quotes into curly quotes, which will corrupt the HTML syntax. Keep the code on your clipboard or paste it into a plain text editor if temporary storage is necessary.
Add a Custom HTML block
WordPress utilizes a block-based editor (Gutenberg) to organize and render page content. To insert your interactive 3D map, open the target page or post in the editor and locate the section where you want the visualization to appear. Add a new block by clicking the plus icon and searching for the "Custom HTML" block. This block is specifically designed to accept raw HTML and iframe codes without parsing or escaping the tags.
Avoid using standard paragraph blocks, text blocks, or default media embed blocks for this integration. Standard text blocks will render the raw code as literal text on your live site, while default embed blocks are optimized for specific oEmbed providers and do not support the domain-bound secure iframes used by Georivo. The Custom HTML block provides the cleanest and most reliable environment for custom iframe integrations.
Paste the copied Georivo iframe code directly into the text area of the Custom HTML block. You can use the "Preview" button within the block's toolbar to check if the 3D map initializes correctly within the editor interface. If the preview area remains blank or displays an error, verify that the complete iframe code was pasted without any missing tags or truncated attributes, and confirm that your user role has the required permissions to save unfiltered HTML.
Responsive sizing
Property buyers and real-estate clients view listings on a wide range of devices, including mobile phones, tablets, and high-resolution desktop monitors. To deliver a professional user experience, your embedded 3D map must scale responsively across all screen sizes. Standard iframes often load with fixed pixel dimensions, which can cause the map to overflow on smaller viewports or appear as a small box on larger displays.
To ensure the map remains fully responsive, you must preserve its aspect ratio. This can be achieved by wrapping the copied iframe inside a responsive CSS container. In the Custom HTML block, wrap the iframe in a div element with a custom class name, and define the responsive styles in your WordPress theme's customizer or global stylesheet. Alternatively, you can set the iframe's width attribute to 100 percent and define a relative height or viewport-based height.
This approach allows the interactive 3D map to expand to the full width of its parent container while maintaining an appropriate vertical height for touch-based exploration. Always test the layout behavior by resizing your browser window or using the editor's device preview modes to ensure the visualization scales smoothly without cropping critical interface elements.
Publish and verify
After placing the iframe code and adjusting its responsive styling, click the Publish or Update button in the top right corner of the WordPress editor to make the changes live. Once the page is published, navigate to the live public URL using an incognito or private browsing window. This ensures you are viewing the page as a standard visitor, without any cached administrator sessions that might bypass security or loading rules.
Perform a thorough verification of the live page on both desktop and mobile devices. First, verify domain access to ensure the map loads without any domain-bound security blocks or authorization errors. Second, check the loading state to confirm that the 3D map initializes completely and that any programmed camera movements begin playing as intended. Third, verify that the required attribution for the licensed geospatial imagery is clearly visible and complies with the necessary terms of service.
Additionally, test the consent behavior to ensure the embed respects your website's cookie consent tools or privacy banners. Finally, verify the fallback handling on devices or browsers that may restrict 3D rendering. Ensure that the interactive map does not trap the user's touch focus on mobile screens, allowing visitors to scroll past the map canvas easily to read the rest of your property listing details.
Troubleshooting
If the embedded 3D map does not load correctly or displays an error, several common issues should be investigated. A blank iframe is often the result of strict security permissions or role restrictions that stripped the custom HTML code during the saving process. Ensure your WordPress user account has the necessary privileges to publish unfiltered HTML.
Another common issue is a blocked or mismatched domain. Because Georivo utilizes domain-bound embeds, the exact public domain of your live site must be authorized in your Georivo dashboard. This includes matching the exact protocol (HTTPS) and subdomains (such as the presence or absence of the "www" prefix). If a mismatch occurs, the rendering engine will block the request to protect your licensed geospatial imagery.
Additionally, check for Content Security Policy (CSP) or mixed content errors in your browser's developer console. Strict security plugins or server headers may block external requests to Georivo. If you encounter incorrect height or mobile crop issues, review your responsive CSS wrapper to ensure the aspect ratio is preserved. Finally, clear your WordPress site cache, server cache, and browser cache to resolve stale cache or consent blocks that might prevent the updated code from loading.
Performance
Integrating rich, interactive 3D geospatial content can impact your website's page loading speeds and Core Web Vitals if not optimized correctly. To maintain high performance and search engine visibility, you should manage how and when the Georivo iframe initializes. The most effective optimization technique is to implement lazy loading.
You can add the standard loading="lazy" attribute directly to your iframe code within the Custom HTML block. This attribute instructs the browser to delay loading the heavy 3D assets until the user scrolls down to the section containing the map. This prevents the interactive elements from blocking the initial rendering of text, main images, and navigation menus, which is especially beneficial for mobile visitors on slower networks.
Consider placing the 3D map below the fold of your page layout rather than at the very top. This strategic placement ensures that your website's Largest Contentful Paint (LCP) metric remains optimized, while giving visitors necessary written context about the property before they begin interacting with the 3D visualization. By combining lazy loading with thoughtful page design, you can offer an immersive location story without compromising performance.
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.
| WordPress Block Type | Recommended Use Case | Responsive Support | Security Level |
|---|---|---|---|
| Custom HTML Block | Standard iframe embed code | Excellent with CSS wrapper | High (Unfiltered HTML restricted) |
| Shortcode Block | Legacy page builders | Moderate | Medium |
| Paragraph Block | Not recommended (strips code) | None | Low |
| Custom Theme Template | Global site-wide embeds | Excellent | High |
Steps to Embed a Georivo 3D Map in WordPress Block in minutes after Widget Integration
- Log in to your WordPress administrator dashboard and navigate to the target page or post.
- Add a new Custom HTML block at the desired location within the block editor.
- Paste the copied Georivo responsive iframe code directly into the block text area.
- Wrap the iframe in a custom CSS container to preserve the standard aspect ratio.
- Preview the draft to check the initial loading state and layout alignment.
- Publish the page and test the live URL on multiple devices to verify domain authorization.
Integrating interactive geospatial visualizations directly into property listings bridges the gap between static imagery and physical site visits, giving buyers immediate geographic context.
FAQ
Why does my embedded 3D map show a domain error message?
This error occurs when the live WordPress website domain does not match the authorized domains configured in your Georivo dashboard. To resolve this, log in to Georivo, navigate to your widget settings, and add your exact website domain to the authorized list.
Can I use the standard WordPress Embed block for Georivo?
No, the standard WordPress Embed block is designed for specific oEmbed providers. Because Georivo uses domain-bound secure iframes, you must use the Custom HTML block to paste the direct iframe code.
How do I make the embedded map load faster on mobile devices?
You can optimize performance by using the loading lazy attribute on the iframe. This ensures the 3D map assets only load when the user scrolls near the map, preserving initial mobile page load speeds.
Does this embed require a physical drone video file?
No, Georivo uses licensed photorealistic 3D geospatial imagery to generate interactive location stories. There are no heavy video files to host, upload, or stream on your WordPress server.
What happens if a user visits the page with third party cookies blocked?
Georivo embeds are designed to respect modern privacy standards and do not rely on third party tracking cookies to load the basic 3D map experience, ensuring high compatibility across secure browsers.