What do I need to embed an application in an iFrame?

The Application URL from the publish dialog, and your website's address added under Settings > Security > Content Security Policy > Who can embed this app.

App iFrame embed | UnifyApps integration guide docs

Q: Can visitors use a Private application in the iFrame?

Yes, after they sign in inside the frame. To embed a Private application with visitors already signed in, use the JavaScript, React or Angular SDK.

Overview

Use an iFrame to show a page of your UnifyApps application inside any website by adding an <iframe> tag. It's the quickest option for a Public application, which anyone can open without signing in.

A Private application shows its sign-in page inside the frame until the visitor signs in. To embed a Private application with visitors already signed in, use the JavaScript SDK, React SDK or Angular SDK. To embed a platform module such as the Automation Manager, see Platform iFrame.

Step-by-Step Instructions

Step 1: Publish the App and Copy Its URL

Publish your application. The publish dialog shows its Application URL; click Copy link. This is the address the frame opens. To open a specific page, use that page's address in the published app.

Step 2: Allow Your Website to Embed the App

Content Security Policy is on by default. Until you add your website to it, the browser blocks your app from loading in that site's iFrame.

Open your app and go to the Settings tab.
Under Security, select Content Security Policy.
Under Who can embed this app, click Add URL and enter your website's address, for example https://example.com.

Your website's origin must also be allowed for your UnifyApps environment. If the frame loads but stays empty, contact support@unifyapps.com to have your origin allowed.

Step 3: Add the iFrame to Your Page

Paste this snippet into your page and replace <APPLICATION_URL> with the address from Step 1:

<iframe
  id="unifyapps-embed"
  title="UnifyApps application"
  src="<APPLICATION_URL>"
  style="border: none; width: 100%; height: 800px;"
></iframe>

Change the height to fit your layout.

Step 4: Pass Page Inputs (Optional)

To pass values to the page, add them to the URL as query parameters: ? before the first one and & between the rest. Each name must match an input the page declares in its page settings; the value is read as that input's type. Pass an object or a list as JSON.

<APPLICATION_URL>?queryId=1342&status=open

Step 5: Verify the Integration

Open your page and check that the application page loads in the frame.
If the frame is blank, check the browser console for a framing (frame-ancestors) error and review Step 2.
If a sign-in page appears, the application is Private. Make it Public, or use one of the SDKs.

A published application in a plain iFrame doesn't send its page changes to your page. To keep the application's page in your URL, use the JavaScript SDK's onPageEvent.
The session request in the Authentication overview also returns a redirectUrl that signs the visitor in and then opens the returnTo address sent with the request. Whether that signed-in session holds inside a frame on another website depends on your identity provider's cookie settings and the visitor's browser, so confirm your setup with support@unifyapps.com before you rely on it. The SDKs handle sign-in for you.

Application iFrame