External Embed Component

Integrate third-party content (e.g. external scripts or databases).

For developers only!

The DCT Help Team does not support third party code.

Don't be misled by the name.

The HTML Snippet is usually a better tool to 'embed' or host content from third party apps.

On this page:

Accessibility
  • Custom code must be accessible.
  • Third party content must be accessible.
  • Font size and contrast.
  • Link text should be meaningful.
  • Images require Alt text.
  • Let users control animations.

> Read more about making this component accessible.

When you use this component, your team commits to maintaining the security, accessibility, and stability of any linked site or code.

Last reviewed: May 6, 2022

Overview

If you have Web-accessible scripts that need to run on a server, especially if they are services your website provides, rather than tools to help manage the content of your website, they belong on a separate server from the CMS. This could be the server they're already on, Wings, a server you manage yourself, or in the cloud.

To present these external services in the context of your UBCMS site (header, footer, navigation), you can use the "External Embed" component. This is almost like an iframe, but runs on the server side and is relatively unnoticeable to the website visitor.

At the point on the UBCMS page where you add the External Embed, your external application will be requested and embedded into the page. This is designed to work even if your application has multiple pages and embedded resources that link among each other.

In addition to the External Embed component, you could also use HTML Snippet components to embed HTML and JavaScript in your UBCMS page that are coded to interact with your external application via AJAX or similar techniques.

Examples of these techniques already in use include:

  • The SMBS Faculty Browser (http://medicine.buffalo.edu/faculty.html), which is actually a bunch of ASP scripts on a separate backend server, including the profile pages, different tabs and search.
  • The Parking and Transportation Mobile page (http://mobile.buffalo.edu/more_ub_mobile/transportation.html), which uses some AJAX techniques to add highlighted alert markers (the red number "2" right now) to a few links if there is more info available in a back-end application, and then (if you click one of those links), uses an External Embed component to display the external content within the UBCMS page.
  • The Services Status dashboard on the UBit home page (http://www.buffalo.edu/ubit.html), which is an External Embed.

Using This Component

There are three tabs: External, Filters and Wrapper. Click the wrench icon to configure these settings.

Technical Restrictions

  1. Only experienced developers should handle this component.
  2. Be sure to carefully test your code for major bowsers before integrating into the UBCMS.
Test carefully!

You may break your page unexpectedly and the Help Desk does not support custom code.

Configure - Main Settings

External Tab

Zoom image: The component opened for editing showing the main 'External' tab. The component opened for editing showing the main 'External' tab.

The component opened for editing showing the main 'External' tab.

Target application - Provide the source URL of your third-party application that will be embedded.

Rewrite limit - Define how the embedded content will perform when a link is clicked.

  • No limit - All clicks will stay within the UBCMS page.
    • This option is not very safe since potentially non-approved content may then be shown as if it were actually part of your own site.
  • Host - Clicks outside your application's server will leave the UBCMS page. This is good for multi-page applications.
  • Off - ALL clicks will leave the UBCMS page. This is good for simple content.
For Pages With Multiple Embeds...

When more than one External Embed component is on the same page, Rewrite limit should be set to 'Off' to avoid conflicts (e.g. a 'not trusted' error).

Pass parameters - Allow the Web application to pass parameters from your UBCMS page (e.g., for search queries or forms).

Component handle - Choose to display the component's gray bar and descriptive label in Author (recommended).

Description: Enter a descriptive label for the component that will be shown on your page in Author (recommended).

Timeout (ms) - Define how long the UBCMS should wait for the external server to supply your embedded content (default is 20,000 or 20 seconds).

Error content - Display this page on your UBCMS site if the external content cannot be displayed.

Filters Tab

Zoom image: The component opened for editing showing the Filters tab. The component opened for editing showing the Filters tab.

The component opened for editing showing the Filters tab.

Click the button with the plus (+) mark to define any regular expressions and replacement patterns for the application. This can be used to adjust the code supplied by the external application, but ideally any adjustments would be made on the external application.

Wrapper Tab

Zoom image: External Embed component opened for editing showing the Wrapper tab. External Embed component opened for editing showing the Wrapper tab.

You may type or paste HTML to be included before and after the application’s HTML. (Ideally you would instead set this up in the external application itself.)

Additional Notes

When creating the third-party application:

  • Server caching. Be advised that the UBCMS has server side caching. Pages are normally stored until there is a change by an author, and changes in an externally embedded third-party application do not qualify as an author change unless they include a form or parameters are passed. Workarounds include:
    • Set the page to never be cached.
    • Manually (re)activate any page on your site to clear all of your site's pages from the cache, including your external embed page(s).
  • Be careful with links – relative links may break.
  • Skip the header and footer – these will always be supplied by the UBCMS host page.
  • SSL - Be careful if your third party content needs to be accessed securely. Your main page may be insecure and this will cause a browser security conflict.
  • Forms - POST and GET both work.
  • Cookies – will NOT be passed through.
  • HTTP headers – will NOT be passed through.
  • Authentication – will NOT be passed through (e.g. Shibboleth credentials).
    • If authentication is used on the UBCMS side, the credentials (username,
      etc.) will not be passed to the external application.
    • If the external application requires authentication (Shibboleth,
      cookies, http basic auth, etc.), it will not work in a UBCMS external embed
      because this data (cookies, headers) are not passed through.
  • Redirects – these should work normally.
  • Errors – Any server or script errors will be captured and displayed within the UBCMS page (Demo Site examples).

Consider how this custom code will display in smartphones and other small screen devices.

Consider how this custom code may impact page performance.

Accessibility Concerns

See an Example

Master Class Resources

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)
(Required)