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>
Events you can listen for
tourreadyThe tour has loaded, with its title and the list of panos.panoreadyA pano finished loading.orientationchangeThe view moved: heading, yaw, pitch and zoom.hotspotclickA visitor clicked a hotspot, and which type it was.fullscreenchangeThe viewer entered or left fullscreen.
Methods you can call
setPanoGo to any pano in the tour.setHeadingFace a compass direction, using the pano’s north point.setPitchLook up or down.setZoomZoom from widest to closest.setAutoRotateSpin the view at a set speed, either way.fullscreenToggle fullscreen.
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.