How to Apply Custom JavaScript on a Modern SharePoint Site

If you have some JavaScript code that you need to apply across your entire SharePoint Site Collection, you can easily do so using the Custom JavaScript feature in ShortPoint Theme Builder. Follow the steps below to learn how.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Open Theme Builder
    • Option 1: Using ShortPoint Icon
    • Option 2: Using Site Contents
  • Step 2: Open Custom JavaScript
  • Step 3: Add JavaScript Code
• Authorizing External Scripts

Prerequisites

• You must have the latest version of ShortPoint SPFx installed in your SharePoint site.
• You must be a ShortPoint Designer with either a Pro or Enterprise License. For more information, go to Licensing Options.
• If you will be loading scripts from an external source, you must add the source domain of your chat widget to your Trusted Script Sources list. For more information, check out Managing Trusted Script Sources for JavaScript Customizations in ShortPoint.

Interactive Tutorial

Start the interactive tutorial to learn how to add JavaScript code using Theme Builder:

NOTEYou can only use the first option if you have ShortPoint Shortcuts enabled. To learn more about it, check out Introducing ShortPoint Dashboard and Theme Builder Quick Access.

Step-by-step Tutorial

Follow the steps to add JavaScript codes in Theme Builder:

Step 1: Open Theme Builder

There are two ways to open Theme Builder. Choose the option that suits your needs.

Option 1: Using ShortPoint Icon

You can only use the first option if you have ShortPoint Shortcuts enabled. To learn more about it, check out Introducing ShortPoint Dashboard and Theme Builder Quick Access.

• Go to the ShortPoint site you want to use and click the ShortPoint icon:

• Select Theme Builder:

Option 2: Using Site Contents

This option opens Theme Builder using Site Contents

• Go to the ShortPoint site you want to use and click the cogwheel icon:

• Select Site Contents:

• Open the ShortPoint Dashboard:

• Click Theme Builder:

• Select Customize my site:

Step 2: Open Custom JavaScript

• Go to Utilities:

• Select Custom JavaScript:

Step 3: Add JavaScript Code

• Paste your JavaScript code in the field provided:

• Click Apply:

• Publish your changes.

That's it! You can now add JavaScript codes.

Authorizing External Scripts

If you will be loading JavaScript from external sources, you must add the source domain to the Trusted Script Sources list in your SharePoint Admin Center. This step is required to ensure the script runs correctly under SharePoint's Content Security Policy (CSP).

For detailed instructions, please follow the "How to Add Trusted Source URLs" section in our Managing Trusted Script Sources for JavaScript Customizations in ShortPoint article.

Related articles:

• Apply Custom CSS from ShortPoint Theme Builder