Developers

Build on the TeliportMe API

Put a TeliportMe tour inside your own site or app, hear what visitors do in it, and steer the view from your own buttons, maps and compasses.

A connected tour in nine lines

Add one script, embed your tour with its /embed/tour/ link, and start listening. The embed code from any tour’s Share dialog works the same way.

<script src="https://teliportme.com/js/api.js"></script>
<iframe src="https://teliportme.com/embed/tour/YOUR_TOUR_ID"
  width="100%" height="600" frameborder="0" allowfullscreen
  allow="vr;gyroscope;accelerometer;fullscreen;"></iframe>
<script>
  TeliportmeViewerAPI.addEventListener('orientationchange', function (e) {
    console.log('Heading', e.data.heading);
  });
</script>

Full quick start →

Events you can listen for

  • tourready The tour has loaded, with its title and the list of panos.
  • panoready A pano finished loading.
  • orientationchange The view moved: heading, yaw, pitch and zoom.
  • hotspotclick A visitor clicked a hotspot, and which type it was.
  • fullscreenchange The viewer entered or left fullscreen.

Event reference →

Methods you can call

  • setPano Go to any pano in the tour.
  • setHeading Face a compass direction, using the pano’s north point.
  • setPitch Look up or down.
  • setZoom Zoom from widest to closest.
  • setAutoRotate Spin the view at a set speed, either way.
  • fullscreen Toggle fullscreen.

Method reference →

See it running

Each example is a plain web page built on the Viewer API. View the source and copy it.

Need more than the viewer?

If you want to create tours, upload panoramas or pull analytics from your own systems, tell us what you’re building. We’ll tell you what’s possible today.

Start your free trial

Build one tour with every feature, free forever. No credit card. Subscribe when you’re ready to publish.