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 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:
<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:
<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)
Learn how the Embedded UI feature works and discover frequently asked questions (FAQ).
How to: Embed Unqork in an External Application
View the methods that enable you to interact with an Unqork module in real time
Understand the embedded.js File
Review the script that embeds the runtime API into an external application web page
Understand the EmbeddedModule Interface
View the methods that enable you to interact with an Unqork module in real time