• Tel: 0330 043 2964
  • info@govirtualtours.co.uk

How to Embed a Virtual Tour on Your Website (WordPress, Shopify, etc.)

Once your virtual tour is ready, the next step is getting it in front of your audience — and that means adding it to your website.

Whether you're using WordPress, Shopify, Wix, or another platform, embedding a virtual tour is quick and easy. In this guide, we’ll walk you through exactly how to do it, step by step.

Step 1: Get Your Embed Code

Your virtual tour provider (such as Go Virtual Tours) will supply you with a unique iframe embed code, usually from platforms like Matterport or Kuula.

It looks something like this:

<iframe src="/https://my.matterport.com/show/?m=EXAMPLE123" width="100%" height="480" frameborder="0" allowfullscreen allow="xr-spatial-tracking"></iframe>

You can use this code on nearly any modern website builder or CMS (content management system).

Step 2: Decide Where to Place It

Popular placement options include:

  • Your homepage (especially if you're promoting a new space)
  • A dedicated "Virtual Tour" or "Take a Look Inside" page
  • On a property listing or product page
  • Embedded within blog posts or service pages
  • On your Google Business Profile or in your email signature (link only)

Platform-Specific Instructions

WordPress (Classic or Block Editor)

  1. Go to the page/post where you want to embed the tour
  2. Switch to the Text tab (Classic Editor) or add a Custom HTML block (Block Editor)
  3. Paste the iframe code
  4. Click Preview to check it loads correctly
  5. Update or publish the page

Shopify

  1. From your dashboard, go to Online Store > Pages
  2. Choose the page (or product page) you want to edit
  3. Click Show HTML (the <> icon in the editor)
  4. Paste your iframe code where you want the tour to appear
  5. Save the page and preview

Wix

  1. Edit your Wix site
  2. Click + Add > Embed > Embed a Widget
  3. Paste the iframe code
  4. Resize and position it as needed
  5. Click Publish to go live

Squarespace

  1. Open the editor and go to the page
  2. Click + Add Block and choose Code
  3. Paste the iframe code into the block
  4. Set the block type to HTML
  5. Save and publish

Joomla

  1. Go to the article or custom HTML module
  2. Switch to HTML/source view
  3. Paste the iframe code
  4. Save and close
  5. Ensure iframe is enabled in your editor settings

Mobile Responsiveness Tip

To ensure your tour looks great on all devices, use a responsive width:

<iframe src="/..." width="100%" height="480" ...></iframe>

This automatically adjusts to screen size, especially on mobile and tablets.

Can You Link Instead of Embedding?

Yes — you can also just provide a direct link to the tour, like:

Explore our venue in 360° → View Virtual Tour

This is ideal for email campaigns, online listings, or social media.

Go Virtual Tours – We Help You Embed with Ease

When you work with Go Virtual Tours, we’ll not only deliver your interactive Matterport tour — we’ll also help you embed it correctly on your website, listing portals, and Google Business profile.

We make it easy, no matter what platform you use.

Need help with the technical side? Just ask — we’re here to support you.