Virtual Tour Creator

WordPress

Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to send a message on the link.

• codecanyon.net/user/Tean

Make sure you extract downloaded file from codecanyon, inside you will find file named: 'apvr.zip'. This is the plugin file you upload in WordPress panel!

Activate plugin

After you install plugin you will have to activate your license to start using the plugin.

To activate license you need to create account on the following link, where you will provide your PURCHASE CODE, and get TOKEN in return which you will then enter in plugin section to activate the plugin.

Instructions how to register

Access control panel here

This is made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses to easily track on which server licenses are being used.

How to update when new plugin version has been released?

Required scripts and styles for plugin to work:

- pannellum

Note: This plugin uses slighly modified version of pannellum script, meaning if you want to explore full capabilites of this tour builder, make sure you remove any pannellum version of might have in your page so our plugin can include its own version! Using other pannellum script might even break some of the existing pluign features!

Optional scripts and styles for plugin to work:

- Video Js

Note: Video Js is used to make video scenes. Video Js is also used to play 360 videos and live streaming (hsl, dash) in hotspots. If you dont use these features in virtual tours, you can disable videojs from loading.

You can still use normal HTML5 video in hotposts without Video Js.

- Font Awesome

Note: Font Awesome icons can be used for hotspots. Hotspots can also use image icons and svg, so Font Awesome is optional.

You can remove both Video Js and Font Awesome from loading in Global settings:

Tour size is set with CSS. Default width is 100% of parent container and 500px height. Its necesary to define tour height because panarama container is absolute by default.

You can edit size in Options / Miscellaneous tab:

If you want to modify CSS directly, you can edit this part in wp-content\plugins\apvr\source\css|apvr.css file:

.apvr-wrapper {
    position: relative;
    min-height: 500px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #111;
}

You can autoload tour on start and open first scene directly or you can show tour preview image and some text on tour start (before the first scene is loaded).

To show preview image before tour starts, go to Options / Autoload tab:

Display custom info about your tour. Opens when info button is clicked.

Set custom info in Options / Info box tab:

Displaying an equirectangular panorama. Requires single image.

If you have a partial panorama image (not full spherical), you can adjust it settings in Tour Manager / Edit Tour / Scene / Position tab:

For example, to limit horizontal movement when it reaches panorama edges, try to set Limit horizontal scene grab as the following.

Display a cube map panorama. Requires 6 images one for each side.

To display high-resolution panoramas, multiresolution feature must be used. This requires converting an equirectangular panorama into Pannellum’s multiresolution format using the generate.py script.

Some resourses on how to create multiresolution format:

Example of multiresolution panorama is located on plugin package / documentation / misc / multires directory.

To use this example copy multires directory to wp-content/uploads/apvr-file-dir directory in Wordpress.

And use following settings in multiresolution panorama:

Base Path: "multires"
Is base path absolute: 'no'
Path: "/%l/%s%y_%x"
Fallback Path: "/fallback/%s"
Extension: "jpg"
Tile Resolution: 512,
Max Level: 6
Cube Resolution: 8432

Or if you want to use absolute path to multires directory, set Is base path absolute to yes and add absolute Base path.

More details: https://pannellum.org/documentation/reference/#multires-specific-options

Equirectangular video. Requires video (mp4 recommended).

Why your video look bad quality?

Lets say you have 1440x720 video and you are trying to display it in viewer.

The resolution may look low (blurry). In regard to viewing resolution, a 720p equirectangular video, such as the one in your example, with Pannellum's default 100deg horizontal field of view is roughly equivalent to a 240p standard 16:9 video. If you go to YouTube and play a video at 240p, it also looks bad. For equirectangular video, you really want 4096px horizontal resolution, which in the projected view is similar to standard 720p video.

Requires HLS live streaming protocol.

Requires Dynamic Adaptive Streaming over HTTP, also known as MPEG-DASH.

Tour can contain one or more scenes. Scenes can be images or videos and they can even be mixed together in a single tour (meaning you can have tour consisting of several images and videos).

How to add scene?

Inside Tour manager, after you create at tour, you can add scenes inside:

Once you create scene, first you need to do is add scene image (or video, depending on scene type)

