How to Add a Virtual Tour to Your Website

Once your virtual tour has been published, you can easily insert the virtual tour on Google into your website.  

The virtual tour is hosted on Google and visitor traffic does not count against your website bandwidth.

There are two important components to adding the tour to your website: The starting position of the tour and the website platform you are using.

 

 

Get Your Starting Position

What virtual tour photo sphere do you want your website visitors to see first?  Your storefront?  Your lobby?

Here are the steps to locate and save your tour starting position so it can be added to your website.

 

Step 1. Find Your Tour on Google Maps

 

Go to Google Maps and search for your business location.

Step 2. Enter Your Tour

 

Click one of the 360° photo action buttons on the business listing on the left panel or use the yellow stickman on the lower right and then select one of the blue dots to enter your virtual tour.

Navigate the tour to find a perfect starting position photo sphere and point the camera in the desired direction.

Step 3. Get Your Tour Embed Code

 

Once you have the desired starting position of the tour displayed, click the “3 vertical dots” menu on the top left near your business name.

 

 

Then select “Share or embed image”.

 

 

On the Share pop-up, select “Embed a map”

 

The virtual tour, image size, and html code will then be displayed.

Select the image size on the drop down and then click “COPY HTML”.

Open a text document or blank email draft.  Paste the HTML (ctrl+v) for safe keeping.

 

The full embed code will look similar to this:

<iframe src=”https://www.google.com/maps/embed?pb=!4v1570442623074!6m8!1m7!1sCAoSLEFGMVFpcE15Rk5zWUpDQ2k2LWh1SzJpSGpZa1lRaDROa1lDQk9hR1RCSld2!2m2!1d34.0002865633972!2d-84.58304914834946!3f143.72763481287652!4f-5.418296856668931!5f0.7820865974627469″ width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=””></iframe>

 

Now you are ready to insert the virtual tour into your website!

 

Insert the Virtual Tour Embed Code to Your Website

 

The last step is to insert the embed code into a page or post on your website. This is accomplished by pasting the embed code into a HTML element on your desired page or post.

The most popular website platforms have a few subtle differences when adding content, so choose your website platform on the tabs below to see where the embed code is to be inserted.

 

WordPress is the most popular and customizable website content management system in the world.

  1. Create a new or open an existing page/post.
  2. Use the editor on your desired page or post.  Switch the editor view from Visual to Text on the right side.

Mythos Media Virtual Tours - How to Add Virtual Tour to Your Website, Embed WordPress 1

  1. Paste (ctrl+v) the embed code into the editor contents.
  2. Save your changes.

 

Divi is a very popular page builder framework that runs on WordPress.  Divi uses modules to manage and display content.

Mythos Media Virtual Tours - How to Add Virtual Tour to Your Website, Embed WordPress Divi Code Module

 

  1. Add your desired section, row, and column structure
  2. Add a Code Module
  3. Paste the embed code into the Code Module content area.
  4. Save your changes.

WordPress.org is the managed website service that uses the scaled down edition of WordPress.

Mythos Media Virtual Tours - How to Add Virtual Tour to Your Website, Embed WordPress Org 1

  1. Add a Custom HTML Block to your page or post.
  2. Paste (ctrl+v) the embed code into the content field.
  3. Save your changes.

 

Visit this WordPress.com support page for additional details on using Custom HTML Blocks.

  1. Login to your Joomla Admin panel, then go to Extensions on the menu bar > choose Modules > Click New to start a new module.
  2. Select Custom as the module type.
  3. Give the new module a name in the Title field.
  4. On the lower right corner of the editor, click the Toggle editor button to change the mode to plain text.

Mythos Media Virtual Tours - How to Add Virtual Tour to Your Website, Embed Joomla 1

  1. Paste (ctrl+v) your embed code into the content area.
  2. On the right sidebar, click Select Position to choose the location to place the module in the website layout.

Mythos Media Virtual Tours - How to Add Virtual Tour to Your Website, Embed Joomla 2

  1. To select what menu items display the virtual tour modeule in a Joomla website, navigate to the Menu Assignment tab and select the desired box.
  2. Press the Save button to finish the module.

 

  1. Open the Squarespace page where you would like to embed the virtual tour.
  2. Hover over your page content and select Edit.
  3. Click an insertion point, select a Code Block, then paste the embed code into the block.
  4. Save your changes.

 

Note: Check this page to verify that your Squarespace plan is eligible for Code Blocks as their features and pricing plans change frequently.

  1. Open the Wix editor
  2. Choose the Add button and select the More option
  3. Click on the HTML code button
  4. Click the Enter Code button that appears above the grey box.
  5. Paste your embed code into the space provided.

The embed code will then display a preview that can be moved or scaled into your desired position.

Pro Tips

  • You can manually edit the height= and width= values in the embed code to customize the dimensions of the virtual tour.