How to Customize the Web Player Layout for Sharing your Project

Content Share HoloBuilder Project

1 Basic Sharing Settings
2 Advanced Sharing Settings
2.1 Filter project view
2.2 Set a custom start scene
2.3 Custom Sharing Settings
1) Show Navigation Panel
2) Rotate On Load
3) Show Scenes Panel
4) Auto Start Player
5) Switch directly to fullscreen
6) Show Control Panel
2.4 Embedding Projects
Support

 

Open the share menu

To share your HoloBuilder project, select the sharing button  next to the project name. The basic sharing settings will open in a dialog box. If you didn’t save your project just yet, the project will be automatically saved when clicking on the ‘share’ button . The basic sharing dialog box will open automatically after the project was saved.

1 Basic sharing settings

With the basic sharing settings, you can easily and fast share your HoloBuilder projects anywhere. Select one of the social network link buttons to directly publish your project on either of them. Or, copy the ‘Share Link‘ below and paste it into your blog, social network profile or an email to share the project effortlessly with a large group or only selected few.

By default, the basic share link always opens with the first image of the Project Panel in linear order. The player view has Auto Start disable. However, all three panels are shown and Rotate On Load is enabled. See the Advanced Sharing Settings in the next chapter for more information.

Use Basic sharing options

Go to top!

2 Advanced sharing settings

Change between basic sharing and ‘advanced’ sharing by clicking on the corresponding buttons at the top of the ‘Share HoloBuilder Project‘ dialog box as illustrated in the image above.

Open Advanced share settings

In the Advanced Share Setting, you can customize the layout of the player view you want to share your project in. Additionally, you can filter the shown scenes according to pre-set image categories, select a new opening scene and embed your customized project view.

Share the customized ‘Fullscreen Link’ via email or company internal personal messages, instant messaging or more publicly over social networks.

Go to top!

2.1 Filtered project view

In the player and editor, you can restrict access to only selected 360° images by using categories and filters while sharing. Apply filters in the editor and select ‘Share project with applied filters’ in the Advanced Sharing Settings.

Copy the ‘Fullscreen Link’ or embed the project to share the project only with the selected 360° images according to the category settings in the editor. Learn more about how to create categories and apply Filters here.

Sharing with filters

2.2 Set a custom start scene

By default, the shared project link will open with the first scene in the Project Panel on the right-hand side. Set a different opening scene by choosing one from the drop-down menu of ‘Start Scene’ in the Advanced Sharing Settings. The start scene is the first scene the viewer will see when opening the project.

Alternatively, while in the editor or in the player view, navigate to the scene you would like the project to open with and copy the project link from the browser’s address bar. 

2.3 Custom sharing settings

When using the custom sharing settings, these changes will be locked with the ‘Fullscreen Link’ and the ‘Embed Code’ to be shared. Please note that each time you change the combination of share setting, the link itself will change. Thus, if you change the settings, you will have to also share the new link once again with anybody who already had a link before but should get the new sharing settings for it.

There are five settings for individual customization of the player view plus one option only available when disabling ‘Auto Start Player’. The sharing settings are only applied when using the advanced ‘Fullscreen Link’.

    1. Show Navigation Panel
    2. Rotate On Load
    3. Show Project Panel
    4. Auto Start Player
    5. Open directly in fullscreen view
    6. Show Control Panel

1) Show Navigation Panel

The ‘Show Navigation Panel‘ is activated by default and will be displayed in any projects shared with the basic share link if not manually deactivated. Add the navigation panel to make a linear changing of scenes available and substitute the project panel for a more natural navigation in between scene. Navigate directly to a specific scene by selecting the scene name from the drop-down list in the middle. Or, use the arrows on the left and right to move linearly according to the given scene order as shown in the scene overview.

If no interactable objects for changing the scene are added to the project, the viewers can easily change the scene by selecting individual scenes directly from the navigation panel or with the arrows.

 

Note: Naming your scenes when creating a project makes it easier to distinguish the scenes from another and simplify navigation with the navigation panel.

