University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

External Embed Component

For Developers only!

The Help Desk does not support third party code.

Seamlessly incorporate third-party Web-based applications into UBCMS, while maintaining its integrity and reliability.

Be sure to carefully test your code for major bowsers (i.e. Firefox, Internet Explorer, Safari, Chrome) before uploading to the UBCMS. Poor coding may break your page unexpectedly.

Background

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:

  • All of the search pages in UBCMS (example: http://ubcms.buffalo.edu/searchresults.html?q=cms), which use the External Embed component backed by the campus Google Search Appliance (search.buffalo.edu). Note how the "Sort by Date" or "Next Page" links stay embedded in a CMS page, though the search.buffalo.edu app did not have to be customized.
  • 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.
External Embed component in its default state.
External Embed component in its default state.

Using This Component

Add the component to the page. There are three tabs: External, Filters and Wrapper.

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.

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.

External Embed component opened for editing showing the External tab.
External Embed component opened for editing showing the External tab.

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.

External Embed component opened for editing showing the Filters tab.
External Embed component opened for editing showing the Filters tab.

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

External Embed component opened for editing showing the Wrapper tab.
External Embed component opened for editing showing the Wrapper tab.

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.
      • Add -nc to the page's name (e.g. /content/www/yoursite/yourpage-nc.html.)
      • Or make a Special Request to ask us to add your page to a "never cache" list.
    • 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).
  • Redirects – these should work normally.
  • Errors – Any server or script errors will be captured and displayed within the UBCMS page (Demo Site examples).

Restrictions

  1. Only experienced developers should handle this component.
  2. Be sure to carefully test your code for major bowsers (i.e. Firefox, Internet Explorer, Safari, Chrome) before uploading to the UBCMS.

Was this page helpful?

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

On this page:

See an Example:

Master Class Resources:

Related Components:

Last Reviewed:

April 24, 2017