Pages 2.0 | iFrame Widget

This article details what the iFrame widget is and how to manage it.

Pages 2.0 refers to the new version of Happeo Pages, released on April 2, 2025. All Happeo accounts created from this date onward use the new page editor by default.

What is the iFrame Widget?

The iFrame Widget allows you to embed external content directly onto your page. This enables you to incorporate diverse content, such as live news feeds, surveys, project management dashboards, etc. By leveraging iFrames, you can enrich your page and provide a more engaging user experience. For instance, embedding online training modules can streamline employee onboarding and development, making it easier to access and complete courses directly within the page.

For more information about adding widgets to your page, please see this article.

How to add an iFrame

To add an iFrame to your widget:

1. Click the Add iFrame button in the center of the widget
2. Enter the URL or embed code
   • URLs must start with “https://”
   • A preview of the embedded content will be displayed
3. Click Select

URL embedding

You can use a URL to embed entire web pages or specific content from certain websites. However, embedding can be tricky, as many websites have security measures to prevent unauthorized embedding.

Embedded code

The Embed option lets you add content from external sources directly to your page. Many websites offer embed codes for specific content, such as weather forecasts or public transportation schedules. By pasting this code into the embed widget, you can seamlessly integrate this content into your page.

How to manage the iFrame widget

To manage the iFrame widget:

1. Navigate the page group where the widget resides
2. Click the pencil icon at the top right of the page to open the page editor
3. Hover your mouse over the widget until it is highlighted in blue, and click on it
4. Select the settings(gear) icon at the top right of the widget
5. A new window will open where you can adjust the widget's settings. You can switch between the Configure and Styles tabs to adjust what is displayed and how the content is displayed

Configure

• Replace iFrame content – To replace the embedded content, click the rewind button on the iFrame preview and follow the instructions above (‘How to add an iFrame’)
• Remove iFrame content – To remove the embedded content, click the trash bin icon on the iFrame preview
• Add a widget header– Add a header to the widget. Once toggled, you can type the widget’s header in the text field that appears above the widget

Styles

• Background color– Select the background color of the section. The colors available to you will depend on what the system default is and the brand style you are using
• Padding–Adjust the amount of background visible behind the widget. You can set a value between 0px and 100px. A larger value will show more of the background, making the section header and content appear smaller. A smaller value will minimize the background visibility, making the widget appear larger. Adjust the slider to fine-tune the amount of padding
• Round corners–Round the corners of the widget between the values 0px and 100px. A larger value will make the widget corners appear rounder, whereas a lower value will make them appear sharper

Examples of embedded content

Surveys

Using the iFrame Widget, you can embed surveys, such as SurveyMonkey, on your Page. Simply copy the survey's embed code and paste it into the embed option in the iFrame Widget.

For more information, click here.

Weather widgets

You can use Meteoblue to embed a weather widget into your Happeo page. Please follow the instructions below.

1. Go to meteoblue.com - Please note that the website linked herein is a third-party tool that has not been developed by Happeo
2. Click Widget from the sidebar and select your preferred widget
3. Scroll down to Configure your widget and select the settings you wish to have for your widget
4. You can find a preview of the widget on the right of the settings
5. Copy the HTML code at the bottom of the page
6. Paste the HTML code in the Embed field and click Select

More information about widgets

To read more about what widgets are and how to resize, copy, and delete them, please refer to this article.

FAQs

Is it safe to embed content from other websites using an iFrame?

iFrames offer a great way to embed content from external sources to your page. They also incorporate built-in security features, which Happeo leverages by default. However, it's crucial to exercise caution and consider the potential security risks involved.

While iFrames have built-in security features, they can still pose vulnerabilities.

To minimize risks, embed only from trusted sources. Prioritize embedding content from reputable and secure websites.

Can websites prevent their content from being embedded in iFrames?

Yes. Many websites have security measures, like Content Security Policy (CSP), that restrict where their content can be displayed. If you try to embed content from a website that does not allow it, you might encounter an error message.

How do I adjust the size of the iFrame?

You can adjust the size of the iFrame by resizing the widget itself. You can drag on the corners, sides, top, and bottom of the widget to stretch or minimize it within its section.

How can I protect user privacy when using iFrames?

Be mindful of the privacy implications of embedding third-party content. Ensure the embedded content respects user privacy and complies with relevant data protection regulations. Avoid embedding content from sources that track user behavior or collect personal information without explicit consent.

Can iFrames impact page loading performance?

iFrames can impact page load times, particularly when embedding large or resource-intensive content. To optimize performance, prioritize embedding smaller, faster-loading content.

How can I ensure a good user experience with iFrames?

To provide a seamless user experience, consider the following:

• Responsive design– Ensure that the embedded content adapts to different screen sizes and devices
• Clear context – Make it clear to users that they are viewing content from an external source
• Accessibility – Ensure that the embedded content is accessible to users with disabilities, following accessibility guidelines like WCAG