Skip to main content

Getting Started

Include the script​

Add the API script to your page next to the iframe. Prefer loading it after the iframe so the target is available.

<iframe id="seenic-player" src="https://tour.seenic.io?locationId=5772"></iframe>
<!-- Production (minified) -->
<script src="https://cdn.seenic.io/seenic-external-api.min.js"></script>
<!-- Or non-minified (debug) -->
<!-- <script src="https://cdn.seenic.io/seenic-external-api.js"></script> -->

Or load it as an ES module:

<iframe id="seenic-player" src="https://tour.seenic.io?locationId=5772"></iframe>
<script type="module" src="https://cdn.seenic.io/seenic-external-api.js"></script>

Get the API instance​

Obtain the client by passing the iframe element (or its selector):

const iframe = document.getElementById('seenic-player');
const api = SeenicExternalAPI(iframe);

// Or with a selector
const api = SeenicExternalAPI('#seenic-player');

Optionally enable strict origin validation (recommended only if your player origin is fixed):

const api = SeenicExternalAPI('#seenic-player', { targetOrigin: 'https://tour.seenic.io' });

Call a method​

Methods are sent to the iframe with a type and optional payload:

// With a response 
const result = await api.send('setPoint', { pointId: 123 });
console.log(result);

Subscribe to events​

Listen for changes emitted from the iframe:

api.subscribe('subscribeToAppState', (data) => {
  console.log('State received:', data);
});

// Unsubscribe when done
const unsubscribe = api.subscribe('subscribeToAppState', handler);
unsubscribe();

Next​

See API Reference for all methods and event contracts.