Skip to main content

How to iFrame external content

  • Updated

This guide covers how to use the Oak source code feature to embed HTML code onto homepages and content. This includes iFrame code for embedding various types of content, such as websites, presentation slides, games and podcasts.

 

This guide covers:

 

Before you begin:

  • You must be assigned the Homepage Manager permission for the homepage you are embedding content
  • You must be assigned the System Manager permission to be able to whitelist external sources in the Site Settings

 

Whitelisting an external source

  1. The first thing you must do is whitelist the external source where your content is hosted. A Site Manager can do this by navigating to the Actions Button and Configure. Click into Site Settings and select Integrations > External Sources. From here, click the Add button.

     

    Whitelisting an external source in the site settings.png



     

  2. Add a title for the source and paste the URL of the website where you're embedding from, followed by selecting Validate. Oak will provide you with the option to choose how specific you would like the URL to be.
     

  3. Select Confirm to add your new external source. This can be removed from the list at any time by clicking the X to the right of the source.

     

Embedding content

  1. To locate your embed code that will be added to Oak, go to the website or platform where your content is being hosted, and find the share > embed option. This will vary depending on the platform.

    You can also use the iFrame code template below:


    <iframe src="REPLACE WITH YOUR URL"></iframe>

     

  2. To iFrame your content, go to the Oak homepage you would like to add it to, and select the page options > Edit homepage.
     
  3. Select the pencil icon to open the toolbox, and find the Custom Content applet. Drag the applet onto the homepage and drop where a blue line appears.
     
  4. Click the text box within the Custom Content applet to reveal the content editor toolbar. Go to Tools and then Source Code from the drop-down.
     
Accessing source code from content editor tools.png

 

  1. Insert your iFrame code into the Source Code box, and click OK at the bottom.

     

    Adding iframe code to source code.png


     

  2. You'll see a grey scale area that acts as a preview of the embedded content. To change the size, re-open the source code (Tools > Source Code) and adjust the width and height numbers.

    To dynamically resize the content according to the device screen size, ensure the width is a percentage, rather than pixels. It should look something like this.

    width="100%" height="300"

     
  3. Once you're happy with the size of the content, Publish your homepage in the top-right corner as usual to view.


Top tip: Reduce the size of your internet browser to view how content will be displayed when viewed on a smaller device screen.
 

Related articles