Using iFrames

Within any content area on the website, you can select the iFrame option to embed something into the page. 

There are many types of content that you may wish to embed within your iFrames such as Maps, Page Turning Documents or PDF files.

Please note: This can only be done if the external site allows embedding into others. 

How to embed an item into a page:

• Embedding an item into a page
• Saving the page

iframe Content Examples:

• Getting a link to embed a PDF document within your page
• Getting a link to embed a Google Map
• Getting a link to embed a SWAY document

Embedding an item into a page

Once you have obtained the necessary link please follow the steps below:

• Navigate to the page where you are wanting to embed the item.
• Click into the content area of the page where you are wanting to insert the item.
• Click on 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 wish to include.
  (if you would like the iframe to fill the page, set the width to 100%)
  
  
• Click on OK.
  
  
• To check how the iFrame will appear for your end-user, click the Preview button on the toolbar
  
  

Saving the Page

Click the save button on the Edit Tab and choose the desired save option.  

• Save Now
  • If you see this option, you are able to save and publish your item immediately to make it live on the website.
  • If you have purchased our School News Mobile App, Administrators or Publishers will also be able to tick the option to send a notification to subscribed app users.  
     
• Save Draft
  • This will allow you to save your item without publishing it, and return to continue editing via the Drafts button on the Home Tab
     
• Send for Approval
  • This option enables you to send an item to be reviewed and approved by either an Administrator or Publisher.  Once approved this item will be made live on the site.  

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 go through the motions of adding a link to the file on your page and then copying the link from the dialog box.

• Follow the steps to create a Hyperlink to a document
  
  
• Once you have selected the document from the File Manager, you can copy the URL from the dialog, to use within the iFrame when Embedding an item into a page
  
  

Getting a link to embed a Google Map

• Go to https://www.google.co.uk/maps
  
  
• Search the map to find the place you would like to add a map of
  
  
• Click the map pin for the place and on the panel on the left click the Share option:
• Select the Embed tab:
  
  
  
  
• You will see a preview of the embeddable map.
  
  
• Click Copy HTML:
  
  

• The copied code is the full iFrame HTML code. If you are familiar with using Source code, you can use 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 when Embedding an item into a page
  
  Here is an example.  The section in bold is the link you need to use within the URL of the iFrame dialogue:

  <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.