You can configure an iFrame widget to display an embedded iframe application on a page.
Considerations
- Auto height feature: The iframe's source application must include the David Bradshaw iframe Resizer library.
- Embedded content is not showing: When content is embedded from a third-party site, ensure the URL uses SSL. Your digital workplace will not display content from sites that do not use SSL. URLs from sites that use SSL will begin with HTTPS instead of HTTP.
- Page load times: iFrames can run complex code, display high-quality images, and pull information from different sources outside of your digital workplace. All these functions can increase the load time of a page, especially if they are waiting on third-party services for data.
Who can do this?
- Workplace administrators
- Site administrators
Set up
- In the Page Builder, select
New Widget.
- From the Widget List, select the
handlebars beside the iFrame widget to drag and drop the widget into place on the Page Builder. See Widget placement on a page for more information on placing widgets on a page.
- Select the placed widget's
Edit button.
- Review and make changes to the settings in the Configuration side panel. See the Settings section below for more details.
- In the Configuration side panel, select Save to apply your changes or Cancel to discard them.
- At the top of the Page Builder, select Save Page to save your changes.
Settings
| Setting | Description |
|---|---|
|
|
Select to expand and collapse the configuration side panel for increased visibility. |
| Widget Title |
Enter a title for the widget. The title appears as a heading above the widget's contents to provide context to the widget and structure the page's content with defined sections. When entering a title, you do so only for the currently selected language. To enter the title for other languages, select the desired language from the Widget Title Languages dropdown and enter a title in Widget Title. |
|
Select a color swatch from the available color palettes or enter a hexadecimal color code for the title's text. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. To enter a hexadecimal color code, use the format: |
|
|
Select a color swatch from the available color palettes or enter a hexadecimal color code for the title bar's background color. The digital workplace's theme configures the availability of palettes and the use of hexadecimal colors. To enter a hexadecimal color code, use the format: |
|
| Widget Title Languages | Select a language from the dropdown to enter a Widget Title translation in the currently selected language. |
| Make Widget Full Width | (Optional) Select to expand the widget to the full width of the available area or page. |
| Source |
Enter an absolute URL for the iframe source. For example, When content is embedded from a third-party site, ensure the URL uses SSL. Your digital workplace will not display content from sites that do not use SSL. URLs from sites that use SSL will begin with HTTPS instead of HTTP. |
| Auto Height |
Turn on to allow the iframe to resize the height of the iframe automatically. To auto-resize the iframe, the source application must include the David Bradshaw iframe Resizer library. This feature is turned off by default. |
| Height |
Enter a value for the iframe height in pixels (px). Use the format: (Optional) This value will be overridden if Auto Height is turned on and the source iframe application supports the David Bradshaw iframe Resizer library. See Auto Height above. The default value is |
Note:
The digital workplace theme determines the appearance of the widget's content unless a widget setting specifically overrides a theme setting. See the Theme article for more information.