Add an Eye-Catching Pop-Up to Your SharePoint Online Site

In this SharePoint Online blog post we will show how to Add an Eye-Catching Pop-Up to Your SharePoint Online Site.

Looking for a simple way to draw attention to important messages on your SharePoint Online site? Whether you’re launching a new tool, announcing a policy change, or just want to improve engagement, adding a custom pop-up is a great way to make sure your users don’t miss it.

In this blog post, I’ll walk you through how we added a sleek and effective pop-up message to a SharePoint Online intranet. This was part of a recent project where we helped an organization launch a new AI Assistant tool without sending a mass email. Instead, we used a custom pop-up to quietly introduce the tool and provide users with direct access to it.

Here’s how you can do the same in just a few steps:

Step 1: Enable Site Customization

Before you can add custom web parts to a SharePoint Online site, you need to allow custom scripting. This setting must be enabled for each site where you want to use a custom pop-up.

Use SharePoint Online PowerShell to enable it:

Connect-SPOService -Url "https://YOURTENANT-admin.sharepoint.com"
$SiteURL = "https://YOURTENANT.sharepoint.com/sites/YOURSITE"
Set-SPOSite -Identity $SiteURL -DenyAddAndCustomizePages $false

Step 2: Download and Install the Modern Script Editor Web Part

To display the pop-up, we used the Modern Script Editor Web Part by Puzzlepart. This open-source web part lets you embed JavaScript and CSS directly into SharePoint Online modern pages.

🔗 Download it from GitHub

Once you’ve downloaded the .sppkg file:

1. Go to the SharePoint Admin Center.
2. Click on More Features > Apps.
3. Upload the package to your App Catalog.

Step 3: Add the Web Part to Your Site

Once installed:

1. Go to your SharePoint site.
2. Click on Settings > Add an app.
3. Select the Modern Script Editor Web Part by Puzzlepart.
4. Return to your homepage.
5. Click Edit to modify the page.
6. Click the + icon to add a new web part.
7. Choose Modern Script Editor.

Related Reading

• Sync SharePoint Site Libraries with Microsoft Intune
• Recover Deleted or Lost Exchange Online Emails to PST
• Unleash the Full Potential of Microsoft Intune with CPI Consulting
• Creating Custom Error Pages in Azure Web App
• User Receive “Access Denied” Error When Trying to Access their OneDrive for Business

Step 4: Insert JavaScript and CSS for the Pop-Up

Click Edit Snippet in the Script Editor and paste in your JavaScript and CSS code.

• JavaScript controls the behavior (e.g., when and how the pop-up appears).
• CSS handles the styling, so your pop-up matches your branding and looks clean.

The end result is shown below.

Final Thoughts

Using a pop-up is a lightweight yet powerful way to communicate important updates on your SharePoint site—without relying on emails. Whether you’re launching a new feature or promoting an event, this method ensures your message gets noticed.

If your organization needs help building custom pop-ups or other SharePoint enhancements, feel free to contact us.