Skip to main content

Getting started

All you need is a container element for the Eyeson UI and a valid access key or guest token. Read API usage for further information.

Include the IFrame API script in your website either using the script tag,

<script src="https://app.eyeson.team/iframe-api.js"></script>

or as Javascript ES module.

import EyesonIframe from 'https://app.eyeson.team/iframe-api-esm.js';

Embed Eyeson meeting in your website

The default usage is to register a user and get a specific access key for this user.

<html>
<head>
<!-- ... -->
</head>
<body>

<!-- The <iframe> will be inside this <div> tag -->
<div id="meeting"></div>

<!-- This <script> loads the Eyeson IFrame API code -->
<script src="https://app.eyeson.team/iframe-api.js"></script>
<script>
async function start() {
// Load the user's access key for your application
const accessKey = await fetch('https://myapp.example/get-user-access-key');
// This function creates the <iframe> with the Eyeson default UI
const meeting = new EyesonIframe('#meeting', { accessKey });
meeting.on('error', (error) => {
// Example error notification
console.error(error);
// Remove the <iframe> and clear the meeting instance
meeting.close();
});
}

start();
</script>
</body>
</html>
note

Read more about how to start and join a meeting.

ES Module

The script is also available as ES module.

import EyesonIframe from 'https://app.eyeson.team/iframe-api-esm.js';

async function start() {
const accessKey = await fetch('https://myapp.example/get-user-access-key');
const meeting = new EyesonIframe('#meeting', { accessKey });
meeting.on('error', (error) => {
console.error(error);
meeting.close();
});
}

start();

Eyeson IFrame-API also works with Permalink API.

Simply set options isPermalink=true and use the accessKey or guest.token fields.

import EyesonIframe from 'https://app.eyeson.team/iframe-api-esm.js';

async function start() {
const permalinkGuestToken = 'HoYq1gudkP9D7NXF6ERTnd05';
const meeting = new EyesonIframe('#meeting', {
isPermalink: true,
guest: { token: permalinkGuestToken }
});
// ...
}

start();