--- title: "Embedded UI Overview" slug: "embedded-ui-overview" tags: ["embedded-ui"] updated: 2026-09-14T19:09:00Z published: 2026-09-14T19:09:00Z canonical: "docs.unqork.io/embedded-ui-overview" --- > ## 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. # Embedded UI Embedded UI lets developers render Unqork modules and workflows directly inside an external web page. End-users complete forms and workflows without leaving the host page. The runtime loads through a single script tag and handles authentication, CSS isolation, error surfacing, and lifecycle management. ## When to Use Embedded UI Use Embedded UI to do any of the following: - Add an Unqork form or workflow to an existing website or app without routing end-users to the UnqorkAI platform. - Let end-users complete multi-step workflows inside a branded interface. - Replace legacy forms and processes gradually by embedding Unqork modules alongside existing pages. - Reuse a single module or workflow across multiple external sites or domains. Embedded UI works with any JavaScript framework or plain HTML. No specific frontend setup is required. ## How Embedded UI Works Adding a single `<script>` tag to a host page loads the Unqork Embedded UI runtime. Once loaded, the runtime creates `window.unqork`, which exposes methods for initializing, mounting, and managing modules. The runtime renders each module inside a Shadow DOM web component. This isolates the module's CSS from the host page and prevents the host page's CSS from leaking in. To embed a module or workflow, complete the following steps: 1. Add the `embedded.js` script tag to the host page. 2. Add a mount target element where the module will render. 3. Call `runtime.initialize()`, then `runtime.mountModule()` or `runtime.mountWorkflow()`, with the module ID and configuration. For full configuration options, see the [Embedded UI In-Depth Setup Guide](/unqorkai/docs/embedded-ui-in-depth-setup-guide). ## What Changed from the Previous Version The earlier Embedded UI, available in the legacy Vega platform, supported single-module embedding only. It used iframes for rendering and relied on third-party cookies for authentication. Third-party cookies are blocked by default in several major browsers, causing authentication failures in those environments. The current version, available in the UnqorkAI platform, supports Runtime 1.0 and Runtime 2.0 (Centauri) modules. Version 9.0 adds iFrame as an intentional embed method alongside Shadow DOM, module-to-module navigation, Unqork Workflow support, and out-of-the-box style compatibility for embedded deployments. | Capability | Previous Version (Vega) | Current Version (UnqorkAI platform) | | --- | --- | --- | | Module embedding | Supported | Supported | | Workflow embedding | Not supported | Supported | | Unqork Workflow support | Not supported | Supported | | Embed methods | iFrame only | Shadow DOM web component and iFrame | | Authentication | Third-party cookies | Multiple strategies | | CSS isolation | iFrame boundary | Full Shadow DOM isolation | | Module-to-module navigation | Not supported | Supported | | Out-of-the-box style compatibility | Not supported | Supported | | Lifecycle management | Basic | Full (initialize, mount, recover, destroy) | | Error handling | Limited | Structured error events | The data exchange interface used in Vega is not part of the current Embedded UI API. For iFrame configuration, see the [iFrame Mode Reference](/unqorkai/docs/embedded-ui-iframe-mode-reference). For all configuration options, see the [Embedded UI In-Depth Setup Guide](/unqorkai/docs/embedded-ui-in-depth-setup-guide). ## Setup Guides | Article | Description | | --- | --- | | [Set Up an Embedded UI Module](/unqorkai/docs/set-up-an-embedded-ui-module) | Embed a single module in an external web page in five steps. | | [Set Up an Embedded Workflow](/unqorkai/docs/set-up-an-embedded-workflow) | Embed a multi-step workflow with navigation and submission persistence. | | [Embedded UI In-Depth Setup Guide](/unqorkai/docs/embedded-ui-in-depth-setup-guide) | Configure every available option: authentication strategies, rendering modes, error handling, lifecycle management, and state persistence. | --- **Changelog** | Date | Change | | --- | --- | | 2026-09-11 | Updated for 9.0: added iFrame embed method, module-to-module navigation, Unqork Workflow support, style compatibility, and Centauri framing to comparison table (EN-8097). | | 2026-07-17 | Editorial sweep: fixed metadata title, POV violations (lines 17, 57), split long sentence (line 28), removed bare table label, replaced broken Resources section with correct See Also. | | 2026-06-09 | Added "When to Use Embedded UI", "How Embedded UI Works", and "What Changed from the Previous Version" sections per EN-7904/EN-7873 scope note. Removed filler adverb from opening paragraph. | | 2026-06-08 | Initial publication: updated title and description, rewrote opening paragraph, improved guide descriptions in the table, added See Also section. | The UI (user interface) is a device's end-user interaction and communication point. It can include display screens, keyboards, and mouse. It is also how a user interacts with your application. Rendering is the process of loading components and displaying the final result on the front-end screen. Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. 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. JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser. HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. Rendering is the process of loading components and displaying the final result on the front-end screen. The Shadow DOM is a web standard that allows you to create encapsulated, hidden DOM subtrees for your web components. It provides a way to scope CSS styles and JavaScript behavior within a component, preventing them from leaking out and interfering with the rest of the page. 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. Rendering is the process of loading components and displaying the final result on the front-end screen. A runtime engine is software that runs on a computer to allow applications to execute. The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. The Document Object Model (DOM) is the data representation of objects that form the structure and content of a document on the web. The DOM represents the page. APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.