---
title: "iFrame Component"
slug: "iframe-component"
tags: ["module-builder", "vega"]
updated: 2026-09-15T18:03:31Z
published: 2026-09-15T18:03:31Z
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

The iFrame component embeds an external web page or application in a sandboxed inline frame. Use it to display third-party content, dashboards, or web apps directly in a module.

> **How to read settings tables**
> 
> The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: `inline code` — a value to type exactly as shown | **Bold** — a value selected from a drop-down, radio button, tab, or choice chip | **ON**/**OFF** — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

## General Settings

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Property ID | `key` | Text input | `iframe` | The unique identifier for this component instance. |

## Display Settings

### Default State Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Hide Field | `hidden` | Toggle | OFF | Hides the iFrame from end-users but always displays in the Module Builder. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| URL | `options.src` | Text input | — | The URL of the external page or application to embed. |
| Width | `options.width` | Number input | — | The width of the iFrame in pixels (px). |
| Height | `options.height` | Number input | — | The height of the iFrame in pixels (px). |
| Custom CSS Class | `customClass` | Text input | — | A CSS class applied to the iFrame for custom styling. |

## Accessibility Settings

For details on each setting, its options, and when to use it, see [Accessibility Settings Reference](/unqorkai/docs/accessibility-settings-reference).

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Title | `title` | Text input | — | A descriptive title for the iFrame that accurately conveys its contents to users navigating with assistive technology. |

## Operations Builder

This component supports the [Operations Builder](/unqorkai/docs/operations-builder) in Vega modules. When the module or panel runtime is set to **Vega (2.0)**, an **Event Handlers** section displays in the settings panel for configuring event-driven operations.

---

**Changelog**

| Date | Change |
| --- | --- |
| — | Initial publication. |

A Property ID is the unique field ID used by Unqork to track and link components in your module.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

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.

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.