Now you have an image in the scene. This is an empty scene (meaning it does not contain anything except equirectangular image). This is the minimum required for tour to exist. This tour can now be published and used with shortcode.

Scene features explained

scene ID - unique scene ID

scene title

default - make this scene default on tour start

active - you can hide scene from showing in the tour by making it inactive 

views - comes from statistics (if statistics is used). Show how many times scene was viewed.

Display scene custom description

In scenes / Annotation tab add scene title, descripion.

Which is then shown on scene start.

You can display scene description on start of each scene (or scene that has description set).

This is will displayed above everything else in tour and user will need to click once anywhere for this description to hide before he can navigate the tour.

Scene description is set in Scene tab / General and HTML is allowed.

Activate Scene description to be shown on scene start in Options tab / Miscellaneous:

Scene can auto navigate through its hotspots one by one when presentation is enabled.

One you have created some hotspots in scene, you can enable scene presentation in Annotation tab:

Add audio to scene

Each scene can have different audio playing. Add audio to scene in Audio tab:

Note that audio autoplay (if set) is not guaranteed on scene start because browsers (especially mobile browsers) can block this feature, depending on the scenario.

Scene audio can also be started / stopped manually with button in controls, if this button is used:

Restrict scene access

You can restrict access to individual scene. Activate this feauture in Access tab:

Depending on the restrict type, you can get Redirect to login screen or Password screen on scene start:

Custom Restrict access screen

You can set up custom access screen by providing your own HTML in Options / Restrict access tab. Then this will be shown instead of Login screen.

Close Restrict scene access using API

You can manually close access screen using API method confirmAccessScreen function. This can be useful if you have custom Restrict access screen and then you want to close it on demand. Note that this method will enter scene so it behaves as scene access was confirmed positive. This method can be used to close both custom Restrict access screen and standard Login access screen.

If you want to have scene gallery thumbnails inside the tour:

Enable scene gallery in Options / Scene gallery tab:

And add thumbnail for each scene:

Note: if you dont add thumbnail for each scene, main scene image will be used as gallery thumbnail. This is not recommended since those are large images, so you should create small thumbnails for scene gallery!

Using scenes with video

To create a scene with video, select video when creating scene. Make sure you select correct type for your video (normal video, hls, dash stream)

Video scene has some additional settings compared to image scene:

Note that audio autoplay (if set) is not guaranteed on scene start because browsers (especially mobile browsers) can block this feature, depending on the scenario.

You can also set start and end time for video scene:

With video scene its possible to use feature of timed hotspots. This means you can have hotspots showing and hiding at specific video times.

How to use timed hotspots?

When you add hotspot to video scene, you can configure hotspot Start and end time:

Hotspots can be added to each scene. Scene can contain one or more hotspots. Hotspot can add different functionality to scenes like (opening popover or lightbox with different media, lead to another scene etc..)

How to add hotspots?

After you have screated a scene, go to hotspot tab where you can add hotspots:

Hotspots

Hotspot can have to following style

text (contains just text)

text + icon (icon can be image, SVG or Font Awesome)

embed hotspot (which contains image or video directly in the hotspot area)

embed 3d (same as embed except you can modify its 4 corners and make it confront the shape of some square object on the scene)

Hotspot can apply the following action when clicked

Hotspot POI (point of interest)

Open popover or lightbox with additional media inside (images, video etc)

image- show single image

audio - show single audio

video - show single video (mp4, hls, dash). Using hls, dash requires video Js script to be used!

video 360 - show single video (requires video Js script to be used!)

youtube - show Youtube single video

vimeo - show Vimeo single video

gallery - show mixed gallery containing of images, audio, video (mp4)

product dialog - show dialog of multiple images with captions and desciption (not related to WooCommerce!)

HTML - show any HTML (you need to provide additional CSS as well which you can add in plagin custom CSS tab or elsewhere in your theme)

iframe - show iframe url

pdf - show PDF document (basicially same as iframe)

google maps - show Google maps (basicially same as iframe)

external url - link to www url 

download - make file download

shortcode - execute shortcode, simple shortcode supported like [foo something="123"], nested might not work.

