--- title: "iFrame Component" slug: "iframe-component" updated: 2025-09-26T06:24:19Z published: 2025-09-26T06:24:19Z canonical: "docs.unqork.io/iframe-component" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # iFrame Component ## Overview The **iFrame** component is a Vega (v2.0) component that lets you embed and display HTML content in your Front-End [modules](/v1/docs/what-is-a-module). With this [component](/v1/docs/module-builder-component-library), you can specify iframe dimensions, or apply a custom CSS class. Use this component by entering an external URL address of a page you want to display inside the iframe. > [!CAUTION] > Iframes are susceptible to XSS (cross-site scripting) attacks. Bad Actor can perform XSS attacks and change the source site URL, install malware, steal information, or hijack clicks and keystrokes. > To embed Unqork content outside of the Unqork Platform without using iframes, view our [Embedded User Interface](/v1/docs/introduction-to-the-embedded-user-interface-ui) article. ## About the Configuration Window > To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Display Settings ### Default State Options [![A static image displaying the iFrame component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(19).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(21).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) | Setting | Description | | --- | --- | | **Hide Field** | Shows or hides the component from view. Setting Hidden to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) (ON) hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) (OFF) shows the component. The component is always visible in the Module Builder. By default, Hidden is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) (OFF). | ### Formatting Options | Setting | Description | | --- | --- | | **URL** | Enter the URL address to display inside of the iFrame component. Embedded URL content larger than the Width and Height field values display as scroll bars. > [!NOTE] > Iframes cannot embed URLs when the **X-Frame-Options** header is set to `DENY`. | | **Width** | The horizontal width of the iframe (in pixels) when displayed in Express View. If the Width field does not have a value, the default width is `300px`. | | **Height** | The vertical height of the iframe (in pixels) when displayed in Express View. If the Height field does not have a value, the default height is `150px`. | | **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. | ## Adding an iFrame Component To use an iFrame component, you must have a URL address to implement. For this example, use the following URL address: https://docs.unqork.io/Content/UnqorkHome.htm. ### Configure the iFrame Component 1. In the Module Builder, drag and drop an Iframe component onto the canvas. 2. In the Property ID field, enter **iframeDocHub**. 3. In the **URL** field, enter `https://docs.unqork.io/Content/UnqorkHome.htm`. 4. In the **Width** field, enter `1200`. 5. In the **Height** field, enter `900`. 6. Click **Save Component**. Preview your module in Express View. The iFrame component displays the URL in a 1200px by 900px box. [![A static image displaying the Express View example of an iFrame component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/iFrame_Component_ExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/iFrame%20Component%20ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) ## Structure of an iFrame Component's Data Using the example above, execute the [Vega Console](/v1/docs/vega-console) command `UNQENG.tools.getComponentState('iframeDocHub')` in the DevTools Console to display the following component data structure: [![A static image displaying the data structure of an iFrame component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/iFrame_Component_DataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/iFrame%20Component%20DataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) ## Resources - [Modify the iFrame component using the toolbar settings](/v1/docs/component-toolbar-settings). - [Embed Unqork applications in external content](/v1/docs/introduction-to-the-embedded-user-interface-ui). - [Discover more about Vega](/v1/docs/welcome-to-vega). The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings. A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address. Cross Site Scripting attacks vulnerability used by malicious entities to bypass the access controls of a website. A bad actor is a cybercriminal or organization that might attempt to exploit vulnerabilites in your environment or application. Common exploits used by bad actors include XSS (cross-site scripting) attacks, malware, randsomware, and more. Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. A Property ID is the unique field ID used by Unqork to track and link components in your module. The DevTools Console helps you securely store, build, test, and deploy your software.