Skip to main content

Eyeson IFrame API

Add video conferencing to your website with Eyeson IFrame API. It makes it easy to embed video conferencing into your site or app using a few lines of HTML and Javascript.

info

The Eyeson IFrame API embeds Eyeson's default UI of an existing meeting room.

The biggest advantage of Eyeson IFrame API is the correct iframe permission policy handling. This removes the permission handling and integration problems.

Basic or advanced usage​

Embed Eyeson UI in your website in basic mode.

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.

Basic Mode​

All you need is a container element for the Eyeson UI and a valid access key or guest token.

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>

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();

Advanced Mode​

Register your website's origin at the start of the meeting to unlock more features for an advanced usage.

Authenticate your website​

Authentication is optional. IFrame API will work in basic mode without authentication.

In advanced mode, methods to interact with the Eyeson UI inside the iframe are available, like present, chat, snapshot.

To enable advanced mode, in the meeting start command you need to set the options[custom_fields][iframe_postmessage_origin] parameter to the correct website origin, for example

options[custom_fields][iframe_postmessage_origin]=https://app.myawesomeapp.com

Embed and usage​

<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>
        // EyesonIframe instance reference
        let meeting = null;

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

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