3d object - display interactive 3D models on the web in AR (glb / gltf / usdz)

Link to another scene

Hotspot can link to another scene in the tour

Look at something

Hotspot can look in some direction in the current scene

Hotspot features explained

hotspot ID - unique hotspot ID

hotspot title

active - you can hide hotspot from showing in the scene by making it inactive (additionaly you can use player APIto show hotspot on runtime)

interactions - comes from statistics (if statistics is used). Show how many times hotspot was clicked.

Hotspot can be set to hidden on scene start, then you can use API method showHotspot(slug) to show the hotspot when needed. This might be useful if you want to show hotspot after some user action or similar.

Hotspots can auto open their POI content (Point of interest) on scene start. This is only valid for View mode box (not modal).

After you add shotspot to scene, you can set it Point of interest content in Action tab and then set Auto open.

Note that its not advised to set a lot of hotspots to autoopen on start, first because they will occupy the screen with all opened popup windows, second, every popup Point of interest contains some content you set like video for example, so making lot of hotspots to autoopen will trigger each popup content to load (video etc...).

Add audio to hotspot

Each hotspot can have different audio playing. Add audio to hotspot in Audio tab:

Restrict hotspot access

You can restrict access to individual hotspots. Activate this feauture in Access tab:

Depending on the restrict type, you can get Redirect to login screen or Password screen on hotspot access:

Floor map for tour can be created in Floor map tab:

Floor map if used will appear on tour:

Additional settings for floor map are in Options / Floor map tab:

Using floor maps

Each tour can have one or more floor maps.

When you create a floor map, you have to provide a map image (if you have multiple maps in tour, its recommended that all map images have the same size).

Floor map can contain pins. Cliking on pin in the map can lead to another scene.

Note that there is no connection between actual scenes and floor maps. Meaning if you have multiple floor maps, they do not change as you change scenes. You can however use API method loadMap(MAP_ID) to open specific floor map on demand.

You can add floating "guide" video on each scene (located in bottom right) which can serve as guidance over the tour for example. Guide video can be added for each scene individually.

Add guide video in Scene / Guide tab:

Set start image to show on tour load start

Image to show on tour start after first scene loads. Useful if you want to provide instructions on tour navigation for example.

Set start image in Tour Manager / Edit Tour / Options / Tour Start tab:

You can change some of the gallery CSS in Tour Manager / Edit Tour / Options / Colors tab:

Note that for this feauture to work, option in Global settings needs to be activated:

You can turn off this option if you want to style gallery with your own CSS.

Supported adverts in tour:

1. Add videos between scenes

Add one or more videos (html5, Youtube, Vimeo) which will be shown between each scene. Videos can be randomized and you can limit number of video shown per scene (this is useful if you have lots of advert videos created and you want, for example, to show only 2 videos per scene, then using randomize function, you can display different videos per scene).

How to use

Adverts are created in ad manager section.

Once you create new Ad section you can add any number of videos inside. Then using shortcode attribute (ad_id) you can attach it to any tour, for exmaple:

Tour shortcode looks like this:

You can use more than one tour in the same page. However if you are trying to show the same tour multiple times in the same page, you can try to following method (lets say our tour_id is "1")

Then we add additonal instance_id in shortocde (each one having unique number!) to differentiate between tours.

Activate Google Analytics in Tour Manager / Edit Tour / Options / Google Analytics tab:

Setup Custom definitions

1. Sign in to your Google Analytics account

2. Go to the Admin panel by clicking the Cog Icon in the bottom left of your screen

3. Click on the property where you want to add custom dimensions

4. Click on Custom Definitions in the left menu, then click on Create Custom Dimension

5. Create following definitions

scene_title
hotspot_title

Event display

Using custom definitions, following events will be logged:

hotspot_click
before_scene_change

To activate tour statistics go to Tour Manager / Edit Tour / Options / Miscellaneous tab:

Once you activate statistics, you can track tour statistics in Statistics plugin menu.

Importing demo tours

You can import some demo tours that come with the plugin. Use the following steps to import demo tour:

1. After extracting plugin package, go to documentation / misc / demo tours directory. From there copy any of the included tours (zip files) into WordPress directory wp/wp-content/uploads/apvr-file-dir and extract them.

