How to Add an iFrame (Frame Component) in Cascade CMS

This article provides step-by-step instructions for adding a Frame (iframe) component in Cascade CMS. It covers how to insert the component, configure required fields (headline, source URL, height, and width), and preview the embedded content to ensure it displays correctly and accessibly.

Summary

An iframe (Frame component) allows you to embed content from another website or system directly into your page without recreating it in Cascade CMS. This is useful when you need to display content that is managed externally or updated frequently, such as forms, dashboards, maps, YouTube videos, or third-party tools.

Using the Frame component provides an accessible way to embed this type of content, ensuring it is implemented in a manner that aligns with accessibility best practices. It also helps maintain consistency with the source, reduces duplication, and allows updates to occur automatically without requiring additional edits in Cascade.

---

Note:

Before starting, you must be logged in to post a campus notice on Central Today.

Log in at https://cwu.cascadecms.com using your CWU credentials.

After logging in, select the CWU site from the “Go to a Site” drop down in the upper-left corner.

 

Step 1: Open the Page for Editing

• In the asset pane (left column), locate and select the page where you want to add the Frame.
• Click Edit at the top of the main screen.

 

Step 2: Navigate to the Components Section

Scroll down to the Components section on the edit screen:

• If the page already has components:
  • Click the “+” (Add Component) icon next to any existing component.
• If there are no previous components (this is your first component) go to next step
• In the Type dropdown menu:
  • Select Frame

 

Step 3: Configure the Frame Fields

After selecting Frame, additional fields will appear.

• Review the help text above each field for guidance.
• Complete all required fields:
  • Headline – Title displayed above the frame
  • Content – This is an optional field. The text in this box displays above the iFrame content and below the Headline 
  • Frame Source – URL of the content to embed
  • Height – Height of the iframe (e.g., 300px)
  • Width – Width of the iframe
    • You may use percentages (e.g., 100% to span full width)

Example:

In this example, the heading of the Frame is "Using Frame." No Content has been used, and the height of the frame has been set to 200, with the width of 100% in order to make the content span the width of the available horizontal space. 

 

Step 4: Preview the Content

• Scroll to the top of the page.
• Click Preview Draft to confirm the embedded content displays correctly.

 

Results

The external content will display within an accessible iframe on your page.