--- title: "Introduction to the Embedded User Interface (UI)" slug: "introduction-to-the-embedded-user-interface-ui" description: "Unqork's Embedded User Interface allows seamless integration of applications into external sites, enhancing user experience without iframe limitations." updated: 2025-12-03T19:01:11Z published: 2025-12-09T16:46:27Z canonical: "docs.unqork.io/introduction-to-the-embedded-user-interface-ui" --- > ## 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. # Introduction to the Embedded User Interface (UI) Unqork's **Embedded User Interface (Embedded UI)** enables Creators to embed an Unqork [application](/v1/docs/introduction-to-unqork-applications) or [component](/v1/docs/module-builder-component-library) directly into a web page or application outside of the Unqork platform. This modern approach offers a secure and user-friendly alternative to traditional iframes. The runtime is required for Embedded UI. > [!WARNING] > The Embedded UI feature is intended for developers who have a strong understanding of the Unqork Designer Platform and JavaScript. > [!NOTE] > Embedded UI is currently in open beta. Please contact your Unqork representative for more details and access. ## Understanding How Embedded UI Works Embedded UI works by inserting a JavaScript file named `embedded.js` into an external website. This script is a lightweight wrapper for the Runtime API, providing a simple interface to authenticate, initialize, and render Unqork modules. After inserting the file, the Unqork application displays on the external website. End-users can then interact with the Unqork application in a variety of ways: - Respond to actions in the host application. - Send data to and request actions from the Unqork application using the Vega Operation Interface. The `embedded.js` interface is JavaScript and framework agnostic. Meaning, the underlying Unqork technology won't impact a host application's ability to operate or render, regardless of its technology stack. ### CSS Styling Overlap To prevent the host application's CSS from overlapping with the Unqork application, the Unqork runtime creates a new shadow root to safely render and insert its styles. Doing so prevents any conflicts with the host application's styling. ### Embedded UI Advantages The advantage of using Unqork's Embedded UI feature is that you do not experience the same limitations and security risks as iframes. Advantages include: ### Seamless End-User Experience Embed applications picture-to-picture, avoiding iframe limitations and risks to improve the end-user's experience. ### Unqork Functionality Outside Unqork Embed applications containing [integrations](/v1/docs/apis-connecting-your-apps) and [logic](/v1/docs/data-event-processing-components) outside of Unqork. These applications function as they would in Unqork. ### Reusable Applications Configure reusable applications that you can embed across multiple pages and domains. All application instances can share the configuration. ### Incremental Legacy Reconfiguration Embedded UI lets you build and embed smaller applications immediately, while incrementally reconfiguring your large legacy applications to be codeless. ## Embedded UI Limitations Consider the following when using Embedded UI in a website: - **Single** **Module** **Support**: Embedded UI only supports embedding a single module (URL) at a time. - **No Navigation**: Navigation between modules is not supported, including the page output type. - **No Embedded Workflows**: Embedded workflows are not supported. - **Framework Support**: Embedded UI does not support specific JavaScript frameworks at this time. However, frameworks might be compatible depending on the Embedded UI setup requirements and implementation. > [!NOTE] > Unqork can provide an unofficial working example for React, but it's not officially supported or thoroughly tested. - **Authentication**: Authentication does not work if third-party cookies are disabled. For example, when an end-user disables cookies in their browser settings, or uses Chrome's Incognito mode. View the [Third-Party Cookies](/v1/docs/introduction-to-the-embedded-user-interface-ui#thirdparty-cookies) section for more details. - **Direct Targeting**: Direct targeting of elements inside the Shadow DOM is not supported. Creators cannot use the host application's CSS to target elements inside the embedded Unqork application using a class, ID, or tag. All styling must be managed through Unqork's style management features. - **Rich Text Editor Component**: The Rich Text Editor component is not currently supported when using Embedded UI. ### Third-Party Cookies Browser privacy settings and third-party cookie policies can affect Embedded UI functionality. Consider the following: - **Apple Safari and Mozilla Firefox**: These browsers block all third-party cookies by default. For this reason, authentication and Embedded UI will not work unless the end-user manually enables third-party cookies from the Unqork domain. - **Google Chrome**: While Chrome currently allows third-party cookies, it has begun phasing them out as of 2024. - **Incognito/Private Mode**: All major browsers block third-party cookies by default when using Incognito or Private Browsing modes. > [!WARNING] > For Embedded UI to function correctly, end-users must ensure that third-party cookies are enabled for the Unqork domain. ## Embedded UI FAQ (Frequently Asked Questions) Discover common questions about Embedded UI in the section below: --- ### FAQ #### Can it be embedded in React or Angular? Unqork does not officially support specific JavaScript frameworks like React or Single-SPA . However, some frameworks may be compatible based on the implementation. Creators can validate select framework requirements with the technical constraints of Embedded UI. #### Can you embed Unqork Workflows? Embedded UI does not support embedding Workflows at this time. #### How does authorization work? Unqork's Embedded UI feature uses cookies to store an end-user's authentication token. These cookies are used by Unqork to authenticate the end-user. #### Can end-users navigate between modules? No, module navigation is not supported in Embedded UI at this time. However, Creators can use [Dynamic Refresh](/v1/docs/dynamic-refresh) in the embedded moduleto change module content. ## Get Started With Embedded UI Check out our how-to guide and in-depth conceptual articles on Embedded UI: ### [How to: Embed Unqork in an External Application](/v1/docs/embedded-ui-how-to-embed-unqork-in-an-external-application) View the methods that enable you to interact with an Unqork module in real time. ### [Understand the embedded.js File](/v1/docs/embedded-ui-understanding-the-embeddedjs-file) Review the script that embeds the runtime API into an external application web page. ### [Understand the EmbeddedModule Interface](/v1/docs/introduction-to-the-embedded-user-interface-ui) View the methods that enable you to interact with an Unqork module in real time. ### [Examples of Embedded UI Modules](/v1/docs/embedded-ui-example-embedded-modules) Discover examples of embedded single or multi-modules. Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser. 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. 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. Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. A Shadow Root is the root node of a Shadow DOM, which is a hidden DOM subtree attached to an element in the main DOM. It is a fundamental concept in Web Components, providing encapsulation for HTML, CSS, and JavaScript within a component. 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 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. 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.