2. Go to Plugin menu - Tour Manager, Import demo tour button and in upload menu select file with .txt extension (which contains all the tour data). There is only single .txt file in every tour directory. After selecting, demo tour will be created and you can use it.

Exporting and Importing your own tours

Each tour you create can be exported and later imported.

Export tour

Export individual tour in Tour manager section. Note that this feature will not be available if PHP ZIP extension is not enabled on your server. After exporting zip file with this tour name will be created on your computer.

Import tour

You can import previously exported tours using import button in Tour manager section.

If you are importing tours on different domain, you might want to use the feature of Domain rename where you can rename all the urls used in the tour to different domain.

Domain rename is located in Tour manager / Options / Domain rename tab:

Allowing users to create their own tours, ads and view statistics.

By default only admin can create tours. This is set with Tour Capability role option in Global Settings / Users tab:

If you want to allow users with role below the admin to create their own tours, you can assign lower capability, for example publish_posts.

Tour language can be set in the Tour Manager / Edit Tour / Options / Translation tab:

You can choose whether to show language selector in the front page, which allows users to change language.

Available callbacks:

apvr_playerID.addEventListener('setupDone', function(e, data){

    //called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)

})

apvr_playerID.addEventListener("before_scene_change", function(data){

    //called before scene change, returns (instance, instanceName, data)

    data = active scene data

})

apvr_playerID.addEventListener("after_scene_load", function(data){

    //called after scene change, returns (instance, instanceName, data)

    data = active scene data

})

apvr_playerID.addEventListener("video_scene_end", function(data){

    //called when video scnee finishes, returns (instance, instanceName, data)

    data = active scene data

})

apvr_playerID.addEventListener("pin_click", function(data){

    //called on floor map pin click, returns (instance, instanceName, data)

    data = next scene data (to which pin leads to)

})

apvr_playerID.addEventListener("hotspot_click", function(data){

    //called on hotspot click, returns (instance, instanceName, data)

    data = active scene data

})

apvr_playerID.addEventListener("fullscreenEnter", function(data){

    //called before theater enter, returns (instance, instanceName, data)

    data = active scene data

})

apvr_playerID.addEventListener("fullscreenExit", function(data){

    //called on fullscreen exit, returns (instance, instanceName, data)

    data = active scene data

})


    

apvr_playerID is constructed from apvr_player + ID.

ID is generated automatically starting from 0 for every new tour you place in page. For example, if you add one tour in page, ID will be 0 (so it becomes apvr_player0).

You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This tour will have ID 1):

How to use callbacks in WordPress post:

Following api methods are supported:

apvr_playerID.nextScene(); //load next scene

apvr_playerID.previousScene(); //load previous scene

apvr_playerID.loadScene(slug); //load scene by slug (can be set in Scenes / General tab - Scene slug)

apvr_playerID.isSceneLoaded();//check if scene is loaded

apvr_playerID.getActiveSceneData();//get active scene data (title, pitch, yaw, description, hotspots etc...)



apvr_playerID.getSceneHotspots();//get active scene hotspots

apvr_playerID.toggleHotspots();//show / hide all hotspots on scene



apvr_playerID.toggleMovement(boolean);//disable / enable mouse pan on panorama

apvr_playerID.toggleNav(boolean);//show / hide navigation elements (scene gallery, scene next, previous buttons, scene pan, zoom)







apvr_playerID.showHotspot(slug); //show hotspot by slug (if hotspot was set to hidden)

apvr_playerID.hideHotspot(slug); //hide hotspot by slug



apvr_playerID.stopPresentation(); //stop scene presentation

apvr_playerID.startPresentation(); //start scene presentation


apvr_playerID.skipAd(); //skip active advert (video before scene start)



apvr_playerID.startAutoRotate(); //start panorama autorotate

apvr_playerID.stopAutoRotate(); //stop panorama autorotate



apvr_playerID.confirmAccessScreen(); //close Restrict access screen. Note that this method will enter scene so it behaves as scene access was confirmed positive. This method can be used to close both custom Restrict access screen and standard Login access screen.


