How to Add HTML Code Using ShortPoint Code Editor Web Part

This article will show you how to add and enhance content on a Modern SharePoint page by adding custom HTML using the free ShortPoint Code Editor Web Part. For a quick overview of the steps, refer to the Quick Walkthrough section. For more detailed instructions, you can watch the video or see the Step-by-step Tutorial.

TABLE OF CONTENTS

• Prerequisites
• Quick Walkthrough
• Step-by-Step Tutorial
  • Step 1: Copy the HTML code
  • Step 2: Edit the SharePoint page
  • Step 3: Select ShortPoint Code from the web parts library
  • Step 4: Add your HTML code
  • Step 5: (Optional) Modify and enable features
  • Step 6: Hit Republish

Prerequisites

• Ensure the ShortPoint Code Editor Web Part is installed on your SharePoint site. For installation instructions, read our article on How to Install ShortPoint Code Editor in SharePoint.
• You have the proper SharePoint permissions to edit the target Modern SharePoint page.

Quick Walkthrough

1. Prepare your HTML code.
2. Navigate to the SharePoint page and click Edit.
3. Click Add new web part in the location where you want to insert your HTML code.
4. Search for ShortPoint Code in the web parts library and select it.
5. Edit the default placeholder content properties.
6. Paste your HTML code into the HTML field.
7. Make any needed adjustments to the code and web part settings.
8. Republish the page.

Step-by-Step Tutorial

You can either write your own HTML code or find pre-made code snippets from reliable sources, depending on your page requirements. For example, embed codes are blocks of HTML that allow you to integrate external content like apps, widgets, and other interactive elements into your page.

Let's explore a practical example by adding a Google Map to a SharePoint page. We'll use an embed code from embedmymap.com to demonstrate how to add custom HTML content to the page:

Step 1: Copy the HTML code

• Prepare your HTML code by writing it yourself or obtaining a code snippet from a trusted source. In our example, we'll customize the map to show a specific location and generate the code.
• Copy the code to your clipboard.

Step 2: Edit the SharePoint page

• Open the SharePoint page where you want to add your custom code
• Edit the page.

Step 3: Select ShortPoint Code from the web parts library

• Close the Toolbox to get a full view of the page while editing.

• Hit the Add a new web part icon.

• Search for ShortPoint Code in the web parts library and select it

Placeholder content will appear on your page.

Step 4: Add your HTML code

• Press the Edit properties button. This will open the ShortPoint Code Editor window.

• Replace the default content by pasting your copied code in the HTML field.
• Delete other codes in the CSS and Javascript fields.

Step 5: (Optional) Modify and enable features

• You can customize the appearance of the embedded HTML content by editing the code or adding custom CSS and JavaScript.
• Enable Sandbox Mode.
• Adjust container height and other code parameters that appear.
• You can also restrict visibility on specific devices.

Step 6: Hit Republish

When you're satisfied with how the HTML content appears on the page, click Republish to make the changes visible to your users.

That’s all! You've learned how to enhance your Modern SharePoint pages by adding custom HTML code snippets using the ShortPoint Code Editor Web Part.

Related articles:

• ShortPoint Code Editor Web Part: List of Resources
• Getting Started With ShortPoint Code Editor Web Part
• How to Add Custom Code Using the ShortPoint Code Editor Web Part
• How to Add Custom CSS Using ShortPoint Code Editor Web Part