How to create a heatmap image with links on SharePoint online

Question

Hello everyone,

Could someone help me figure out how to generate heatmaps on images with clickable areas that redirect to different URLs? I used to do this on old SharePoint by creating heatmaps with links using Dreamweaver and then uploading it to SharePoint 2010. However, in SharePoint online, the html/css functionality seems to have been removed.

Thank you!

Answer 1

Hi @Rox Wong,

Thank you for posting in this community.

If you want to add HTML/CSS to modern pages in SharePoint Online, you need to first contact your SharePoint administrator to ask him to enable custom scripts and deploy the modern script editor web part. This modern script editor web part enables you to embed HTML\CSS scripts in modern pages.

Step1: Enable Custom Script in SharePoint Online through Admin Center

1. Sign in to Microsoft 365 through the browser and go to the SharePoint Admin Center: https://<tenant>-admin.sharepoint.com
2. Click on Settings from the left navigation >>Settings >> “Classic settings page” >> Scroll down to “Custom Script” section.
3. Under the Custom Script section, set “Allow users to run custom script on personal site” and “Allow users to run custom script on self-service created sites” options. 
4. Click on “OK” to save your changes.

Step2: Deploy the modern script editor web part.

Please refer this article: How to Add Custom CSS or JavaScript to SharePoint Online Modern Page?

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.