apvr_playerID.toggleFloorPlan(); //show / hide floop map

apvr_playerID.loadMap(map_id); //show map in floor plan (if you have multiple maps you can open floor map on demand)




    

apvr_playerID is constructed from apvr_player + ID.

ID is generated automatically starting from 0 for every new tour you place in page. For example, if you add one tour in page, ID will be 0 (so it becomes apvr_player0).

You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This tour will have ID 1):

How to use api methods in WordPress post?

Use following code examples in post area.

Load next scene:

<a onclick="nextScene();return false;" href="#">Load next scene </a>
 <script>
    function nextScene(){   
        window.apvr_player0.nextScene(); return false;  
    };
 </script>

Adverts and Annotations AddOn for Virtual Tour is available on the following link

Using Advert and Annotation AddOn, you can display all kinds of video, audio, image, HTML adverts, Adsense inside the Virtual tour. Adverts can be played before each scene begins, and while each scene is shown. Adverts are supported for both video scene and image panorama scene.

Adverts can be set to multiple, they can be randomized, they can only be included in specific scenes, Adverts can be limited per specific User Roles in WordPress.. and much more!

Advert options

Options for adverts are located in Tour manager / Edit Tour / Options / Adverts tab:

Using Adverts AddOn

First make sure addOn is activated together with main Virtual Tour plugin.

Also, make sure you have the latest compatible version of Virtual Tour plugin.

Register plugin inside Tour manager / Options / Adverts tab

Registration is done the same way as registering main plugin.

Advert compatibility

Some type of mid adverts cannot work together!

1. You cannot mix Mid adverts and Repeat adverts together in one scene. They all belong to midroll type adverts that happen while scene in Tour is shown. Use either type of them, but not mixed!

Adverts before scene starts

One or more adverts can be placed before scene starts in Tour and they will all play in sequence (if multiple).

Example of audio advert shown before scene is revealed.

To add preroll inside the adverts tab, choose preroll and select type.

Preroll supports video, audio, image (with duration defined), Youtube single and Vimeo single video.

Preroll adverts are always shown in full size above the tour (the size of the tour so they completely block the tour ) and user must watch advert until Tour is showed again.

Adverts during scene

One or more adverts can be placed to shwo when main scene is active.

To add midroll inside the adverts tab, choose midroll and select type.

Midroll supports video, audio, image, Youtube single and Vimeo single video.

Midroll also supports placing your own custom HTML as advert (with specific time duration), showing HTML in repeated intervals (repeat the same HTML every 10 seconds for example).

Midroll adverts can be added to both video and image panorama scene.

Its important to note that you cannot mix all these above mentioned midroll types together! So you need to chose one or more midroll type, but not mix them. For example, if you have video ad showing at 10 seconds and have repeated HTML ad showing every 15 seconds will not work together!

Midroll adverts can be full size (size of the tour) or they can be partial size. When midroll advert is full size, tour will be paused until advert completes. If the advert is partial size, tour can continue independent of advert. Partial size adverts can be positioned anywhere above the tour.

Adding custom HTML in advert

Custom HTML can be show in advert (your own element in page can be shown in Tour as advert)

To add Custom HTML advert inside the adverts tab, choose midroll and select Show HTML.

