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 the 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. Adding HTML code to a SharePoint Online Modern Page is a great way to enhance the functionality or design of your site. With the ability to add custom code, you can create unique and engaging user experiences that are tailored to your specific needs. In this guide, we will walk you through the steps of adding HTML code to a SharePoint Online Modern Page, using the Embed web part.

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. Otherwise, you’ll get a “File Not Found” error. 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”. Ensure any references to these images/styles/scripts are updated in the ASPX file.
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.

   

5. That’s all! Here is the result of HTML code in the modern page.

   

In summary, adding HTML code to a SharePoint Online Modern Page can be done by using the Embed web part and saving an HTML file as an ASPX. It is important to remember that custom code may potentially break the functionality of the page and should be thoroughly tested before being added to a live site.

How to add CSS in SharePoint Online modern page? You can 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?