{"id":1670,"date":"2022-03-22T11:00:54","date_gmt":"2022-03-22T05:30:54","guid":{"rendered":"https:\/\/www.enablex.io\/insights\/?p=1670"},"modified":"2025-06-06T06:23:14","modified_gmt":"2025-06-06T00:53:14","slug":"how-to-generate-iframe-code-using-enablex","status":"publish","type":"post","link":"https:\/\/www.enablex.io\/insights\/how-to-generate-iframe-code-using-enablex\/","title":{"rendered":"Learn How to Use EnableX Visual Builder To Generate Video Call iFrame Code"},"content":{"rendered":"

EnableX Visual Builder<\/span><\/span><\/a> offers<\/span> the easiest way to quickly add video calling to your website using an <\/span>iFrame<\/span> code. Once you select the required features, text size, font, colo<\/span>u<\/span>r that you want to see in your video calling, you receive a single line of <\/span>iFrame<\/span> code that you need to embed on <\/span>website<\/span> and <\/span>mobile <\/span>app.<\/span><\/span><\/p>\n

 <\/p>\n

A Step-by-Step Guide<\/span><\/b>\u00a0<\/span><\/h2>\n

For the sake of simplicity, this tutorial will walk you through the process on how to generate a low code iFrame embed using the EnableX Visual Builder.<\/span>\u00a0<\/span><\/p>\n

Here is how you can do it step by step:<\/span>\u00a0<\/span><\/p>\n

1. Create Project<\/strong><\/h3>\n

A. Sign Up<\/span><\/span><\/a>\u202f<\/span>to create a<\/span>n<\/span> account <\/span>on <\/span>the EnableX Portal. Once you are in the portal<\/span> dashboard<\/span>, press\u202f<\/span><\/span>Add Project<\/span><\/span>\u202fbutton.<\/span> You are directed to <\/span>your <\/span>Project<\/span>\u00a0Dashboard<\/span> where you can press the <\/span><\/span>Create Project<\/span><\/span> button to start creating <\/span>a video call <\/span>project.<\/span><\/span><\/span><\/span><\/p>\n

 <\/p>\n

\"Video<\/p>\n

 <\/p>\n

B.Next, fill in the mandatory project details like <\/span>Project Name<\/span><\/b>, <\/span>Application <\/span><\/b>and <\/span>Description <\/span><\/b>fields.\u00a0 Now, enable <\/span>Video <\/span><\/b>provided under <\/span>Capabilities<\/span><\/b>, and Press the <\/span>Create Project<\/span><\/b> button.\u00a0\u00a0<\/span>\u00a0<\/span><\/p>\n

Note:<\/span><\/b> Fields marked with (*) are mandatory.\u00a0<\/span>\u00a0<\/span><\/p>\n

 <\/p>\n

\"create<\/p>\n

 <\/p>\n

C. It throws a pop-up informing APP KEY and App ID<\/span> are ready<\/span>. Now, <\/span>p<\/span>ress<\/span> the<\/span> <\/span>Get Started<\/span><\/span><\/strong> button <\/span>on the Pop-Up.<\/span><\/span><\/p>\n

\"App<\/p>\n

 <\/p>\n

 <\/p>\n

2. Select Pre-built Template<\/span><\/span><\/strong><\/h3>\n

\u00a0<\/span><\/p>\n

A. Choose the \u2018I Prefer Less Code\u2019 option and click the <\/span>Start Building<\/span><\/b> button.\u00a0 It heads you to Low-Code Video Embed page.<\/span><\/p>\n

\"Try<\/p>\n

 <\/p>\n

B. Now<\/span>,<\/span> choose the relevant template per your <\/span>use case <\/span>requirement<\/span>.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

For example, if you select the Virtual Classroom template, you are directed on the page where you can review the Virtual Classroom UI template and features. You can also add or delete any feature if you want<\/span> <\/span>using <\/span>this Visual Builder tool<\/span>.<\/span><\/span> \u00a0 <\/span>\u00a0<\/span><\/p>\n

Now, click the <\/span>Next <\/span><\/b>button provided at the bottom right part. It directs you to Setup Sub-domain page.<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

C. <\/span><\/span>Set subdomain and whitelisted domains<\/span><\/span><\/p>\n

Now, you need to specify your subdomain, which will be hosted on the <\/span>EnableX<\/span> domain. You can select a sub-domain in the\u202f<\/strong><\/span><\/span>Set Your Sub<\/span>–<\/span>domain<\/span><\/span><\/strong>\u202ffield.<\/span> Once, you select <\/span>the <\/span>preferred <\/span>sub-domain<\/span>, click the <\/span><\/span>Next<\/span><\/span><\/strong> button.<\/span><\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

* After selecting the sub-domain, press the Check Availability button.<\/span><\/i>\u00a0<\/span><\/p>\n

* Whitelisted domains are list of allowed domains that you trust. You can do this later as well<\/span><\/i>\u00a0<\/span><\/p>\n

This directs you to the <\/span>Edit Template<\/span><\/b> page where you can customise it at the granular level of UI, features and capabilities. It <\/span>has\u00a0five<\/span><\/span> tabs to <\/span>perform different functions:<\/span><\/span> <\/span>On-screen Layout, Toolbar Display Settings, Feature Selection, Moderator Settings, Accessories<\/span><\/b>.<\/span><\/p>\n

3. Customi<\/span>s<\/span>e<\/span> Your UI with Visual Builder<\/span><\/p>\n

These<\/span>\u00a0<\/span>UI templates are<\/span> preloaded with <\/span>relevant feature<\/span>s<\/span> based on the <\/span>use case<\/span>, but you can easily <\/span>customise <\/span>them<\/span> further. <\/span>Else, you <\/span>can skip this <\/span>step<\/span>.<\/span><\/p>\n

A. Go to the\u202f<\/span><\/span>On-Screen Layout<\/span><\/span>\u202ftab, select your preferred room layout, such as Room Size, Participant\u2019s & Moderator\u2019s View.<\/span>\u00a0<\/span><\/span>\u00a0<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

* At <\/span>EnableX<\/span>, we can provide up to 100 participants’ room size. However, the Visual Builder gives you the option to choose up to <\/span><\/span>50 participants<\/span><\/span>. If you need to extend your room size, please <\/span><\/span>contact our<\/span><\/span><\/a> sales.<\/span><\/span><\/p>\n

B. Now,<\/span> come to <\/span>the <\/span><\/span>Toolbar Display Settings<\/span> <\/span>tab<\/span> and <\/span>select the features you want to show on<\/span> your toolbar. <\/span>You can choose Meeting Room Name, Duration, Participants\u2019 Number, Full-Screen options<\/span>. <\/span>It also gives you the option to keep the toolbar either fixed or movable.<\/span><\/span><\/p>\n

\"\"<\/p>\n

C. Next, come to the <\/span>Feature Selection<\/span><\/b>\u202ftab, which provides you with the option to choose basic, collaborative and other advanced features. You can select collaborative features, such as recording, screen share, chat or whiteboard that you need in your video calling.<\/span><\/p>\n

In addition, you also get many premium features, such as Co-browsing, Live Stream, Virtual Background. You can also select a preferred Video Grid layout like Gallery or Leader view or both.<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

*\u202f<\/span><\/span>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 <\/span>toolbar<\/span> and which one\u202fwill be hidden under (\u2026).<\/span><\/span><\/p>\n

D. <\/span>Head to the <\/span><\/span>Moderator Settings<\/span><\/span><\/strong>\u202ftab, you <\/span>get plenty of options for moderator control<\/span>s<\/span>. It has all the <\/span>basic features<\/span> like <\/span>such as Floor Access Control, Lobby, Breakout Room and Room Lock features.<\/span> Based on your requirement, you can enable\/disable the Administrator setting<\/span> as shown in the picture given below.<\/span><\/span><\/p>\n

\"\"<\/p>\n

If you don\u2019t want to display Exit button, disable the <\/span>Display Exit Button.\u00a0<\/span><\/b>\u00a0<\/span><\/p>\n

*<\/span><\/i>Exit\/Sign Out URL:<\/span><\/i><\/b>\u202fState the URL prefixed by \u201chttps:\/\/\u201d that you want the participants to receive after they Sign out\/Exit or disconnect from the session.<\/span><\/i>
\n*Basic Terminologies:<\/span><\/i><\/p>\n