Getting Started

Easy Virtual Tour Builder is a WordPress / WooCommerce plugin for interactive 360 virtual tours built from equirectangular panoramas (JPG / PNG / KTX2). You can create multiple scenes, add markers/hotspots, set camera and floor-map positions, and display rich tooltip/info window content.

It is built using EcmaScript6 using the latest JavaScript and CSS standards.

Please optimize panoramas before upload to improve loading speed on desktop and mobile. Keep image dimensions appropriate for your use case and compress assets when possible.

For best performance, use lightweight images for mobile scenes and keep tooltip/info media optimized.

The virtual tour uses vanilla JavaScript and has no external runtime dependencies.

The virtual tour is using AJAX to save backend data so the page will not refresh when saving settings.

Installation

After purchasing the plugin, inside the main zip file you will find installable plugin fwdevtb.zip.

Installation steps

1. In your WordPress Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdevtb.zip plugin file that you downloaded from CodeCanyon.
3. Click on install now.
4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version (this will not remove saved tours/scenes settings), then install the new version by following the installation steps above. If you use a cache plugin, clear cache to ensure updated files are loaded.

Usage

The plugin workflow is centered around the Virtual Tour Manager, where you create tours, add scenes, configure markers, and adjust viewer settings. Global styling is updated directly in the plugin stylesheet file.

I have created a video tutorial, I encourage you to watch it from start to end.

Add a Virtual Tour & Scenes

Open the plugin Virtual Tour Manager and click Add New Virtual Tour. After creating it, open Edit Virtual Tour Settings, then add scenes and configure camera / floor-map positions as needed, video tutorial.

For each scene, add the main panorama image and (optionally) a mobile image. If a mobile image is not set, the main scene image is used as fallback.

After scenes are added, you can place markers, assign target scenes, and configure marker tooltip/info content, video tutorial.

Shortcode

Copy the shortcode from the virtual tour card and paste it into any page, post, or custom post type in a shortcode block, video tutorial.

You can use the virtual tour name or numeric ID:

[fwdevtb id="my-virtual-tour"]
[fwdevtb id="1"]

General Settings

This section allows you to configure the virtual tour like the display type, virtual tour size and overall settings like the background color, here you can set up the lightbox as well example below, add the code below in an HTML block, and set the display type to lightbox, video tutorial here.

<script type="text/javascript">
		document.addEventListener('DOMContentLoaded', function(){
				fwdevtbSetupModel0();
		});
</script>

<!-- Add a button -->
<button onclick="fwdevtbSetupModel0()">Open in lightbox</button>

Floor Map

The floor map navigator lets you display a floor plan image inside the virtual tour and show the active scene position on that map. To use it, add a floor plan image in the virtual tour settings and then set the floor map marker position for each scene, video tutorial

In the virtual tour settings you can configure the floor map window image, width, gap, background color, border size, border color, orientation icon color, marker radius, marker scale, and the expand button options.

In each scene dialog, use Set floormap marker position to place the scene on the floor plan. This is what allows the navigator to reflect the correct room or area when the visitor switches scenes.

If no floor plan image is assigned, the floor map navigator will not be displayed. If you want users to enlarge the navigator, enable the expand button and set its position and tooltip text in the virtual tour settings.

Preloader

This section allows you to configure the preloader, set the preloader color, size, text and other visual settings.

Info Window

This section allows you to configure the global info window and marker info content.

To add custom markup (images / embeds), switch to the editor Code/Text tab and paste HTML directly.

Controller

This section allows you to configure the virtual tour contoller, remove add buttons like zoom, fullscreen etc, and more, video tutorial.

Orbital Controls

This section allows you to configure virtual tour orbital controls. These controls allow zooming, panning, and rotating the scene/camera view.

Global CSS

The old CSS editor is no longer part of the plugin. To update the global styles, edit the plugin stylesheet file /wp-content/plugins/easy-virtual-tour-builder/css/global.css.

If the Plugin File Editor is enabled in WordPress, go to Plugins > Plugin File Editor, select Easy Virtual Tour Builder, then open css/global.css, update the rules you need, and save the file.

If the Plugin File Editor is disabled on your site, edit the same file using your hosting file manager, SFTP, or your local deployment workflow, then upload the updated file back to the plugin folder.

After changing global.css, clear any WordPress cache, caching plugin cache, server cache, CDN cache, and your browser cache. If cache is not cleared, the old stylesheet may continue to load and your CSS changes may appear not to work.

WooCommerce

Please look into the WordPress section to understand how to configure the virtual tour.

Here is a video tutorial explaining how to use in WooCommerce, please note that the lightbox display type will not work with the WooCommerce version, video tutorial.

API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from the virtual tour externally.

You can access the player instances by their order in the page with the fwdevtb name with its order after it, starting from 0. For example if you have 2 instances their names are fwdevtb0 and fwdevtb1. Here is an example how to use the API in the WordPress editor or in a code section of your page:

<script type="text/javascript">
							
		// API.
		let fwdevtbAPI = setInterval(() =>{
				if(window['fwdevtb0']){
					console.log('EVTB API ready')
					clearInterval(fwdevtbAPI);

					// Register the FULL_SCREEN event.
					fwdevtb0.addEventListener(FWDEVTB.FULL_SCREEN, onFullScreen);
				}
		}, 100);

		// Listen for the FULL_SCREEN event.
		function onFullScreen(e){
			console.log(e)
		}

</script>

<!-- Add a button -->
<button onclick="fwdevtb0.zoom('in')">Zoom in</button>

Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like fwdevtb0.methodName( /* arguments */ ), please note that fwdevtb0 is the virtual tour instance name, if you are using multiple virtual tours don't forget to set the instance unique for each instance like this fwdevtb1, fwdevtb2, fwdevtb3, etc... depending on how many virtual tours are added.

zoom

.zoom(direction:String)

Zoom in or out the virtual tour view.

Parameters

direction (String) - this can be in or out.

pan

.pan(direction:String)

Pan the current view.

Parameters

direction (String) - this can be up, down, left, or right.

getCameraPosition

.getCameraPosition():Object

Returns an object with the current camera position and controls target values.

setCameraPostion

.setCameraPostion(cameraX:Number, cameraY:Number, cameraZ:Number, controlsX:Number, controlsY:Number, controlsZ:Number):void

Set the camera position and controls target. The public API method name is setCameraPostion.

showInfoWindow

.showInfoWindow(htmlContent:String):void

Show the info window with custom HTML content. If no HTML is passed, the global info window content is used.

Parameters

htmlContent (String) - this HTML content to show in the info window.

playAutoRotate

.playAutoRotate():void

Start auto-rotation.

pauseAutoRotate

.pauseAutoRotate():void

Pause auto-rotation.

goToPage

.goToPage(pageId:Number):void

Go to a scene by its numeric index.

goToItem

.goToItem(itemName:String):void

Go to a scene by its scene name.

goFullScreen

.goFullScreen():void

Set the virtual tour in fullscreen.

goNormalScreen

.goNormalScreen():void

Set the virtual tour in normal screen.

destroy

.destroy():void

Destroy the virtual tour and remove it from DOM.

Events

Easy Virtual Tour Builder exposes public events through the addEventListener method on the virtual tour instance.

The events must be registered when the API is ready.

<script type="text/javascript">
							
		// API.
		let fwdevtbAPI = setInterval(() =>{
				if(window['fwdevtb0']){
					console.log('EVTB API ready')
					clearInterval(fwdevtbAPI);

					// Register the FULL_SCREEN event.
					fwdevtb0.addEventListener(FWDEVTB.FULL_SCREEN, onFullScreen);
				}
		}, 100);

		// Listen for the FULL_SCREEN event.
		function onFullScreen(e){
			console.log(e)
		}

</script>

FWDEVTB.NORMAL_SCREEN

Dispatched when the virtual tour goes to normal screen.

FWDEVTB.FULL_SCREEN

Dispatched when the virtual tour goes in full screen.

FWDEVTB.START_TO_LOAD

Dispatched when the virtual tour starts loading.

FWDEVTB.LOAD_PROGRESS

Dispatched while virtual tour loading is in progress; includes loading progress details.

FWDEVTB.LOAD_COMPLETE

Dispatched when virtual tour loading is complete.

FWDEVTB.AUTOROTATE_PLAY

Dispatched when auto-rotation starts.

FWDEVTB.AUTOROTATE_PAUSE

Dispatched when auto-rotation is paused.

FWDEVTB.TABLE_OF_CONTENT_ON

Dispatched when the table of contents is opened from the controller.

FWDEVTB.SET_CAMERA_POSITION

Dispatched when a camera position is selected or copied; includes the camera position name.

FWDEVTB.SET_MARKER_OR_CAMERA_POSITION

Dispatched when a marker or camera-position related action is returned from the viewer tools.

FWDEVTB.ERROR

Dispatched when a loading or runtime error occurs; includes the error message.

WordPress / WooCommerce Documentation

Getting Started

Installation

Installation steps

Update

Usage

Add a Virtual Tour & Scenes

Shortcode

General Settings

Floor Map

Preloader

Info Window

Controller

Orbital Controls

Global CSS

WooCommerce

API - Application Programming Interface

Methods

zoom

Parameters

pan

Parameters

getCameraPosition

setCameraPostion

showInfoWindow

Parameters

playAutoRotate

pauseAutoRotate

goToPage

goToItem

goFullScreen

goNormalScreen

destroy

Events

FWDEVTB.NORMAL_SCREEN

FWDEVTB.FULL_SCREEN

FWDEVTB.START_TO_LOAD

FWDEVTB.LOAD_PROGRESS

FWDEVTB.LOAD_COMPLETE

FWDEVTB.AUTOROTATE_PLAY

FWDEVTB.AUTOROTATE_PAUSE

FWDEVTB.TABLE_OF_CONTENT_ON

FWDEVTB.SET_CAMERA_POSITION

FWDEVTB.SET_MARKER_OR_CAMERA_POSITION

FWDEVTB.ERROR