How to embed a 360° panorama or virtual tour on your website

Every panorama and virtual tour hosted on TrueVirtualTours can be embedded on any website with a single iframe. This guide shows the exact code, how to size it, how to add it in the most common site builders, and what changes on the paid plans. If you prefer video, the three-minute walkthrough below shows the whole process in WordPress.

Timestamps: 0:16 embedding a spherical panorama; 0:24 the Share dialog for a panorama; 0:55 adding the HTML code to WordPress; 1:40 embedding a virtual tour; 1:47 the Share dialog for a tour; 2:13 adding the tour's code to WordPress. Video by Vlad Grinev.

1. Copy the embed code

Open the panorama or tour page and click Share. The dialog has a link for messengers and social networks, and an Embed field with the iframe code. Copy it. The generated code looks like this:

<iframe width="640" height="360" frameborder="0" allowfullscreen="true"
  src="https://truevirtualtours.com/tour/1234/show"></iframe>

For a single panorama the address ends in /panorama/1234/360view instead of /tour/1234/show. The number is the id of your panorama or tour; the Share dialog fills it in for you.

2. Size it for your page

The width and height attributes accept pixels or percentages. The most useful variants:

• Full content width: width="100%" height="480". The player fills the column and keeps a fixed height.
• Fixed box: width="640" height="360", the default 16:9 box.
• Responsive 16:9 without a fixed height: wrap the iframe in a container with padding.

<div style="position:relative;padding-top:56.25%">
  <iframe src="https://truevirtualtours.com/tour/1234/show"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0"
    allowfullscreen="true"></iframe>
</div>

Keep allowfullscreen: it enables the fullscreen button inside the player, which most visitors use on a phone.

3. Add it to your site builder

WordPress

In the block editor add a Custom HTML block and paste the code. In the classic editor switch the post to the Text tab (not Visual) before pasting, otherwise the iframe is stripped. Page builders such as Elementor and WPBakery have an HTML widget for the same purpose.

Wix

Add, Embed code, Embed HTML. Paste the iframe into the code box and resize the element on the canvas; set the iframe width to 100% so it follows the element.

Squarespace

Add a Code block (available on Business plans and up), paste the iframe, and set the block width to the full column.

Tilda

Use the T123 block (HTML code) from the "Other" category and paste the iframe. Set the width to 100%.

Webflow, Shopify, Joomla, plain HTML

Any place that accepts raw HTML works: an Embed element in Webflow, a custom liquid or HTML section in Shopify, a Custom HTML module in Joomla, or the page source itself.

Property portals and listings

Most real-estate portals do not accept iframes but do accept a "virtual tour link". Use the page link from the Share dialog; the portal shows it as a button that opens the tour in a new tab.

4. What visitors get

The embedded player is the same krpano-based viewer as on TrueVirtualTours: drag to look around, scroll to zoom, hotspots to walk between scenes, a thumbnail strip for the tour, gyroscope control on phones, a VR button and fullscreen. Panoramas are served as multi-resolution tiles, so a 65,500-pixel image loads as fast as a small one. Views inside embeds are counted in the panorama and tour statistics in your account.

5. Branding and the splash screen

• Free plan: the embed opens with a short TrueVirtualTours splash screen and shows the logo in the player.
• Start plan: the splash screen is removed.
• Pro plan: white label. The logo and the control bar can be hidden, so the player looks like part of your site.

Plans and prices are on the pricing page; what each plan adds to hosting is explained at virtual tour hosting.

6. Common problems

• The iframe disappears after saving. Your editor stripped it. Use the HTML or Code block instead of the visual editor.
• The player is tiny on phones. Use width="100%" or the responsive wrapper above.
• The tour does not open in fullscreen. Keep allowfullscreen="true" and make sure no parent iframe blocks it.
• The page says the content is no longer available. The panorama or tour was deleted or unpublished. Republish it or replace the id in the embed.
• Mixed content warning. The embed address is always https; check that your page is served over https too.

Frequently asked questions

Is embedding free?

Yes, on every plan, with no limit on the number of sites or page views.

Can I embed a panorama without an account?

You can embed any public panorama or tour from the gallery; the author is credited under the player. To embed your own content, upload it first with a free account.

Will the embed update if I edit the tour?

Yes. The iframe always shows the current version; replacing a panorama or moving a hotspot needs no change on your site.

Can I embed a 360° video?

Yes. A 360° video scene uses the same iframe code as a panorama.

Not sure how to make the tour itself? Start with how to create a virtual 3D tour, or read about 360° panorama hosting.