Setting Up Virtual Tour Integration

This article shows you how to add virtual tours to your WordPress website.

1. Choose Your Virtual Tour Type

There are two main ways to add virtual tours:

• Embed existing tours - Tours created with services like Matterport, 3DVista, or Google Street View
• Upload 360-degree photos - Single panoramic images you've taken yourself

Most Irish businesses use the embed method because tour creation services handle the technical work.

2. Get Your Tour Embed Code

If you have a tour from a service like Matterport:

1. Log into your tour provider's dashboard
2. Find your tour and click "Share" or "Embed"
3. Copy the embed code (it starts with <iframe and ends with </iframe>)
4. Note down the width and height numbers - you'll need these

If you only have 360-degree photos, you'll need to use a WordPress plugin instead (covered in step 4).

3. Add the Tour to Your Website

1. Access your WordPress admin dashboard
2. Go to the page where you want the tour (or add a new page)
3. Click "Edit" on that page
4. In the content editor, click the "+" button to add a new block
5. Search for "Custom HTML" and select it
6. Paste your embed code into the HTML block
7. Click "Update" to save your changes

Your tour should now appear on that page.

4. For 360-Degree Photos Without Embed Code

If you have 360-degree photos but no embed code:

1. Install the "WP VR" or "Algori 360" plugin from your WordPress admin
2. Upload your 360-degree images to your media library
3. Use the plugin's block or shortcode to display the images as interactive tours

These plugins turn regular 360-degree photos into interactive tours that visitors can navigate.

5. Test Your Virtual Tour

1. View your page on the front of your website (not the admin area)
2. Check the tour loads properly on desktop and mobile
3. Test all navigation controls work
4. If the tour appears too small or large, edit the width and height values in your embed code

Common sizes that work well: 800px wide by 600px tall for desktop viewing.

6. Add Tours to Multiple Pages

For businesses with multiple properties or locations:

1. Create separate pages for each location
2. Get individual embed codes for each tour
3. Follow steps 3-5 for each page
4. Link between tour pages using call-to-action buttons

This works well for estate agents, hotels, or venues with multiple spaces.

If you're still stuck with your virtual tour setup, contact Web60 support. Include your tour's embed code or tell us which service created your tour.

FAQ

Q: Do virtual tours slow down my website?

A: Tours from professional services like Matterport load from their servers, so they don't affect your website speed. Large 360-degree photos uploaded directly can slow things down.

Q: Can I add multiple tours to one page?

A: Yes, just add multiple Custom HTML blocks with different embed codes. Leave some space between them so visitors can tell them apart.

Q: My tour embed code isn't working - what's wrong?

A: Make sure you copied the complete code including <iframe at the start and </iframe> at the end. If it still doesn't work, the tour service might need to enable embedding.

Q: Can visitors view tours on mobile phones?

A: Most professional tour services work on mobile devices. Test your specific tour on different devices to be sure.

Q: Do I need permission to embed tours?

A: Only embed tours you own or have permission to use. If someone else created the tour, get their written permission first.

Q: How do I make my tour bigger or smaller on the page?

A: Change the width and height numbers in your embed code. For example, change width="600" to width="800" to make it wider.

Q: Can I add a virtual tour to my homepage?

A: Yes, follow the same steps but edit your homepage instead of creating a new page. Tours work well in the main content area of homepages.