Learn How to Use EnableX Visual Builder To Generate Video Call iFrame Code


How to generate iFrame code fi.jpg

Learn How to Use EnableX Visual Builder to Generate Video Call iFrame Code


New to EnableX Visual Builder? It is the easiest way to quickly add video calling to your website using an iFrame code. Once you select the required features, text size, font, color that you want to see in your video calling, you receive a single line of iFrame code that you need to embed on your CMS.


A Step-by-Step Guide

For the sake of simplicity, this tutorial will walk through the process on how to generate an iFrame embed using the EnableX Visual Builder.

Here is how you can do it step by step:

1. Create Project

A. Sign up to account in the EnableX Portal. Once you are in the portal,  select the Project menu, press Add Project button.


How to Generate iFrame Code Using EnableX Visual Builder 1


B. Next, fill in the necessary project details, and select the Video Embed service


How to generate iFrame code 2


C. It throws a pop-up informing APP KEY and App ID. Now, Press the VIDEO EMBED SERVICE button.


How to generate iFrame code 3


D. You are directed to the Get iFrame Code page, choose the VISUAL BUILDER option.


How to generate iFrame code step 4


2. Set your subdomain and whitelisted domains

Now, you need to specify your subdomain, which will be hosted on the EnableX domain. You can select a subdomain in the Set Your Subdomain field.


How to generate iFrame code 5


* After selecting the subdomain, press the Check Availability button.

* Whitelisted domains are list of allowed domains that you trust.


3. Develop Your UI with Visual Builder


A. Go to the On-screen Layout tab, select your preferred room layout, such as Room Size, Participant’s & Moderator’s View.


How to generate iFrame code 6


* At EnableX, we can provide up to 100 participants room size. However, the Visual Builder gives you the option to choose up to 50. If you need to extend your room size, please contact our sales.


B. Now, select the features you want to show on the toolbar. You can choose Meeting Room Name, Duration, Participants’ Number, Full-Screen options from the  Toolbar Display Settings section.  It also gives you the option to keep the toolbar either fixed or movable.


How to generate iFrame code 7


C. On the Features tab, select the features, such as recording, screenshare, chat or whiteboard, that you need in your video calling.


How to generate iFrame code 8


* Only up to five features can be displayed on the toolbar. You have the option to decide which five features you want to display on the toolbar and which one will be hidden under (…).


D. Under Moderator Settings tab, you can choose the basic features, such as Floor Access Control, Lobby, Breakout Room and Room Lock features.


How to generate iFrame code 9

*Basic Features Terminologies

  • Floor Access Control: Temporary permission to be a part of the video meeting.
  • Lobby: Allows you to let participants wait.
  • Breakout Room: Create a room of different groups where participants can discuss.
  • Room lock: Keep uninvited participants away from the meeting room.

* Exit/Sign out URL: State the URL prefixed by “https://” that you want the participants to receive after they Sign out/Exit or disconnect from the session.


E. Now, select the preferred Design, Text and Filters in Accessories section.


How to generate iFrame code 10


The purpose of this section is to help you make some styling changes to our app. It decides the overall look and feel of your app, so play with its different features.

4. Test How It Works


A. Once you are done with your selections, press the Build App button.


How to generate iFrame code 11


B. Next, press the Try Now button to check how your video calling app looks.


How to generate iFrame code 12


C. Copy the link provided at the bottom of the Window and share it with your friends or other people to test it in a two-way or group calling mode.


How to generate iFrame code 14


5. Embed It

Now, check If you are satisfied with the look and feel of your video calling. Press the OK button.


How to generate iFrame code 14


Congrats! Your iFrame code is generated. Copy the iFrame codes to the HTML  block of your website.


How to generate iFrame code 15


Hey, it’s all a few clicks, drags & drops, and you are done.  You are not required to code at any stage, it’s so easy. Even if you are an absolute beginner, you can learn how to generate iFrame code using EnableX Visual Builder.

The advantage of EnableX Visual Builder is it doesn’t require the use of a third-party plugin, which doesn’t allow you to customize, to embed video calling in the CMS. That’s pretty cool!

If you have any questions, feel free to leave them in the comments below. We’ll be happy to respond.

Happy creating!

Are you looking for feature-rich APIs to build exciting solutions?

Sign up for free to begin!
Signup Cpaas API