iFrame

This simple but essential widget allows you to easily place an iFrame on your site. Allowing you to essentially display a website within a website, iFrames make it possible to incorporate data and tools from other sites or third party services.
Consider using this widget when you need to incorporate a complicated data-driven service from another site, such as a real estate search or a booking form. This approach is quick, low cost, and does not require any HTML embed code.

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget onto your page, placing it where you would like the iFrame to appear.
  • Resizing the dimensions of the iFrame can be done in the Design Settings. Do not use the blue resize handle on the widget container to resize the iFrame. More information on resizing can be found in the Design section below.
  • Open the widget option panel.
  • Unique ID: If you plan to use multiple iFrame widgets on the same page, make sure to use unique IDs for each widget.
  • iFrame Source URL: This is the source of the webpage inside of the iFrame.
  • Allow Fullscreen Mode: This allows the iFrame to go fullscreen if the site inside the iFrame attempts to go fullscreen. For example, when the site visitor enables fullscreen viewing on a YouTube video, this toggle must be enabled to allow the site inside the frame to go fullscreen. Note: this does not control the size or dimensions of the iFrame itself (unless a fullscreen command is triggered inside the iFrame).
  • Allow Payment Requests in iFrame: This allows the payment API built in the browser to work with iFrames.
  • iFrame Loading: There are two loading modes, Eager and Lazy: Eager is the default loading mode, which loads the iFrame immediately. Lazy loading mode delays loading the iFrame until it is in the viewport. This mode can improve the appearance of page load speeds. Note: this feature is not supported by all browsers.

DESIGN SETTINGS

  • Horizontal Alignment: This setting aligns the iFrame left/center/right.
  • Width/Height: The size of the iFrame is set here, manually. Do not use the blue resize handle to resize the widget container.
  • Negative Margins: These settings for the iFrame top/bottom/left/right allow you to “crop” the iFrame if you like. An example of a situation where this could be useful is when there is an icon, logo or header that you do not want to display within the iFrame.

The remaining design settings are labeled with their exact function, and will not be discussed here, as they are self explanatory.

TIPS

  • It is generally best if the source site of the iFrame is a small page. Generally, iFrames are used when the source page only contains the basic item you wish to display in the iFrame, such as a form or map.
  • By default, the iFrame will display the source site from the top of the page. While it is an advanced technique that requires some basic knowledge of HTML, you may display iFrame content based on a defined position on the source page. To do this, you must inspect the source page, and identify the ID for a container on the page. You can then append the URL with the container ID. This technique is discussed briefly in the tutorial video above, and in more detail here.