Using iFrame's

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

• Click on the Globe icon on the Edit menu.

• Enter the URL of the item you wish to embed.

• Set the height of the iFrame to accommodate the content you wish to include. Click on OK
  
  
• To check how the iFrame will appear for your end-user, click the Preview button on the toolbar.  

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

There are many types of content that you may wish to embed within your iFrames such as Maps, Page Turning Documents or PDF files.  This can only be done if the external site allows embedding into others.  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.  
  

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 too as explained above. 
  
  Here is an example.  The section in bold is the link you need to use:
  
  <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!4v1668157845687!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>