Inside the path field you enter ID attribute of your element (for example #my-div).

Note that you need to have element with ID attribute defined in path present somewhere in page body.

Remember to add your own CSS for this element (#my-div)

Alternative is to provide your own HTML to show if you dont want to use the method above.

Show custom HTML that repeat every X seconds while Tour is shown.

Same as HTML adverts except they repeat every x seconds.

One or more HTML Repeat adverts can be defined to show. If multiple are added each one will show in sequence.

To add Repeat advert inside the adverts tab, choose midroll and select Show HTML on repeated intervals.

Show Annotations above the Tour

Annotations can be showed above the Tour in timed intervals. Annotations can be images, HMTL, Adsense, iframe elements. Start and end time for each annotations can be defined. Multiple annotations can be showed at a time.

Example of annotations shown during scene in Tour.

To add Annotation inside the Annotations tab, choose Add Annotation.

Display HTML form above tour

Example of annotation as HTML form

1. Include HTML in annotation:

<div class="my-inline-form-wrap">
    <div class="my-inline-form">

        <form id="my-form-example" class="my-form" action="#" onsubmit="customCallback();return false;">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name.." required="">

            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name.." required="">

            <label for="country">Country</label>
            <select id="country" name="country">
              <option value="australia">Australia</option>
              <option value="canada">Canada</option>
              <option value="usa">USA</option>
              <option value="not">Not listed</option>
            </select>
          
            <input type="submit" value="Submit">
        </form>

    </div>    
</div>  

2. Include CSS for annotation (either in your own CSS file or in plugin custom CSS section):

.my-inline-form-wrap{
    background-color: #fff;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.my-inline-form{
    background-color: #f2f2f2;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 10px;
}
.my-form input[type=text],.my-form select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.my-form input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.my-form input[type=submit]:hover {
  background-color: #45a049;
}

.my-form div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}  

3. Optional, include javascript function call on form submit

Form has a custom function callback added in HTML on form submit (customCallback) which then removes annotation on form submit

<script type="text/javascript">
function customCallback() {
	const form = document.getElementById("my-form-example");
	console.log(form )
	form.closest('.apvr-annotation').remove()//remove annotation on form submit
}
</script>  
    
    

Adverts can be resticted to show in specific cases.

Options for restrict ads are located in Tour manager / Edit Tour / Options / Adverts tab:

Restrict ads for specific User roles

Restrict ads for specific User roles in Tour manager / Edit Tour / Options / Adverts tab:

Set advert per Scene

Set advert to be shown for specific Scene in Tour only in Tour manager / Edit Tour / Scenes / Adverts tab:

Then when you generate Shortcode and choose Individual per scene:

Only scenes that have adverts set as above will display adverts. Other scenes with no ad set will not have ads.

Showing advert skip button

Skip button can be showed for Prerroll advers.

Enable skip button in Tour Manager / Edit Tour / Options / Adverts tab:

Then when adding preroll advert you can set skip time:

Following functions are available to control adverts externally.

    player.removeAd();//remove advert. This will skip advert which is currently playing. You can use this if advert does not have a skip button (for example) and requires user action to continue viewing Tour after advert. 


    player.removeAnnotation(id)//remove annotation (id = annotation data-id attribute)

 

How to use API methods in WordPress text editor:

<a onclick="closeAdvert();return false;" href="#">Close Advert </a>
<script type="text/javascript">
    function closeAdvert(){   
        window.avpr_playerID.removeAd(); 
    };
</script>   
    

apvr_playerID is constructed from apvr_player + ID.

ID is generated automatically starting from 0 for every new Tour you place in page. For example, if you add one Tour in page, ID will be 0 (so it becomes apvr_player0).

You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This Tour will have ID 1):

Showcase AddOn is available on the following link

Using Showcase AddOn

First make sure addOn is activated together with main Virtual Tour Creator plugin.

Also, make sure you have the latest version of main Virtual Tour Creator plugin.

Register plugin inside Plugin menu / Showcase tab

Registration is done the same way as registering main plugin.

One you have created one or more tours in Tour manager section, you can create a showcase and display it in your page. Showcase will use tour title, description and panorama image or video, or thumbnail from tour scene.

Setting details for showcase

Showcase will use tour title, description and panorama image or video, or thumbnail from tour scene.

Tour title is the title or the tour.

Tour description can be set in Tour Manager / Edit Tour / Options / About tab:

You can also set tour tags there (if you want to use tags for filtering tours) and tour link (if you want each tour in showcase when clicked to go to that link).

Tours in showcase can be sorted by several factors:

You can adjust sorting in Showcase plugin menu / General settings:

Tags enable you to filter tours in Showcase.

You can assign tags to each tour in Tour Manager / Edit Tour / Options / About tab:

Activate tags in Showcase plugin menu / General settings:

Load more showcase items as user scroll down the page. Use this if you have a lot of showcases and you dont want to show them all on page load to speed up page loading.

Activate load more in Showcase plugin menu / General settings:

By default when you hover with a mouse over showcase item, tour preview will automatically show.

