Embed Eyeson video meeting in your website with IFrame API

Using the new IFrame API is the easiest way to embed Eyeson video conferencing into your site or app using a few lines of HTML and Javascript.

1. Integrate the Eyeson IFrame API script
   <script src="https://app.eyeson.team/iframe-api.js"></script>
2. Provide an HTML element as meeting container
   <div id="meeting"></div>
3. Call the EyesonIframe function and let the magic happen
   new EyesonIframe('#meeting', { accessKey: '...' });

IFrame API creates an iframe HTML element with all correct settings and loads Eyeson's default UI.

In advanced mode, methods to interact with Eyeson UI inside the iframe are available, like present, chat, snapshot, and also meeting events for the user like join and leave can be observed.

info

To get an accessKey, you have to start a meeting and join new users. For guest token usage, you have to start a meeting and let any user register via Eyeson's default UI.

Read more about Eyeson API usage.

Setup

The following simplified code demonstrates the basic implementation, either with accessKey or guest token.

Default

<!-- 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>

Guest

<!-- 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>

Simplified code to embed Eyeson UI in your website

Discover all methods and events.

Options

There are many options to customize the iframe to your needs. Width and height or even your desired CSS styles can be applied.

For guest token usage, options for locale and name suggestion are available.

A list of all options is well documented.

Advanced mode 🔐

Register your website's origin with the API at the start of the meeting to unlock more features that lets you interact with the Eyeson UI inside the iframe.

let meeting = null;

async function startMeeting() {
    // 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
    meeting = new EyesonIframe('#meeting', {
        accessKey,
        events: {
            onReady,
            onError,
            onMeetingJoin,
            onMeetingLeave,
            onMeetingError,
        },
    });
}

async function presentPdf() {
    try {
        // Load pdf file as blob
        const pdf = await fetch('https://myapp.example/get-pdf');
        // Start presentation in Eyeson UI
        await meeting.present(pdf);
    } catch (error) {
        showError('Present PDF failed');
    }
}

async function sendChat(message) {
    try {
        // Send a chat message in Eyeson UI
        await meeting.chat(message);
    } catch (error) {
        showError('Send chat failed');
    }
}

async function createSnapshot() {
    try {
        // Create a snapshot
        await meeting.snapshot();
    } catch (error) {
        showError('Create snapshot failed');
    }
}

function onReady() {
    // Eyeson UI is loaded and ready
}

function onError(error) {
    // Eyeson UI could not be loaded
    console.error(error);
    meeting.close();
}

function onMeetingJoin() {
    // User has joined the meeting (after preview screen)
}

function onMeetingLeave(reason) {
    // User has left the meeting (by intention or error)
}

function onMeetingError(reason) {
    // User is not able to join the meeting at all
}

startMeeting();

Simplified code to demonstrate the advanced mode

Read the documentation about advanced mode for further information.

Contact

We'll be happy to hear from you!

If you have a question or want to share any feedback, do not hesitate to create a ticket on GitHub.