Embed a Virtual Tour on WordPress, Wix or Squarespace

Get the embed code

1. Make sure the tour is Unlisted or Public. A Private tour shows visitors a “private” message instead (see Who can see your tour).
2. Open the tour in the editor and choose the Share tab (see Share a tour).
3. Set the options:
   • Tour TypeVirtual Tour for the normal tour, or Split View or Twin View.
   • First PanoDefault opens on the first panorama; pick another to start in a particular room.
   • Custom DomainUse your own custom domain instead of teliportme.com, if you’ve set one up.
   • Embed Size640 x 360, 960 x 540, Fill (100% of the space it’s in) or Custom. For a full-width tour, choose Custom and type 100% for Width and a number of pixels, such as 500, for Height.
4. Choose Embed, or Embed iFrame from the ⋮ menu next to MLS, then choose the copy icon. “Embed code copied to clipboard.” confirms it.

Embed is a short script that builds the tour on your page. Embed iFrame is a plain <iframe> tag, for builders that don’t run scripts. Both show the same tour.

WordPress

1. In the block editor, choose the Block Inserter and add a Custom HTML block, or type /html in a new paragraph and press Enter.
2. Choose Edit HTML, paste the code, then choose Update.

WordPress strips <script> and <iframe> tags from users without permission to post unfiltered HTML, such as Contributors. If the tour disappears when you save, ask an administrator to add it.

Wix

1. In the editor, choose Add Elements on the left, then Embed Code, Popular Embeds and Embed HTML.
2. Choose the new element on your page, then Enter Code.
3. Paste the code under Add your code here and choose Apply.

Wix shows the code inside its own iframe, so Embed iFrame is the natural choice here. Wix suggests a width and height of 100% so the content isn’t cropped: choose Fill before you copy, then drag the element’s handles to the size you want.

Squarespace

1. Edit the page, hover over a section and choose Add block or +, then Code.
2. Choose the pencil icon on the block and paste the code into the text field.

Squarespace needs the Core, Plus or Advanced plan for a code block with JavaScript or an iframe, and TeliportMe’s code is one or the other. The tour sometimes doesn’t show while you’re logged in to Squarespace; choose Preview in Safe Mode to check it.

Any other website

Paste the Embed iFrame code into your builder’s HTML, code or embed element, or straight into your page’s HTML where the tour should appear. If you choose Fill, give the box around it a height of its own, or the tour may not show.

Common questions

Why doesn’t my embedded virtual tour show?

Check the tour is Unlisted or Public: a Private tour shows a “private” message, and tours on a free trial stay Private until you subscribe. If you chose Fill, the space you pasted it into needs a height, so try Custom with a pixel height instead.

Does the embedded tour update when I edit the tour?

Yes. The embed code links to your live tour, so the changes you save in TeliportMe show on your website the next time the page loads. Copy new code only to change the Embed Size, First Pano, Tour Type or domain.

Can visitors watch the embedded tour full screen or in VR?

Yes. TeliportMe’s embed code lets the tour go full screen and use VR and a phone’s motion sensors from inside your page. The full-screen button shows when Fullscreen Icon is on in Tour settings.

Does an embedded virtual tour fit on phones?

The Embed script never grows wider than the space it’s in, so it shrinks to fit a phone. Embed iFrame keeps the width you chose, so use Fill or a width of 100% for phones.

Can I embed a tour that opens in a particular room?

Yes. Pick the room under First Pano on the Share tab before you copy the code. Visitors start there and can still move around the whole tour.