External component
The External component is used to embed content from external applications directly on a web page. It is equivalent to an “iframe” or inline frame.
The content from the external site can be basic HTML or more complex interactive media ranging from videos to dynamic applications such as widgets.
See also:
Component(s) you might want to use with this one:
Guidelines
Requests to embed interactive content using the External component should be vetted by the UCS Web team. Embedding code from a third-party site can be risky unless the source is verified to be reliable and secure. Otherwise, it could be a gateway for malicious code to infiltrate your site, or it could include features that can lead to a poor user experience (UX), e.g., pop-ups, auto-play videos, etc.
Accessibility
Given that many types of content from external sites can be embedded using the External component, the content at the source must ideally meet accessibility standards as required by the Government of Quebec before being considered for inclusion on AEM pages.
An embedded application
This is an embedded interactive fee calculator hosted on another site. The height of the frame is set to 500 px so that it exposes all the content without excess blank space below. An optimal height can be determined through trial and error. There's no need to set the width.
Settings
Target application: Enter the link to the embedded content.
Pass parameters: Leave unchecked. (This option for passing parameters to the application is typically not used and can be ignored. If the functionality is required, it can be discussed on a case-by-case basis with the UCS Web team.)
Width and Height: Enter a number for the height in pixels; leave the width field blank.
An embedded video
This is an embedded video hosted on Vimeo. The height of the frame is set to 360 px so that there's minimal blank space above and below the video. An optimal height can be determined through trial and error. There's no need to set the width. The video is automatically centered horizontally and vertically within the frame.
Settings
Target application: Enter the link for the video; for Vimeo videos, the path should be in the format //player.vimeo.com/video/ ending with a unique multi-digit ID, e.g., //player.vimeo.com/video/123456789.
Pass parameters: Leave unchecked. (This option for passing parameters to the application is typically not used and can be ignored. If the functionality is required, it can be discussed on a case-by-case basis with the UCS Web team.)
Width and Height: Enter a number for the height in pixels; leave the width field blank.
Dos
- Do set only the height when using the External component; the width can be left blank.
- Do leave Pass parameters unchecked. (Consult the UCS Web team if the functionality is required.)
- Do use the External component to embed videos that are not hosted on YouTube or Concordia's pegasus server, e.g., Vimeo.
Don'ts
- Don't use the External component to embed MS Forms because there's a known issue wherein the form will be blocked if the user is not already signed in to Microsoft 365. Instead, the recommended method is to copy the code for embedding provided by MS Forms and paste it into a WYSIWYG component.
- Don't use the External component to embed a YouTube video; use the Youtube Video component that was developed specifically for this purpose.
- Don't use the External component to embed videos hosted on Concordia's pegasus server (e.g., mp4 files); use the Media Player component instead.
Helpful tips & "gotchas"
- Links to mp4 files for videos such as those hosted on Concordia's pegasus server may auto-play when the page loads. This is because the External component embeds the mp4 file and leaves the browser to handle it with its default behaviour which in some cases is to auto-play. This is another reason why mp4 video files should be embedded using the Media Player component instead and why multiple videos should be avoided on a page.
Training
The External component is covered in the Advanced training course.
Need support?
The Web team is here to help.