Add Custom HTML/CSS to SharePoint Modern Page | Embed HTML to SharePoint Page - 2 Ways Explained

Summary

In this video tutorial, Priy demonstrates two approaches for embedding custom HTML, CSS, or JavaScript code into a SharePoint modern page. The first method involves embedding the code directly onto the page using a custom script setting, while the second method adds the code as a link in the left navigation. The tutorial walks through each step, including configuring custom scripts in the SharePoint admin center, uploading code files to a document library, and using the embed web part. A detailed article on the topic is also available on spguides.com for further reference.

Takeaways

• 😀 You can add custom HTML, CSS, or JavaScript code to a SharePoint modern page using two main approaches: embedding the code directly or linking it in the left navigation.
• 😀 Before adding custom code to SharePoint, you need to enable custom script settings from the SharePoint Admin Center, as this feature is not available by default.
• 😀 SharePoint's custom script feature can be set to 'Allow' in the settings, but it will automatically switch back to 'Blocked' after 24 hours, requiring you to enable it again if needed.
• 😀 Once custom scripts are enabled, you can paste your HTML, CSS, or JavaScript code into a code editor (like Visual Studio Code) and save the file as an .aspx file.
• 😀 After saving your custom code file (.aspx), you need to upload it to a document library within your SharePoint site.
• 😀 To embed custom code directly into a SharePoint page, use the 'Embed' web part and insert the appropriate embed code pointing to the uploaded .aspx file.
• 😀 After embedding the custom code, you can publish the page to see the live results, such as displaying a digital clock widget.
• 😀 Another approach is to add the custom code as a link in the SharePoint left navigation, directing users to a separate page displaying the custom code.
• 😀 When adding a custom code link to the left navigation, you can choose to open it in a new tab for better user experience.
• 😀 For detailed instructions on adding custom HTML, CSS, and JavaScript to SharePoint, the tutorial provides a link to an in-depth article on spguides.com.

Q & A

What is the main purpose of the video?

The video explains two methods to add custom HTML, CSS, or JavaScript code to a SharePoint modern page.

What are the two approaches mentioned to add custom code to SharePoint?

The first approach is embedding custom code directly into a SharePoint modern page using the Embed web part. The second approach is uploading a custom page (ASPX file) and adding it as a link in the SharePoint left navigation.

Why do we need to enable custom script settings in SharePoint?

Custom script settings must be enabled to allow users to upload and run custom HTML, CSS, or JavaScript code in SharePoint modern pages.

Where can you enable custom script settings?

You can enable custom script settings in the SharePoint admin center under Active Sites → site settings → Custom Scripts.

What important behavior occurs after enabling custom scripts?

Custom scripts automatically revert to 'Blocked' within 24 hours, requiring you to re-enable them if additional changes are needed.

What type of file format should be used for uploading custom code?

The custom code must be saved as an .aspx file before uploading it to SharePoint.

Where should the .aspx file be uploaded in SharePoint?

The .aspx file should be uploaded to a document library, such as the default Documents library.

Which SharePoint web part is used to display custom code?

The 'Embed' web part is used to display custom code on a SharePoint modern page.

How do you embed the uploaded .aspx file into a SharePoint page?

Copy the link to the uploaded .aspx file from the document library and paste it into the Embed web part on the SharePoint page.

How can the custom page be added to SharePoint navigation?

Edit the left navigation, click the plus icon to add a link, paste the .aspx file link, name it, and save the navigation.

What example custom code was used in the video?

A digital clock widget built using HTML, CSS, and JavaScript was used as the example.

Where can users find a detailed written guide for this process?

Users can visit SPGuides.com, where a full article explaining the process is available.