How to Embed Eyeson Meeting Into Your Website using IFrame API

If you're looking to add high-quality video conferencing functionality directly to your webpage or web app, embedding Eyeson Meetings is a great option. Eyeson offers developers easy-to-use APIs and embed codes that allow you to seamlessly integrate virtual meetings and webinars into any website.

With the new IFrame API provided by Eyeson, embedding Eyeson meeting functionality into your site is easier than ever. In this article, we will explore how to use the IFrame API to embed Eyeson video conferencing into your website using just a few lines of HTML and JavaScript code.

For more interesting topics, visit our Tech blog. 

Integrating the Eyeson IFrame API

To get started, you need to integrate the Eyeson IFrame API script into your webpage. You can do this by adding the following script tag to your HTML document:

Next, you need to provide an HTML element that will serve as the container for the meeting. For example, you can create a div element with the id "meeting" to act as the container:

After setting up the script and meeting container, you're ready to initialize a new EyesonIframe instance for creating the iframe element. This function requires two parameters: the selector for the meeting container and the options object with either the accessKey or the guest token. You can use the selector as an id, a query selector, or the node itself. Among accessKey or guest token, the options object can include various settings.

Utilize the Eyeson API to start a meeting and then you have 2 options for IFrame API usage. The first option is to register each participant and instantiate EyesonIframe with each accessKey individually. The second way is to make use of the guest token and let each guest register via Eyeson’s default UI.

For more detailed information and resources, you can refer to our developer portal. 

Advanced Mode:

In advanced mode, you can have more control over the Eyeson default UI inside the iframe. You can interact with the UI and observe meeting events such as join and leave. To enable advanced mode, you need to add your website's origin to the API's "start meeting" request, and then you can use the advanced event handlers in IFrame API.

See the Eyeson documentation for all available config options.

Conclusion

By following the simple steps outlined in this article, you can easily embed Eyeson video conferencing into your web app using the IFrame API. Whether you choose the basic mode or advanced mode, Eyeson provides a seamless integration experience with powerful features and customization options. Take advantage of Eyeson's IFrame API to enhance your webpage or web app with high-quality video meetings.

Remember to refer to the official Eyeson documentation for more detailed information on using the IFrame API and exploring additional methods and events available to interact with Eyeson’s default UI.