Prerequisites

Essential requirements before implementing the Search Pro system in your 3DVista virtual tour.

  • 3DVista Virtual Tour (desktop application)
  • Text/Code Editor (VS Code, Sublime Text, etc.)
  • Search Pro V3 Folder (from Search_Pro-V3.zip)
  • Web Server Access (hosting platform with file upload capability)

File Organization

Properly organize and understand the Search Pro file structure for seamless integration.

Unzip and Place the Search Folder

Extract the Archive

Locate Search_Pro-V3.zip and extract it. Inside you'll find the search-pro-v3/ folder containing all plugin components.

Create Backup Copy

Make a backup copy of search-pro-v3/ somewhere safe before making any modifications.

Directory Structure

The search-pro-v3/ folder contains:

search-pro-v3/ Directory Structure
assets/ Image assets and thumbnails
business-data/ Business data files
config/ Configuration files
css/ Stylesheet files
js/ JavaScript modules
dashboard/ Control panel interface
extras/ Integration snippets
fuse.js Search library
search-v3.js Main search engine
Key Files for Implementation:
  • extras/Button.js - JavaScript for 3DVista button action
  • extras/tour_index_update.txt - HTML snippet for index.html
  • config/search-pro-config.js - Exported configuration file
  • dashboard/control-panel-v3.html - Configuration interface

Connect Button Action in 3DVista

The search system requires a button trigger. It doesn't auto-initialize on page load.

Implementation Steps

Get the Button Code

Open search-pro-v3/extras/Button.js in your editor and copy the entire file content.

Create Button in 3DVista

Open your tour in 3DVista → Go to Skin tab → Add an Icon Button → Choose an icon and position it → In the Actions panel, choose Execute JavaScript (JS)

Paste the Code

In the JavaScript editor window, paste the content from Button.js (no modifications needed) and click Done.

Preview and Publish

Click Preview in 3DVista to save changes, then Publish → Web/Mobile to generate your tour files.

Important: The button code must remain exactly as provided. Do not rename functions, IDs, or signatures that the engine expects.

How the Button Works

  • On first click, initializes the Search system and looks for the search UI container
  • On subsequent clicks, toggles the search panel open/closed
  • Acts as the official entry point to the search system

Update Tour's index.html

Inject the required script tags in the correct order. Loading order is critical for proper functionality.

Loading Order Matters: Configuration file must load after the search engine script.

For Tours WITHOUT Loading Screen

Replace the entire <body> section of your tour's index.html with:

<body>
  <!-- Tour container loads first - DO NOT TOUCH -->
  <div id="viewer" class="fill-viewport"></div>

  <!-- Load main search engine script BEFORE config file -->
  <script src="search-pro-v3/search-v3.js"></script>

  <!-- Load config file exported from Control Panel Dashboard AFTER search file -->
  <script src="search-pro-v3/config/search-pro-config.js"></script>
</body>

For Tours WITH 3DVista Loading Screen

Place the search scripts after the preload block:

<body>
  <div id="preloadContainer" class="fill-viewport">
    <!-- 3DVista's preload markup -->
  </div>

  <!-- Tour container loads first - DO NOT TOUCH -->
  <div id="viewer" class="fill-viewport"></div>

  <!-- Load main search engine script BEFORE config file -->
  <script src="search-pro-v3/search-v3.js"></script>

  <!-- Load config file exported from Control Panel Dashboard AFTER search file -->
  <script src="search-pro-v3/config/search-pro-config.js"></script>
</body>

Pathing Rules

  • search-pro-v3/ must sit next to your tour's index.html (same directory level)
  • The script paths shown are relative and assume that layout
  • If you place the folder elsewhere, adjust the src paths accordingly

Upload Files to Server

Deploy your tour and search system files to your web hosting platform.

Server Structure

Upload both the tour folder and search-pro-v3 folder so your live structure looks like:

Project Directory Structure
your-tour/
index.html Tour entry point
skin/ 3DVista tour assets
(other 3DVista assets...)
search-pro-v3/
config/ Configuration files
search-pro-config.js Exported configuration file
extras/ Integration snippets
Button.js JavaScript for 3DVista button action
tour_index_update.txt HTML snippet for index.html
js/ Dashboard scripts
css/ Stylesheet files
fuse.js Search library Folder
search-v3.js Main search engine
CDN Note: If you use a CDN, ensure it serves .js, .json, and .css files with proper Content-Type headers, and clear any caches after upload.

Minimal "Works Everywhere" Rules

  • Order matters: search-v3.js must load before config
  • Don't alter the button JS action - it's the official entry point
  • Keep search-pro-v3/ self-contained so you can drop it into any tour

Search Pro Dashboard Usage

Access and use the standalone settings interface to configure your search system.

Open the Dashboard

Verify File Upload

Ensure you've uploaded the entire search-pro-v3/ folder to the same directory level as your tour's index.html.

Access Control Panel

In your browser, open the control panel directly (replace with your domain/path): https://your-domain.com/search-pro-v3/dashboard/control-panel-v3.html

Keep Two Tabs Open

Maintain one tab with your tour and one with the dashboard for quick preview testing.

Troubleshooting: If the page shows 404 error, double-check your directory path. Typos and subfolder misplacements are the most common cause.

Making Changes

Adjust Settings

Configure settings across tabs: General, Appearance, Display, Content, Filtering, Advanced, etc.

