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.
B. Next, fill in the necessary project details, and select the Video Embed service
C. It throws a pop-up informing APP KEY and App ID. Now, Press the VIDEO EMBED SERVICE button.
D. You are directed to the Get iFrame Code page, choose the VISUAL BUILDER option.
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.
* 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.
* 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.
C. On the Features tab, select the features, such as recording, screenshare, chat or whiteboard, that you need in your video calling.
* 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.
*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.
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.
B. Next, press the Try Now button to check how your video calling app looks.
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.
5. Embed It
Now, check If you are satisfied with the look and feel of your video calling. Press the OK button.
Congrats! Your iFrame code is generated. Copy the iFrame codes to the HTML block of your website.
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.