Embedded UI Overview

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 Unqork 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.

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 IDE, supports Runtime 1.0 and Runtime 2.0 modules. It adds workflow support, Shadow DOM rendering, structured error handling, and multiple authentication strategies.

The data exchange interface used in Vega is not part of the current Embedded UI API. For current configuration options, see the Embedded UI In-Depth Setup Guide.

Setup Guides