Adding Custom HTML on Site Pages

Overview

Webmasters need to add various content to their sites: embed documents, pages, or videos from other sites (e.g. Google document, surveys, live stream thumbnails, etc.). This can be done by using the Custom HTML module.

Prerequisites

• You have a School Loop account with Webmaster rights. 
  Note: If not, you can ask any Webmaster to provide the same rights to you.

Solution

1. Log into your School Loop account with Webmaster rights.
2. From Toolbox, select Site Center.
   Note: If this option is missing, you do not have webmaster rights. 
   
   
   
   
3. Select the page to which you want to add a Custom HTML module and click Edit.
   If the page is located under a minisite (like on the image below), you need to click on the minisite first and then select the page.
   Alternatively, you can create a new page.
   
   
   
   
4. Hover over free space on the page or an existing module and click on the displayed Plus Icon to add a module. If you click on the plus icon on an existing module - a new module is added next to the existing one.
   
   
5. Select the Custom HTML module from the Insert Module screen.
   
   
   
   
6. A blank Custom HTML module appears on the page. Click Code editor on the toolbar.
   
   
   
   
7. Paste the code you want to embed in HTML, CSS, or JavaScript.
   If you do not have a specific code, you can use the following HTML template (replace https://schoolloop.com/ with the link to your content):
   

   <iframe src="https://schoolloop.com/" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

   You can adjust the height and width if needed.
8. Click Play Preview to view how the content will be displayed.
   
   
9. Click OK.
10. For your page to be 508 ADA Compliant, enter a short descriptive Title Attribute.
    Also, you can add a background for embedded content from one of the colors selected for your site.
    
    

    

    
    
11. Once the module is ready, click Publish Changes at the top of the page.
    
    

    

Confirmation

1. Once the page is published, click Logout.
   
   
   
   
2. Open the page where you added the Custom HTML module.
   In this example, it is located under a minisite - we need to hover over its name and click on the name of the page.
   
   
   
   The page with the newly added Custom HTML module is displayed:
   
   

Back to top