---
title: "Embedded UI: Example Embedded Modules"
slug: "embedded-ui-example-embedded-modules"
updated: 2025-09-26T06:41:24Z
published: 2025-09-26T06:41:24Z
canonical: "docs.unqork.io/embedded-ui-example-embedded-modules"
---

> ## 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: Example Embedded Modules

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

## Overview

While every Embedded UI setup is unique, the two examples below demonstrate how to **embed a single** **module** **or multiple** **module****s**.

> [!NOTE]
> Embedded UI is currently in open beta. Please contact your Unqork representative for more details and access.

## Examples of Embedded Modules

Click on the tabs below to view completed configurations of single or mutli-module embeds:

Embed a Single ModuleEmbedding Multiple Modules

### Example: Embedding a Single Module

Below is an example of the completed configuration for embedding a single module into your external application:

```javascript
<auth></auth>
<mod-1></mod-1>
<script src="https://trainingx.unqork.io/embedded.js"></script>
<script type="module">
const runtime = unqork.runtimes.default
await runtime.initialize()
const isAuthenticated = await runtime.isAuthenticated()
if (!isAuthenticated) {
  const entrypointUrl = runtime.getSamlEntrypointUrl('https://example.com')
  const link = document.createElement('a')
  link.style='cursor:pointer'
  link.innerText = 'You are not logged in. Click here to log in using My IdP.'
  document.getElementsByTagName('auth')[0].appendChild(link)
  const authFrame = await new Promise(resolve => {
    link.onclick = () => resolve(window.open(entrypointUrl, 'popup', 'popup=true'))
  })
  await runtime.waitForAuthFrameCompletion(authFrame)
  authFrame.close()
  link.remove()
}
await runtime.mountModule({
  target: 'mod-1',
  moduleId: '654bd77da2f5afd918d9abe6'
})
runtime.start()
</script>
```

### Example: Embedding Multiple Modules

Below is an example of the completed configuration for embedding multiple modules into your external application:

```javascript
<auth></auth>
<mod-1></mod-1>
<mod-2></mod-2>
<script src="https://trainingx.unqork.io/embedded.js"></script>
<script type="module">
const runtime = unqork.runtimes.default
await runtime.initialize()
const isAuthenticated = await runtime.isAuthenticated()
if (!isAuthenticated) {
  const entrypointUrl = runtime.getSamlEntrypointUrl('https://example.com')
  const link = document.createElement('a')
  link.style='cursor:pointer'
  link.innerText = 'You are not logged in. Click here to log in using My IdP.'
  document.getElementsByTagName('auth')[0].appendChild(link)
  const authFrame = await new Promise(resolve => {
    link.onclick = () => resolve(window.open(entrypointUrl, 'popup', 'popup=true'))
  })
  await runtime.waitForAuthFrameCompletion(authFrame)
  authFrame.close()
  link.remove()
}
await runtime.mountModule({
  target: 'mod-1',
  moduleId: '654bd77da2f5afd918d9abe6'
})
await runtime.mountModule({
  target: 'mod-2',
  moduleId: '659f521e9dec2e14895dc433'
})
runtime.start()
</script>
```

## Resources

### [Introduction to the Embedded User Interface (UI)](/v1/docs/introduction-to-the-embedded-user-interface-ui)

Learn how the Embedded UI feature works and discover frequently asked questions (FAQ).

### [How to: Embed Unqork in an External Application](/v1/docs/introduction-to-the-embedded-user-interface-ui)

View the methods that enable you to interact with an Unqork module in real time

### [Understand the embedded.js File](/v1/docs/introduction-to-the-embedded-user-interface-ui)

Review the script that embeds the runtime API into an external application web page

### [Understand the EmbeddedModule Interface](/v1/docs/embedded-ui-understanding-the-embeddedmodule-interface)

View the methods that enable you to interact with an Unqork module in real time

JavaScript is an object-oriented computer programming language. It is most-commonly used for interactive effects in the browser.