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:
- Create an HTML page, and rename its extension from .HTML to .aspx
- Upload aspx file to SharePoint Online – Upload the ASPX page and resources to the SharePoint Online Library.
- 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:
- Open your SharePoint Online site in the web browser.
- 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.
- Once uploaded, navigate to the page where you would like to add HTML code and edit the page.
- 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.
- 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?
hello, I have enabled custom scripting on both my site and tenant level. the code works on some sites and doesn’t work on others. what could be the cause.
Note I have run Set-SPOSite -DenyAddAndCustomizePages 0 on all concerned sites.
This is interesting. Can the same be applied if I wanted to have the site always open in fullscreen?
The only solutions I’ve found are for classic sites…
Any help is much appreciated!
hummm… doesn’t seem to work. It says “File not found”.
Enable custom script before uploading the HTML file! If it’s already uploaded, upload it again after the custom script is enabled.
Could it be anything else? Custom script was already set enable before I added the .aspx page. Thank you for your time and help!
Same for me too. I have enabled custom scripts, but still getting file not found error. Tried this in 2 tenants and the behavior is same.
1. Have you enabled custom scripts at the site level with PowerShell?
2. Have you enabled custom scripts before uploading the aspx file?
Hey Salaudeen,
Same case with me.
Custom scripts already enabled here at the site level yet getting file not found error.
And yes, uploaded aspx file after seeing the enabled custom site option only. Please let me know if I can do any further testing.
Ok, was able to resolve after running below command on powershell:
Set-SPOSite -DenyAddAndCustomizePages 0
hi Salaudeen Rajack,
im shahbaz from india i have question
i have created web pages using html but now i want to merge them and put a scroll bar for scrolling and want to put the search functionality