Live Test (No Reload)

Switch to your tour tab and toggle the Search button. The panel will reinitialize and pick up latest dashboard edits.

Preserve Changes

Local edits persist via browser localStorage until you refresh. Use export options to make changes permanent.

Important: Do not reload either page until you export your configuration. Local changes are stored in browser localStorage and will be lost on refresh.

Export & Deploy Configuration

Save your settings and deploy them to make changes permanent and available to all users.

Export & Import Process

Download Configuration

Click "Download" in the dashboard to save your current settings as search-pro-config.js - a portable, production-ready JavaScript file.

Load Configuration (Optional)

Use "Load" to import a previously saved configuration file. Great for restoring backups or syncing settings across devices.

Critical: DO NOT edit the config file manually. DO NOT delete any lines. The config file is precisely wired to the search engine.

Deploy to Server

Export Your Configuration

From the dashboard, download search-pro-config.js

Upload to Config Directory

Upload your exported file to: /search-pro-v3/config/search-pro-config.js (Overwrite the existing file if prompted)

Test Your Tour

Open/refresh your tour URL and click the Search button. Your tour should now use the new server-side configuration automatically.

Quick Browser Preview Workflow

  1. Edit settings in the control panel dashboard tabs
  2. Switch to tour tab and toggle search button to reload UI with new temporary edits
  3. Happy with changes? Export to search-pro-config.js and upload to server
  4. Refresh the tour page to verify the live (server) configuration

Thumbnail Configuration

Optional but recommended: Add visual previews to enhance search results presentation.

Purpose & Best Practices

  • Visual Preview: Thumbnails provide visual context for each search result type
  • Priority System: When configured, thumbnails take priority over icons
    • Recommendation: Choose one system only → use thumbnails OR icons, not both

Supported Formats & Placement

Supported: .jpg, .jpeg, .png, .gif, .webp, .svg
File Placement Rules:
  • All images must be placed in the assets folder: /search-pro-v3/assets/
  • File names must match exactly the names in the Display tab configuration
  • Case-sensitive: hotspot-default.jpg ≠ Hotspot-Default.jpg

Common Issues & Solutions

Thumbnail not displaying:

  • Check file path: must be /search-pro-v3/assets/filename.ext
  • Verify case matching (upper/lowercase)
  • Confirm file extension spelling (.jpeg vs .jpg)
  • Test direct image access: https://your-domain.com/search-pro-v3/assets/yourfile.jpg

Old image still showing:

  • Browser cache: Hard-refresh (Ctrl/Cmd + Shift + R)
  • CDN/Cloudflare cache: Purge cache for the specific asset file

Filtering Tab Recommendations

Important guidelines for optimal search filtering configuration.

Whitelist/Blacklist Settings

Important: In the Filtering Tab, to avoid confusion or unexpected results, enable only ONE filter setting at a time. As long as only one search filter configuration is active, the plugin will work as intended.

Support & Troubleshooting

Common issues, quick fixes, and how to get help when you need it.

Common Issues & Quick Fixes

1
Settings not applying (live site):
  • Ensure config loads before engine in index.html
  • After uploading new config, refresh the tour page
  • Check file permissions: 644 for files, 755 for folders in your server
2
File not loading:
  • Check file path spelling and placement
  • Open DevTools → Console/Network tab for 404/403 errors
  • Verify MIME type errors
3
Settings disappear:
  • Expected if relying on localStorage only
  • Always Export → upload search-pro-config.js for permanent changes
  • Hard-refresh or clear cache if changes not visible

60-Second Success Checklist

  1. Can you open the dashboard URL?
  2. Does toggling the Search button reflect dashboard edits (without reload)?
  3. Did you export and upload /search-pro-v3/config/search-pro-config.js?
  4. Did you refresh the tour page?
  5. After refresh, are your server-side settings live?

Secure Your Dashboard (Recommended)

After completing your configuration, protect your dashboard from unauthorized access:

Security Risk: Anyone who discovers your dashboard URL can modify your search settings. Take one of these protective measures after finalizing your configuration.

Option 1: Delete Dashboard (Recommended)

Remove the entire dashboard/ folder from your server after exporting your final configuration. You can always re-upload it later if you need to make changes.

Option 2: Password Protection

Use your hosting platform's password protection feature (like .htaccess for Apache) to restrict access to the /search-pro-v3/dashboard/ directory.

Best Practice: Delete the dashboard folder entirely once you're satisfied with your configuration. The search system will continue to work perfectly using only the exported search-pro-config.js file.

Clean Uninstall (If Needed)

To completely remove the search system:

  1. Remove the JS action from the 3DVista button (or delete the button)
  2. Remove these two lines from index.html: 
    <script src="search-pro-v3/search-v3.js"></script>
<script src="search-pro-v3/config/search-pro-config.js"></script>
  3. Remove the search-pro-v3/ folder from your server

Get Help

If you need further assistance or have questions:

  • Email Support: Email and Phone Number support will be provided after purchase
  • Feedback: We’d also love your feedback. Leaving us a positive review not only makes us proud of our work but also helps other 3DVista users discover the power of this unique plugin—allowing us to dedicate even more time to future development and improvements.
Our advanced search plugin has been thoroughly tested to ensure reliable performance across different 3DVista virtual tour projects. Follow the instructions in this guide for a consistent and predictable search experience.