How to embed a Pro3D tour on your website and test it on a phone
Creating interactive website content has become a necessity in today's digital world. Laser scanning offers unique opportunities to create detailed 3D tours that let users virtually explore a property, discover its features and interact with the space. For businesses and individuals working in Russia and the CIS, creating a tour is only part of the process. It also needs to integrate effectively with their online platforms and be easy to view on any device, including mobile phones.
Pro3D offers a comprehensive solution for creating and publishing 3D tours, from laser scanning through to embedding the finished tour on a website. Software developed by Pro3D converts scan data into interactive models accessible through a web player. This article explains how to integrate a Pro3D 3D tour into your website, explores the available publishing options and shows you how to check that it displays correctly on mobile devices.
What is a 3D tour and how is it created?
A 3D tour is an interactive digital model of a real space, created from laser scanning data. It allows users to move through the space, view it from different angles, explore details and access additional information through interactive elements. Unlike standard photographs or videos, a 3D tour provides a sense of being there and gives users full control over their viewing experience.
Creating a 3D tour with Pro3D software involves several stages:
- Laser scanning the site: Specialist equipment is used to capture spatial data, including professional laser scanners, Insta360 X5 panoramic cameras, mobile devices with LiDAR (iPhone) and Android smartphones. The PRO3D Capture app assists the operator during capture by suggesting optimal scanning positions and checking that the entire site is covered.
- Processing and assembling the data: Scan data is uploaded to Pro3D servers for processing. The software uses it to generate a three-dimensional model of the site, a dollhouse view and floor plans, and enables measurements within the tour.1
- Customising and enhancing the tour: Once the tour has been assembled, you can use your Pro3D account to add interactive elements, including tags with photos, videos and links, media screens and navigation menus, as well as customise the branding. You can also set the starting point and manage access to the tour.
- Publishing: The finished tour is hosted on Pro3D servers in Russia and can be accessed via a direct link. Viewers do not need to install additional software or register.
Options for publishing and embedding a Pro3D 3D tour
Once a 3D tour has been created, the next step is to share it with potential customers or employees. Pro3D offers several convenient publishing and integration options, each with its own features to suit different goals:
Direct link
The quickest and easiest way to share a 3D tour is with a direct link. A tour hosted on Pro3D servers opens in its own player in any modern browser. This makes it widely accessible: the same link works on computers, tablets and smartphones, without requiring users to install additional software or register.2 This is ideal for sharing quickly through messaging apps, email or social media.
Embedding on a website using an iframe
For closer integration with your website, Pro3D lets you embed a 3D tour using the tag <iframe>. This method displays the tour directly on your web page, creating a seamless user experience. The embed code takes the following form https://pro3d.pro/{tourId}/?m={tourId}&play=1, where {tourId} is your tour's unique identifier.3
Embedding via an iframe is suitable for:
- Property listings on estate agency websites.
- Product or service pages where visual presentation is important.
- Corporate portals showcasing properties or production facilities.
Embedding via oEmbed
Pro3D also supports embedding via oEmbed. This standard automatically retrieves the embed code for content from its link. oEmbed is especially convenient on platforms that support the standard, such as WordPress, making it much easier to add a tour to a website without manually copying iframe code.4
Integration with CIAN and MLS
For real estate businesses, Pro3D offers the option to embed tours directly in CIAN and MLS listings. This allows potential buyers or tenants to explore a property within the listing itself, making it more appealing and improving the user experience.5
Offline viewing
Internet access may sometimes be limited or unavailable. For these situations, Pro3D can package a 3D tour as a standalone application for Windows, macOS or Linux. This solution is ideal for restricted network environments, such as those in museums, industrial facilities and banks, or for demonstrations at exhibitions and presentations without a stable internet connection.6
Testing the tour on a phone
Mobile devices account for a significant share of today's web traffic. It is therefore essential to make sure your 3D tour displays and works correctly on smartphones and tablets. The Pro3D player is built on WebGL and WebXR, allowing it to run in most modern mobile browsers.7
Follow these steps to test the tour on a phone:
- Use the direct link: Open the direct link to your 3D tour in your smartphone's browser. Make sure the tour loads quickly and without errors.
- Check the embedded tour on your website: If you have embedded the tour on your website using an iframe, open the page on your phone. Check how the tour fits into the overall page design and look for any cropping or scaling issues.
- Test navigation: Try moving through the tour using touch controls and gestures. Make sure moving between capture positions and using the dollhouse and floor plan views feels intuitive.
- Check interactive elements: Open tags containing photos, videos and links. Make sure all additional content displays correctly and is easy to read.
- Full-screen mode: Check that full-screen mode works correctly. This is especially important for VR headsets such as Quest and Vive, which the Pro3D player supports without a separate app.8
- Test on different devices: Where possible, test the tour on several smartphone models, across different operating systems (iOS, Android) and in different mobile browsers (Safari, Chrome, Firefox).
The importance of SEO and user experience
Effective 3D tour integration goes beyond the technical setup. You also need to consider its impact on search engine optimisation (SEO) and the overall user experience. Pro3D emphasises that a virtual tour should load quickly, have a clear structure, be accessible on mobile devices and fit naturally into the website.9
To improve SEO and build trust:
- Loading speed: Optimising tour hosting and files ensures fast loading, which has a positive impact on user engagement metrics and search rankings.
- Mobile compatibility: Accessibility and correct display on mobile devices are key factors for modern search engines.
- Structure and navigation: A clear tour structure and easy navigation reduce bounce rates and increase the time users spend on the page.
- Unique content: 3D tours provide unique content that can attract more traffic and improve search rankings. Pro3D recommends creating dedicated SEO pages for key services and use cases, supported by real examples and tours embedded using iframes.10
Checklist for embedding and testing a 3D tour
Use the following checklist to guide you through embedding and testing a Pro3D 3D tour on your website:
| Action | Status | Notes |
|---|---|---|
| Get a direct link to the Pro3D 3D tour. | ☐ | The link is available once the tour has been built and configured. |
| Choose an integration method (iframe, oEmbed or direct link). | ☐ | Choose the option that best suits your goals and your website's capabilities. |
| Embed the tour on your website using the appropriate code. | ☐ | For an iframe: <iframe src="https://pro3d.pro/{tourId}/?m={tourId}&play=1"></iframe>. |
| Check that the tour loads in different desktop browsers. | ☐ | Make sure it displays and works correctly. |
| Check that the tour loads on an iOS phone. | ☐ | Assess the responsive layout, loading speed and navigation. |
| Check that the tour loads on an Android phone. | ☐ | Assess the responsive layout, loading speed and navigation. |
| Test navigation within the tour on mobile devices. | ☐ | Переходы, «кукольный домик», поэтажный план. |
| Check that interactive tags and media displays work on a phone. | ☐ | Photos, videos and links should open correctly. |
| Make sure full-screen mode works on mobile devices. | ☐ | Important for an immersive experience and VR viewing. |
| Check the tour's loading speed on mobile devices with an unstable connection. | ☐ | Assess the user experience under real-world conditions. |
| Assess how embedding the tour affects the page's overall design and usability. | ☐ | The tour should fit naturally into the page content. |
| Consider an offline version for specific needs. | ☐ | For restricted-access sites or presentations without an internet connection. |
Questions and Answers
Do viewers need additional software to view a Pro3D 3D tour?
No. The tour opens via a direct link in any standard browser on a computer or phone, with no additional software installation or user registration required. This makes viewing as accessible and convenient as possible.11
How can I make sure the 3D tour displays correctly on different phone models?
The Pro3D player is built on WebGL and WebXR, enabling it to work across most modern mobile browsers. To check that the tour displays correctly, test it on different devices (iOS and Android) and in different browsers (Chrome, Safari and Firefox). Check that navigation, interactive elements and full-screen mode work reliably. If you use an iframe, make sure its dimensions are responsive and do not crop the content on smaller screens.
Can a Pro3D 3D tour be viewed on VR headsets?
Yes. The Pro3D player is built on WebGL and WebXR, allowing tours to open on VR headsets such as Quest and Vive without installing a separate app. Users can switch to full-screen mode and enjoy an immersive experience.12
What are the main factors affecting the cost of creating and hosting a 3D tour?
The final price of a 3D tour depends on several factors: the property's area, the complexity of the scanning route, the number of floors, the city where capture takes place, the need for outdoor panoramas, additional photos, videos and interactive tags, technical exports (such as E57, DWG or BIM files), and tour hosting. For a preliminary estimate, Pro3D recommends using online calculator or send an enquiry with a description of your property.
Embedding a Pro3D 3D tour on your website is an effective way to engage your audience and offer unique content. Following the publishing recommendations and thoroughly checking the tour on mobile devices will help you get the most from this technology.
To calculate the price of your 3D tour and get detailed advice, visit the Pro3D calculator.
Order a 3D tour for your property
Leave your contact — we'll respond within 30 minutes and calculate the cost