Go to top!

2) Rotate On Load

The ‘Rotate On Load‘ setting is activated by default and will rotate the opening photosphere in a shared project if not manually deactivated in the advanced share settings. Activate to automatically rotate the scene when opening it in the web player view. The rotation of the scene when opening suggests the viewer to rotate interactively the 360° photosphere format or any 3D representation. Only the first scene of a project will automatically rotate. By clicking once in the 360° image, the autorotation of the scene will stop.

Go to top!

3) Show Project Panel

Turn on the ‘Project Panel’ to add a panel with a scene overview on the left side of the web player as shown in the image below. If no interactable objects for changing the scene are added to the project, the viewers can easily change the scene by selecting individual scenes directly from the scene overview in the project panel.

The project panel with the scene overview can be hidden on the right-hand side of the player. Expand the project panel by clicking on the doubled arrow  or hide it.

Show project panel

Note: When deactivating the ‘Show project panel’, the panel won’t be available at all in the shared/ embedded player view to switch between scenes.

Go to top!

4) Auto Start Player

When checked, the tour will load automatically when opening the share link without only showing a cover image first. Auto Start is disabled by default in the basic share link and enabled by default in the advanced share settings. On mobile, the shared project will always have the Auto Start disabled regardless your settings to avoid any unwanted data usage of your mobile data.

If not turned on, by default, a thumbnail of the first scene will be loaded as a cover image with a play button to manually start the project tour. However, you can also customize the image as described below.

 

The start screen image for the deactivated autoplay in the player view can be customized in the Project Properties. Click on the name of the project at the top of the editor to open the Project Properties. To upload a custom image, e.g. your logo, click the thumbnail image in ‘General’. The browsing window opens and you can browse your computer for the desired image. Click ‘Open’ and SAVE CHANGES. Alternatively, you can select a thumbnail from the screenshots you made while setting a default view of your scene etc.

5) Switch directly to fullscreen

This option is only available if ‘Auto Start Player’ is disabled!

Enable ‘Switch directly to fullscreen’ to open the project in complete fullscreen. The project will cover the complete screen after clicking on the play button of the cover image. The fullscreen view can be closed by clicking on the fullscreen toggle icon  in the ‘Control Panel’ at the bottom of the player. Alternatively, leave the fullscreen view by hitting ‘Esc’ on your keyboard, e.g. if the Control Panel is disabled.



Go to top!

6) Show Control Panel

Hiding the control panel is a feature only available for premium users. If you are a Starter user, switching off the control panel will not work for you. You can read more about this option below.

 

2.4 Embedding HoloBuilder projects

Any HoloBuilder project can be embedded in an HTML website with the provided iframe code snippet. The embed code snippet contains the customized ‘Fullscreen Link’ and thus, can hold any customizations available in the Advanced Sharing.

Copy the code fragment for embedding project as an iframe into your website. To embed a HoloBuilder project into your website, the project needs to be created and saved in your account. Any changes in the project will be directly visible in the embedded project once the changes have been saved in the web editor. However, changes in the Advanced Share Settings will not automatically be applied. In order to change the player view of your embedded project, you need to exchange the fullscreen link in the iframe code snippet on your website.

You can customize the iframe with all commonly know methods applicable for iframes. The frame height and width of the embedded player can easily be adjusted to personal preferences. Simply enter the preferred format in the corresponding text fields in the Advanced Share Settings or directly into the embedding code snippet. Find also a more detailed tutorial here to make your iframe responsive.

embed project into website

Note: If you want to add your HoloBuilder project to a WordPress blog you need to first install the iframe plug-in. However, this only works if you are hosting your WordPress blog on your own server. If your blog is hosted by WordPress.com, there is, unfortunately, no way yet to embed a virtual tour.

Go to top!

 

Support

If you still have any questions that are not covered by this tutorial or you have suggestions for improvements, please do not hesitate to contact us at support@holobuilder.com!

Go to top!