Introduction to the Embedded User Interface (UI)

Overview

Unqork's Embedded User Interface (Embedded UI) enables Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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) 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. 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 JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser..

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 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., 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 Includes the Short Answer component, Long Answer component, Select Boxes, Radio component, Dropdown, Number component and Single Checkbox. 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 Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. from overlapping with the Unqork application, the Unqork runtime creates a new shadow root 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. 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:

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 A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.) 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 JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser. 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 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.  is not supported. Creators cannot use the host application's CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. 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 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. 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:

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