Embedding Content

There are instances where you may want to embed pieces of Connect content into other websites. This is possible with iframes, and there are a few best practices to make the process as smooth as possible.

Content in iframes is subject to the same authentication rules as when it is viewed within Connect, so it is possible that users will need to log in to see the content when visiting the page.

Setup

In order for the Connect auth flow to return back to the initial page after a successful completion, two pieces of information need to be set.

  1. The TrustedRedirect config option
  2. The framesource parameter

TrustedRedirect is a configuration option that must be set by your server administrator. You can have unlimited trusted redirect URLs, but they must match the locations of your iframes. For example, if your content is on the site https://parent.page.com/connectStuff, the TrustedRedirect config line will look like the following:

TrustedRedirect="https://parent.page.com"

framesource is a URL query parameter that must be added to the iframe src attribute. For example, if the Connect content you want to embed is available at https://connect.my-site.com/myApp, and you want to add it to a page outside of Connect, at https://parent.page.com/connectStuff, add an iframe on https://parent.page.com/connectStuff like the following:

<iframe src="https://connect.my-site.com/myApp?framesource=https://parent.page.com/connectStuff"></iframe>

Behavior

When configured and embedded properly on a third party site, content behavior in the iframe depends on whether or not a user is already authenticated with your Connect instance:

  • Authenticated users: content automatically loads in the iframe without the need to log in again.

  • Unauthenticated users: a prompt to log in to view the content loads in the iframe. Following this prompt takes the user through the authentication flow associated with your Connect instance, after which they are returned back to the original page.

We recommend verifying both scenarios to ensure that your embed is properly configured.

Troubleshooting

  • If content is not loading within the frame, make sure that you are using the Content URL, which can be found on the Access tab of the Settings pane.

  • If content is not showing in Safari (Mac or iOS) specifically, make sure you uncheck “Prevent cross-site tracking” in Safari > Settings > Privacy.

  • If the auth flow is redirecting to the Connect dashboard, make sure that the framesource parameter is set in the iframe src as above. Do not use a different parameter name.

  • If the auth flow is redirecting elsewhere, make sure that the URL associated with the framesource parameter is properly set to the initial page URL, including any trailing paths.

  • If the auth flow ends with a Changing host or scheme in redirect is forbidden or Illegal redirect to unsafe host error, make sure that your server admin has properly set the TrustedRedirect config, with the full server URL of the site (this setting does not require trailing paths).