Overview
Within any content area on the website, you can select the iFrame option to embed something into the page. There are many different types of content that you can embed using iFrames, for example, maps, page-turning documents or PDF files.
You can only embed content into your page if the external site allows embedding into others.
To embed content from another web page you need the URL (hyperlink) to access it.
Embedding an item into a page
- Navigate to the page where you want to embed the item.
- Select the content area of the page where you would like to insert the item.
- Select the Globe icon on the Edit menu.
- Enter the URL of the item you wish to embed.
- Set the Width and Height of the iFrame to accommodate the content you want to include.
(To make the iFrame fill the page, set the width to 100%) - To make sure your content is accessible using a screen reader, you should enter a description in the advisory title field.
- Select OK.
- To check how the iFrame will appear for your end-user, select Preview on the toolbar:
- Save the page. For more information about save options, visit Juniper Websites: What do the different save options mean?
iFrame content examples
Here are a couple of examples of items that are commonly embedded using the iFrame, with some information about how to obtain the link to set them up.
Getting a link to embed a PDF document within your page
The easiest way to obtain the link required is to add a link to the file on your page, and then copy the link from the dialog box.
- Follow the steps to create a Hyperlink to a document
- Select the document from the File Manager
- Copy the URL from the dialog box, to use within the iFrame:
- Select Cancel to close.
The link (hyperlink / URL) is stored in your clipboard ready to paste into the URL field when you embed an item into your page.
Getting a link to embed a Google Map
- Open https://www.google.co.uk/maps in your web browser.
- Search the map to locate the place you wish to add.
- Select the place on the map you want to create a map for. A panel appears on the left.
- Select Share from the panel:
- Select the Embed tab:
- You will see a preview of the embeddable map.
- Select COPY HTML:
The full iFrame HTML code is stored in your clipboard. If you are familiar with editing HTML source code, you can select the Source option on the Editor toolbar to add the code to your content area.
Otherwise, you will need to extract the link to use within the iFrame tool to paste into the URL field when you embed the item into your page.
In the following example, the link (URL) is highlighted in bold. Copy this text only into the URL field in the iFrame dialog box:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2471.1356128109287!2d0. 46728361606282975!3d51.73055487967229!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2! 1s0x0%3A0x78ed18f8c3b1b0cd!2zNTHCsDQzJzUwLjgiTiAwwrAyOCcxMC4yIkU!5e0!3m2!1sen!2suk!4v1 668157845687!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
Getting a link to embed a SWAY document
When embedding a SWAY document, once you have the embed code like with Google Maps example above there will be a section of the code that is required. The section of the code will be similar to the code that you see in the above example.
Updated