Docs Embed & oEmbed

Embed Tours Anywhere

Three ways to embed published tours on any website — iframe, oEmbed auto-discovery, and the JavaScript SDK for full programmatic control.

iframe Embed

The simplest way to embed a tour. Copy the iframe code from the Publish panel in the Studio editor, or construct it from the published tour URL.

Basic iframe embed

<iframe
  src="https://tours.3syxty.com/t/luxury-villa/embed"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  allow="xr-spatial-tracking; gyroscope; accelerometer"
  loading="lazy"
></iframe>

Responsive Embed

For a responsive embed that maintains a 16:9 aspect ratio on all screen sizes:

Responsive wrapper

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe
    src="https://tours.3syxty.com/t/luxury-villa/embed"
    style="position:absolute;top:0;left:0;width:100%;height:100%;"
    frameborder="0"
    allowfullscreen
    allow="xr-spatial-tracking; gyroscope; accelerometer"
    loading="lazy"
  ></iframe>
</div>

URL Parameters

Customise the embedded tour by appending query parameters to the embed URL:

Parameter	Type	Description
`autoplay`	boolean	Start auto-rotation on load (default: false)
`scene`	string	Start on a specific scene by ID or slug
`hide_ui`	boolean	Hide the tour's built-in navigation UI
`muted`	boolean	Start with audio muted (default: true)
`loop`	boolean	Loop back to first scene after reaching the last
`brand`	boolean	Show/hide branding watermark (Pro+ only)
`lang`	string	Force a specific language (ISO 639-1 code)
`theme`	string	Force light or dark viewer theme

Example with parameters

https://tours.3syxty.com/t/luxury-villa/embed?autoplay=true&scene=kitchen&lang=de

oEmbed

3Syxty supports the oEmbed specification for automatic rich embeds. Any platform that supports oEmbed (WordPress, Medium, Notion, Slack, Discord, etc.) will automatically generate a rich preview when a tour URL is pasted.

Discovery

Published tour pages include an oEmbed discovery link in the HTML <head>:

<link
  rel="alternate"
  type="application/json+oembed"
  href="https://api.3syxty.com/v1/oembed?url=https://tours.3syxty.com/t/luxury-villa"
  title="Luxury Villa Tour"
/>

Endpoint

oEmbed API request

GET https://api.3syxty.com/v1/oembed?url=https://tours.3syxty.com/t/luxury-villa&format=json

oEmbed response

{
  "type": "rich",
  "version": "1.0",
  "title": "Luxury Villa Tour",
  "author_name": "Interlink Digital",
  "provider_name": "3Syxty Studio",
  "provider_url": "https://3syxty.com",
  "thumbnail_url": "https://cdn.3syxty.com/t/luxury-villa/thumb.jpg",
  "thumbnail_width": 1200,
  "thumbnail_height": 630,
  "width": 960,
  "height": 540,
  "html": "<iframe src=\"https://tours.3syxty.com/t/luxury-villa/embed\" ...></iframe>"
}

JavaScript Embed SDK

For full programmatic control over embedded tours, use the 3Syxty Embed SDK. The SDK allows you to navigate between scenes, trigger hotspots, listen to viewer events, and control playback — all from your host page.

Include the SDK

<script src="https://cdn.3syxty.com/sdk/embed.js"></script>

Initialise and control a tour

// Create a viewer instance
const viewer = new ThreeSyxty.Viewer('#tour-container', {
  tour: 'luxury-villa',
  autoplay: true,
  startScene: 'living-room',
});

// Navigate to a specific scene
viewer.goToScene('kitchen');

// Listen for events
viewer.on('scene.changed', (scene) => {
  console.log('Now viewing:', scene.name);
});

viewer.on('hotspot.clicked', (hotspot) => {
  console.log('Hotspot activated:', hotspot.id);
});

// Get current state
const currentScene = viewer.getCurrentScene();
const viewAngle    = viewer.getCamera();

SDK Methods

Method	Description
`goToScene(id)`	Navigate to a scene by ID or slug
`getCurrentScene()`	Returns the current scene object
`getScenes()`	Returns an array of all scenes
`getCamera()`	Returns current camera position {yaw, pitch, fov}
`setCamera(yaw, pitch, fov)`	Set camera position with optional animation
`triggerHotspot(id)`	Programmatically trigger a hotspot action
`enterVR()`	Enter VR mode (if WebXR is available)
`exitVR()`	Exit VR mode
`toggleFullscreen()`	Toggle fullscreen mode
`setMuted(boolean)`	Mute or unmute audio
`destroy()`	Clean up and remove the viewer instance

SDK Events

Event	Description
`ready`	Tour has loaded and is ready for interaction
`scene.changed`	Viewer navigated to a new scene
`hotspot.clicked`	A hotspot was activated
`camera.moved`	Camera position changed (throttled)
`vr.entered`	Viewer entered VR mode
`vr.exited`	Viewer exited VR mode
`fullscreen.changed`	Fullscreen state changed
`error`	An error occurred during loading or playback

WordPress Integration

The 3Syxty WordPress plugin provides a native block and shortcode for embedding tours directly in your WordPress pages and posts. The plugin handles responsive sizing, lazy loading, and oEmbed auto-discovery.

Gutenberg Block

Search for "3Syxty Tour" in the block inserter. Paste a tour URL and the block handles everything — responsive embed, lazy loading, and accessibility attributes.

Shortcode

[3syxty url="https://tours.3syxty.com/t/luxury-villa" height="500"]

Security & CSP

If your website uses a Content Security Policy, add the following directives to allow 3Syxty embeds:

frame-src https://tours.3syxty.com;
script-src https://cdn.3syxty.com;
connect-src https://api.3syxty.com;