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>

Advanced usage

Authenticate your website​

Embed and usage​

Authenticate your website

Embed and usage