.

The iframe component, whose option icon is shown below, embeds content from another site into your page.

Iframe etiquette

Any web page can be embedded in an iframe, but you should ensure that you have the permission of the site owner to embed their content. There have been legal cases due to a website being framed without permission (see, for example, Washington Post Co. v. Total News, Inc.).

Embedding a page that has not been designed for use in iframe will lead to a poor visitor experience. For example, if the page is larger than the iframe then scroll bars will be required. Additional scroll bars within a page confuse visitors, and horizontal scroll bars are particularly difficult to use.

Iframes in third-party widgets

Many sites provide widgets that can be embedded within your site, and these widgets often use iframes. The third-party site will provide HTML code, which might look something like this:

<!-- begin example.com widget --> 

<div id="example-widget"> 

<iframe src="http://example.com/widget/" width="200" height="400" scrolling="no"> 

</div> 

<!-- end example.com widget -->

If the code contains the word iframe (highlighted in blue in the example above) then the widget uses an iframe. Shortly after the word iframe you should see the word src followed by an address within quotation marks (highlighted in orange in the example above): this is the address to use in the iframe component.

If the code also contains the word script then the widget also uses JavaScript, which isn’t supported by the iframe component. Contact your local consultant if you need to add code that includes JavaScript.

Editing an iframe

Click anywhere on an iframe to display the iframe editor:

The iframe editor lets you change the following settings:

Address to show

The address of the content to show in the iframe.

Height (in pixels)

The height, in pixels, of the iframe.

Scroll bars

Whether to show scroll bars on the iframe always, never, or only when the content is larger than the iframe.

The following settings control what the content in the iframe is allowed to do. By default the allow forms, allow scripts, and allow same origin settings are checked, but you may find you need to check the allow top navigation or allow pop-ups settings for widgets such as booking forms (which tend to load a new page when submitted) to work properly.

Allow forms

Check this setting to allow forms to be submitted within the iframe.

Allow scripts

Check this setting to allow content in the iframe to run JavaScript code.

Allow same origin

Check this setting to allow JavaScript code within the iframe to communicate with the website that hosts the content.

Allow full screen

Check this setting to allow the content in the iframe to expand to cover the full screen.

Allow pointer lock

Check this settings to allow the content in the iframe to hide the mouse pointer and use the mouse for input — this is useful for 3D games, for example.

Allow pop-ups

Check this setting to allow the content in the iframe to a load a new page in a new window or tab.

Allow top navigation

Check this setting to allow the content in the iframe to a load a new page in the current window or tab.

Click OK to apply the changes to the iframe. Click Cancel to return to the page without changing the iframe.