Embedded UI: Example Embedded Modules

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

Overview

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

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:

Example: Embedding a Single Module

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

Copy

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

Copy

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