{"id":53390,"date":"2025-05-18T17:37:47","date_gmt":"2025-05-18T07:37:47","guid":{"rendered":"https:\/\/www.cloudproinc.com.au\/?p=53390"},"modified":"2025-05-18T17:37:48","modified_gmt":"2025-05-18T07:37:48","slug":"add-an-eye-catching-pop-up-to-your-sharepoint-online-site","status":"publish","type":"post","link":"https:\/\/cloudproinc.com.au\/index.php\/2025\/05\/18\/add-an-eye-catching-pop-up-to-your-sharepoint-online-site\/","title":{"rendered":"Add an Eye-Catching Pop-Up to Your SharePoint Online Site"},"content":{"rendered":"\n

In this SharePoint Online blog post we will show how to Add an Eye-Catching Pop-Up to Your SharePoint Online Site.<\/p>\n\n\n\n\n\n\n\n

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\u2019t miss it.<\/p>\n\n\n\n

In this blog post, I\u2019ll 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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Here\u2019s how you can do the same in just a few steps:<\/p>\n\n\n\n

Step 1: Enable Site Customization<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Use SharePoint Online PowerShell to enable it:<\/p>\n\n\n\n

Connect-SPOService -Url \"https:\/\/YOURTENANT-admin.sharepoint.com\"\n$SiteURL = \"https:\/\/YOURTENANT.sharepoint.com\/sites\/YOURSITE\"\nSet-SPOSite -Identity $SiteURL -DenyAddAndCustomizePages $false<\/code><\/code><\/pre>\n\n\n\n
Step 2: Download and Install the Modern Script Editor Web Part<\/h2>\n\n\n\n
To display the pop-up, we used the Modern Script Editor Web Part<\/strong> by Puzzlepart. This open-source web part lets you embed JavaScript and CSS directly into SharePoint Online modern pages.<\/p>\n\n\n\n
\ud83d\udd17 Download it from GitHub<\/a><\/p>\n\n\n\n
Once you’ve downloaded the .sppkg<\/code> file:<\/p>\n\n\n\n
    \n
  1. Go to the SharePoint Admin Center<\/strong>.<\/li>\n\n\n\n
  2. Click on More Features<\/strong> > Apps<\/strong>.<\/li>\n\n\n\n
  3. Upload the package to your App Catalog<\/strong>.<\/li>\n<\/ol>\n\n\n\n
    Step 3: Add the Web Part to Your Site<\/h2>\n\n\n\n
    Once installed:<\/p>\n\n\n\n
      \n
    1. Go to your SharePoint site.<\/li>\n\n\n\n
    2. Click on Settings<\/strong> > Add an app<\/strong>.<\/li>\n\n\n\n
    3. Select the Modern Script Editor Web Part<\/strong> by Puzzlepart.<\/li>\n\n\n\n
    4. Return to your homepage.<\/li>\n\n\n\n
    5. Click Edit<\/strong> to modify the page.<\/li>\n\n\n\n
    6. Click the +<\/strong> icon to add a new web part.<\/li>\n\n\n\n
    7. Choose Modern Script Editor<\/strong>.<\/li>\n<\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n