Cupix’s Web Player
It is only a button click away to share 3D tours with the public - publish the 3D tour by switching Publish & Social Share option in the Publisher tab on.
Then, a unique URL, starting with player.cupix.com, will be assigned to the 3D tour and your audience can open it from their favorite web browser. In fact, when people access the URL, Cupix’s Web Player will be launched in the web browser. The Web Player is an HTML based web player in which a 3D tour you have created is loaded from our hosting server. Granted that your audience could explore the spaces in a highly immersive way by using default Web Player settings, there are quite a few options with which you can customize the Web Player, fine-tune user experience, increase user engagement, and eventually achieve your business goals effectively.
Web Player system requirement
The Web Player requires an internet connection and a web browser supporting the WebGL standard. You can quickly check the compatibility of WebGL by opening the test page at get.webgl.org. Most of the web browsers like Chrome, Firefox, Safari, Edge, and Internet Explorer 11 support WebGL including mobile versions of them. If WebGL doesn’t work even with the latest version of one of these browsers, please make sure that WebGL option in the settings or preferences of your browser is enabled.
Review a 3D tour before sharing
Review tab of the Tour Editor is the place to check a 3D tour before it goes to the public. When you click the tab, you can make sure that everything you have customized or set up will work as you intended.
Best practices when sharing 3D tours
Put your brand in the Web Player
The easiest way to make your brand stand out in the Web Player is to go to the Player Settings tab under Settings menu and upload three types of images that will be displayed inside the Web Player.
- Loading Logo
The logo image will appear at the Presented by the headline in the Web Player loading screen while it downloads data from the hosting server and prepares to render the 3D tour.
- Watermark Image
The watermark image will appear at the top center of the player all the time when people explore the 3D tour.
- Nadir Photo
The nadir is the vertical direction pointing to the ground and the nadir photo will be located at the bottom part of the panoramic image. Also, the nadir photo can be used to hide the tripod or holding hand.
These settings are applied to all 3D tours in the same workspace. If you would want to use different brands for your clients, create workspaces for their unique brand images.
One more space you can quickly add your profile like the contact info or the website link in a 3D tour is the 3D Tour Info which is displayed right after the 3D Player starts. This field is available in the Overview tab of the Tour Editor. Please note that any custom settings in the Tour Editor only work for the specific 3D tour.
Note:Complying with MLS guideline. In order not to display any branding related information like loading logo, the watermark image, the nadir image and 3D tour info in the player, just add the URL parameter ?brand=0 to the end of the player URL. For example, you can use this parameter on an MLS listing site which restricts the information that you can show online.
Use 3D Objects
The more natural way to advertise your brand is to take full advantage of 3D virtual objects which can be easily blended in a 3D tour and make it look much more impressive than photo-only 3D tours.
You can add your own 3D texts like your company name or the business tagline with custom color and size inside the 3D tour by choosing Insert > 3D Text from the Tour Editor toolbar.
As well as 3D text objects, you can also add Photo Frame objects inside the 3D tour. It would be a very effective tool because you can overlay your own graphics on top of 3D tour photos without using any photo editing software.
Tip:You can set a movie clip in a Photo Frame object as a source file, and the movie will be started playing when the Web Player is opened. Currently, the Asset Library doesn't support a movie format, however, you can store and publish a move file in cloud storage like Dropbox and set the URL after the clicking Image File option in the Photo Frame creation dialog window.
The Pushpin object is a particularly powerful tool because its Description area supports a formatted paragraph and plus you can insert high-resolution images from the Asset Library or video links from YouTube, Vimeo, and Wistia. When you pick the Anchor Point of a Pushpin which should indicate a specific 3D coordinate, we strongly recommend that you should use Common Point from 2 Panos method among the Point Picking Method. Using this method you are able to pick the 3D point you want to attach the Pushpin regardless of underlying 3D mesh quality or even if there is no 3D mesh. If the 3D anchor point is not correctly chosen, it may look misaligned when you change panos.
Tip:3D virtual objects are fully or partially invisible if they are behind the underlying 3D mesh, which makes the scene with 3D objects look natural. However, there are cases when the 3D mesh is not fully created or oversized and so the visibility of 3D objects is not what you expected. If that is the case, you can use Box objects for 3D mesh modification purpose. When you place Box objects with either See-Through Box (extract the box from the mesh) or Occlusion Box (add the box to the mesh) option, they are only used for adding to or subtracting from the mesh geometry and not shown in the 3D tour.
Implement best user experience aligned with business goals
By making your 3D virtual tour experience easy, immersive, fun and visually informative, you can increase the number of views and encourage people to stay longer on your tours. If you get familiar with Cupix’s powerful 3D tour editing and customization tools, you can come up with numerous cool and creative ideas which would help you build a strong business brand and differentiate yourself from your competitors.
The central place where you can fine-tune the user experience is the Publisher tab in the Tour Editor.
Carefully select the Cover Image
The Cover Image you set will be placed in the background of the entire Web Player during it loads the 3D tour and therefore it is the first impression of the user experience and allows people to get a quick idea of what you try to present and how to showcase the space. Also, this image will appear in social media posts when you copy and paste the social media share URL.
Use Hotspot objects for dynamic navigation
The Hotspot object, which provides a hyperlink with a polished icon you can choose from the predesigned set, is also a highly versatile 3D object you can use for several different use case scenarios.
- First, you can link a Hotspot with a Viewpoint Link, which is a link to a pano with a specific view angle and can be easily obtained by clicking the Link icon in the toolbar.Place Hotspot objects on walls or on the floor as you want your 3D tour visitors to experience certain spots while they explore the space.
- Next, you can also link a Hotspot with any web URL and so a Hotpost could work as your Call-to-Action button when you want people to land on your website at a certain point.
Curate Highlights and allow people to access main viewpoints easily
You can arrange main viewpoints in the Highlight Reel which shows thumbnail images of them in a filmstrip at the bottom of the Web Player. Unlike Hotspot objects, these access points stay in front of Web Player and users can easily find what they might be interested in and go to the view directly.
- You can add a Highlight by simply clicking this button in the Edit Opening Panos toolbar.
- Hover the mouse pointer on a thumbnail image, then you can reorder Highlights by dragging the move handle at the top-left corner, edit the label by clicking the pencil icon, retake the thumbnail image by clicking the camera icon.
- If you want to change the opening view angle which is the initial viewpoint as the Highlight pano is changed, use this button in the Edit Opening Panos toolbar.
Multi-level properties or big scale sites
A Section is a collection of panos which represents a certain area of the entire space. In case of a multi-level property, we recommend that you should separate levels into Sections. In case of big scale sites, we also recommend that you should split the site into Sections for every 10,000 square feet (about 1,000 square meters). Thus, if you end up with multiple sections for a single 3D tour, you need to put them together in the Web Player for people to easily navigate through Sections.
- The easiest method is to use Section Selector
You can add sections in the Section Selector which is available in the Publisher tab, and users can choose one from the pulldown UI in the Web Player.
- You can use Hotspots or Highlight as well with links to viewpoints of different sections by which users can navigate through sections.
- Combine Sections into a Group and align them in the Layout tab.
Using this method you can create the most seamless navigation experience but it requires advanced skills. Please refer to "Combine sections" for further details.
Design Camera Animation and provide an executive tour experience
Using the Camera Animation tool you can create a keyframe-based auto-playing animation in a few minutes. At any point in a Camera Animation, viewers can stop it and explore the 3D tour.
- Clicking the plus button will add a new keyframe of the current pano with the viewpoint.
- The Camera Animation plays back the animation as interpolating keyframes based on the parameters you set.
- You can make the Camera Animation auto-play right after the 3D Tour is loaded by switching on Auto Camera Animation option in the Customize Player menu.
- The Camera Animation also helps you create a stunning promotional video quite easily. Just use screen recording software while the Camera Animation is playing and edit the footage into your marketing video.
Embed the Web Player on your web page
While you can always share a public URL to a 3D tour with anyone, you can directly embed 3D tours in your web pages just like you do with YouTube videos.
- Copy and paste the iframe embed code into the HTML source code of your web page. If you are using a CMS like Wordpress, Wix, Blogger, etc., please follow their exact instructions regarding the iframe code.
- Feel free to edit iframe parameters like width, height, frameborder, or allowfullscreen directly.