If Autoplay mode is active, then hover with a mouse is disabled, and tour previews will play according to Autoplay mode settings.

Activate Autoplay mode in Showcase plugin menu / General settings:

You can choose an action to perform when user clicks on showcase item.

Activate this feature in Showcase plugin menu / General settings:

1. Open tour in same page will open your tour in popup div which includes header with your logo.

2. Tour link will open any url you set for tour. Tour link can be set in Tour Manager / Edit Tour / Options / About tab:

You can choose what tours to include in your showcase (all or some) in Showcase plugin menu / Shortcode generator:.

You can also include multiple showcases in single page. This could be useful potentially if you want to group tours for example.

WooCommerce Product AddOn is available on the following link

Using WooCommerce Product AddOn for Virtual Tour Creator For WordPress You can attach WooCommerce products to hotspots in scenes. WooCommerce Products will display directly in Virtual tour and users can add products to cart using ajax, without navigating away from the Virtual tour.

Using WooCommerce Product AddOn

First make sure addOn is activated together with main Virtual Tour Creator plugin.

Also, make sure you have the latest compatible version of main Virtual Tour Creator plugin.

Register plugin inside Tour manager / edit tour / Options / WooCommerce Product tab

Registration is done the same way as registering main plugin.

Once you have created a tour and added scenes to the tour, you can add hotspots to any scene. Then you can attach WooCommerce product to open when hotspot is clicked for example.

Features and options:

• Add WooCommerce products to Virtual tour
• Attach products to hotspots in scenes
• Support for simple and variable products (plus others like external etc)
• Ajax Add to cart directly in Virtual tour
• Support for unlimited products
• Display products in box popup or modal window in Virtual tour (like other hotspots)
• This addon works on front page with WooCommerce installed

Add product to hotspot

1. Create virtual tour

2. Create scene in tour

3. Add panorama image to scene

4. Add hotspot to scene

5. Attach WooCommerce product to hotspot

6. Display product on frontpage when hotspot is triggered and add product to cart with ajax

Notes:

Product can be attached to hotspot in scene

Hotspot can be opened in popup window or in modal window (lightbox)

Display cart after product added to cart

Choose option to Display cart after product added to cart

Cart popup will open above the tour to show cart content

Export HTML AddOn is available on the following link

Using Export HTML AddOn for Virtual Tour Creator For WordPress You can export your virtual tours as a standalone pages which then can be used in any HTML page without any other requirements (like using WordPress etc).

All the assets required for exported tour will automatically be packed in a tour directory with other data like javascript and css files.

Using Export HTML AddOn

First make sure addOn is activated together with main Virtual Tour Creator plugin.

Also, make sure you have the latest compatible version of main Virtual Tour Creator plugin.

Register plugin inside Tour manager / edit tour / Options / Export HTML tab

Registration is done the same way as registering main plugin.

Access export feature in Tour manager page:

Export method uses php Zip archive or Pclzip class to pack everything and download to your computer.

Note that this process might take a while, especially if you have lots of big assetts in the tour like videos).

Troubleshooting

If the process fails for some reason do the following:

Check browser javascript developer console if any messages or errors appear. How to open browser javascript developer console

Check server PHP error log (in cPanel or other manager depending on the server used)

You might need to increase memory limit in PHP if you get following error:

Fatal error: Maximum execution time of 30 seconds exceeded.

define( 'WP_MAX_MEMORY_LIMIT' , '512M' );

ini_set('max_execution_time', 0); 

Export structure

Export feature will create the following directories:

index.html - main html file containing HTML structure (head, body) with all neccessary css and javascript asssets for the tour.

assets - folder containing all assets (images, video etc) used in this tour

css - folder containing css file 

js - folder containing javascript files

fa - folder containing font awesome assets (if font awesome if used in the tour)

pannellum - folder containing pannellum scripts (which is used for virtual tour)

videojs - folder containing videojs scripts  (if videojs if used in the tour)

HTML structure

Structure of index.html file. This is na example. The end result might differ depending on how to tour was created.

<HEAD>

/* css files */

<link rel="stylesheet" href="http://localhost:8888/xampp/wp/wp-content/plugins/apvr/source/fa/css/all.min.css"/>

