Adding a Code Snippet to the Content Area

Occasionally a third-party provider might give you some code to add to your website, to allow you to include an element of their product within your page content area. 

Please note: Whilst this option is available, it should be used with caution, as getting it wrong could stop your website from functioning correctly, or even cause your website to go down.  So, if you are unsure of what you are doing, please reach out to someone in your organisation who is comfortable adding the code, or contact our Support Team.

• Adding the Code Snippet
• Example Code for MyNewTerm
• Example OneDrive PowerPoint

Adding the Code Snippet

If you are confident, follow these steps to add the required code to your page.

• Click into the content area of your page, where you would like to add the third-party element.
  
  
• Select the Code Snippet tool from the Edit toolbar
  
  
• Paste the code provided into the window and click OK.  The code can contain HTML, CSS, and JavaScript tags. 
  
  
  
  
• A code snippet block will appear in the content area, to show you have added the item.  To see how it will look for your end users, click the Preview button on the Edit toolbar.

Save the Page

Select Save on the Edit tab and choose the desired save option:

1. Save Now
   • If you see this option, you can 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 can select the option to send a notification to subscribed app users.  
2. Save Draft
   • This will allow you to save your item without publishing it, and return to continue editing via Drafts on the Home tab
3. 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.  

Example Code for MyNewTerm

Before you begin, you will need to obtain the API code from My New Term.  They will provide three pieces of code (A,B & C) but you will not need all of it.

• Copy the following code:
  

  <div id="mnt-parent-container" style="width: 96.7%; margin: 0 auto; background-color: transparent;"></div>
  <script>
  var mntInitCounter = 0, mntApiScript = document.createElement("script");
  mntApiScript.type = "text/javascript";
  mntApiScript.src = "https://api.mynewterm.com/assets/v1/dist/js/school_vacancies.js?v=" + (new Date().getTime());
  document.body.appendChild(mntApiScript);
  
  mntApiScript.onload = function () {
  if(mntInitCounter == 0) {
  mntInitCounter = 1;
  <-- this line will need replacing with the code from mynewterm 
  }
  };
  </script>

  You will notice that one line in the above code is highlighted in 'purple', this line will need to be replaced by part of the code that MyNewTerm have sent to you.
  
  

• Take a look at Part C of the MyNewTerm code.  You will need to replace the purple text with the portion of code highlighted in the image below:
• You will now be able to use this code when Adding the Code Snippet as described above.
  
  TIP:  If the website that you are applying this code to is a Trust, there is one line of code that needs changing.
  
  The section highlighted in yellow needs to be changed from school_vacacnies.js to trust_vacancies.js
  
  
  
  
• If you would like to change the colour of the buttons & titles within the MyNewTerm section, from the default orange, you will also need to add the following code after the </script> tag in the code you have added to the Source Code window.  Replacing the HEX code (highlighted orange) with the code of the alternate colour you would like to use. 
  
  TIP:  If you don't know the HEX code, find an online colour picker tool to help you get this from your website.
  

   <style>
     a.orange-btn-hover,
     a.orange-btn-hover:hover, 
     span.orange-btn-hover, 
     .orange-vacancy-link 
      {
       background-color: #F06D2D !important;
       color: #ffffff !important;
      }
     .orange-vacancy-div-bg 
      {
       background-color: #F06D2D !important;
      }  
     .orange-vacancy-title, 
     .orange-vacancy-icon 
      {
       color: #F06D2D !important 
      }
  </style>

Example OneDrive PowerPoint

You can embed an online PowerPoint presentation, which is stored in OneDrive, as long as the file can be made public.  

• There is an article in the Microsoft Support Centre which explains how to do this.