Introduction to the Embedded User Interface (UI)

Overview

Unqork's Embedded User Interface (Embedded UI) enables Creators to embed an Unqork application or component 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 Unqork Vega (2.0) runtime is required for Embedded UI.

The Embedded UI feature is intended for developers who have a strong understanding of the Unqork Designer Platform and JavaScript.

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 and logic 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.
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 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.

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.

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 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: