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
- Default
- Guest
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>
Read more about how to start and join a meeting.
If you have the guest option for the meeting enabled, you can use the guest token to let any user register via Eyeson's default UI.
<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 meeting's guest token for your application
const guestToken = await fetch('https://myapp.example/get-meeting-guest-token');
// This function creates the <iframe> with the Eyeson default UI
const meeting = new EyesonIframe('#meeting', {
guest: {
token: guestToken,
},
});
meeting.on('error', (error) => {
// Example error notification
console.error(error);
// Remove the <iframe> and clear the meeting instance
meeting.close();
});
}
start();
</script>
</body>
</html>
The guest option can be enabled or disabled with the
options[guest_token_available] parameter on the
start/join meeting API request.
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();
Permalink
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();