How to add HTML code in SharePoint Online Modern Page?

Requirement: Display HTML page in SharePoint Online.

Add HTML code to SharePoint Online Page

In classic pages, You can add HTML code to SharePoint Online page using either the content editor web part or the script editor web part (or using Embed code). However, in Modern SharePoint Online pages, both web parts are unavailable. So, how to display HTML content on modern pages? If you want to add HTML code in SharePoint Online’s modern page, follow this trick:

  1. Create an HTML page, and rename its extension from .HTML to .aspx
  2. Upload aspx file to SharePoint Online – Upload the ASPX page and resources to the SharePoint Online Library.
  3. Use the “Embed” web part to display it on the Modern SharePoint Online page.

Make sure you have enabled the custom script, prior to uploading files to SharePoint Online. I wanted to display a weather widget on my SharePoint Online site, and here is my HTML code:

<style>
div.a_a_3b589226 {
height: 80px!important;
}
</style>
<a class="weatherwidget-io" href="https://forecast7.com/en/23d4253d85/united-arab-emirates/" data-label_1="UNITED ARAB EMIRATES" data-label_2="WEATHER" data-days="5" data-theme="orange" >UNITED ARAB EMIRATES WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');

</script>

Follow the below steps to add an HTML code to modern pages:

  1. Open your SharePoint Online site in the web browser.
  2. Upload the .aspx file and its associated resources like scripts and images to any of your SharePoint libraries such as “Site Assets”. Make sure your any references to these images/styles/scripts are updated in the ASPX file.display html page in sharepoint online
  3. Once uploaded, navigate to the page where you would like to add HTML code and edit the page.
  4. Insert an “Embed” web part wherever relevant. This web part allows you to display HTML code directly into the web part. You can use this method if you want to add a small piece of code from another page. Set the Embed source address to the ASPX file you have uploaded.
    add html code to sharepoint online page
  5. That’s all! Here is the result of HTML code in the modern page.
    how to add html code in sharepoint online modern page

You can also use the Modern script editor web part to add HTML code to your modern pages. How to Add HTML/CSS/JavaScript to SharePoint Online page using Modern Script Editor Web Part?

Salaudeen Rajack

Salaudeen Rajack - SharePoint Expert with Two decades of SharePoint Experience. Love to Share my knowledge and experience with the SharePoint community, through real-time articles!

Leave a Reply

Your email address will not be published. Required fields are marked *