<link rel="stylesheet" href="https://vjs.zencdn.net/8.0.4/video-js.css" />

<link rel="stylesheet" href="pannellum/css/pannellum.css" />

<link rel="stylesheet" href="css/animate.min.css" />

<link rel="stylesheet" href="css/apvr.css" />
<link rel="stylesheet" href="css/aplbox.css" />



/* custom css for the colors */

<style>
*{
    margin:0;
    padding:0;
    border:0;
    outline:none;
}
a{ 
    text-decoration: none; 
}
body{
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.apvr-wrapper {
    position: absolute;
}

#apvr-wrapper .apvr-main-controls-wrapper .apvr-controls-icon svg,
#apvr-wrapper .apvr-scene-controls-wrapper .apvr-controls-icon svg,
#apvr-wrapper .apvr-scene-gallery-wrapper .apvr-controls-icon svg,
#apvr-wrapper .apvr-controls-nav .apvr-controls-icon svg{
color:rgb(231,231,231);
}
@media (hover: hover) {
#apvr-wrapper .apvr-main-controls-wrapper .apvr-controls-icon:hover svg,
#apvr-wrapper .apvr-scene-controls-wrapper .apvr-controls-icon:hover svg,
#apvr-wrapper .apvr-scene-gallery-wrapper .apvr-controls-icon:hover svg,
#apvr-wrapper .apvr-controls-nav .apvr-controls-icon:hover svg{
	color:rgb(255,49,88);
}

...

</style>


/* links to javascript files */

<script src="pannellum/js/libpannellum.js"></script>
<script src="pannellum/js/pannellum.js"></script>

<script src="js/numeric.min.js"></script>

<script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-vr@2.0.0/dist/videojs-vr.min.js"></script>

<script src="js/aplbox.js"></script>
<script src="js/share_manager.js"></script>

<script src="js/admin_player_manager2.js"></script>
<script src="js/new.js"></script>



</HEAD>



<BODY>

/* wrapper div holding the tour */

<div id="apvr-wrapper"></div>

/* tour settings */

<script type="text/javascript">

    var settings = {
    	APVR_FILE_DIR_URL: "http://localhost:8888/xampp/wp/wp-content/uploads/apvr-file-dir/",
        instanceName: "apvr_player1",
        sourcePath: "",

        ...

    }

    window.apvr_player1 = new apvr(document.getElementById("apvr-wrapper"), settings);
    
</script>    

</BODY>

Tour not loading

It's important to have a full browser url and https when you try to access a tour url, for example if your domain has the following url and you have been adding images or video on this url:

https://www.your-domain.com/...

https://your-domain.com/...

Using wrong url may cause CORS issue when tour tries to load image or video for panorama.

Using other similar plugins on your website.

Our plugin uses sligthly modified version of javascript panellum files. If you have other plugins of this type on your website which use the same engine (panneullum), you might need to deactivate other plugin because our plugin requires use of its own pannellum.js file!

If you are getting lower size resolution images in scenes

Note that our plugin DOES NOT resize the images you provide for your scenes, it just uses them. If you uploaded large resolution image to scene, but when you run the tour you get low resolution image, some plugin of yours (like w3 total cache plugin for example) must be doing this to your images.

Scene not loading

Use HTTPS url and check your panorama images. Try to reduce the scene image size, and size should be power of two like 4096x2048, 2048x1024 etc

If you are loading images across domain, you need need to have CORS configured!

Using gyroscope requires HTTPS

Note that using gyroscope in tour requires HTTPS url

Plugin does not work as expected

If the plugin does not work as expected, try the following tests to see if it makes a difference and what could be causing an issue:

1. Update to latest plugin files available on Codecanyon

2. Switch to default WordPress theme

3. Check for errors in browser developer console (Chrome F12 key, Console tab)

4. Try to deactivate any 3rd party plugins (the ones that not come with WordPress)

5. If you still have issues after you have done all changes above, you can send a message at http://codecanyon.net/user/Tean#contact , provide a link to your live page, and a temporary user and password for your wordpress admin panel so we can have a look.

How to contact us?

If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.