How to Embed a SharePoint Web Part into ShortPoint

To build a page, SharePoint allows you to add SharePoint web parts, which are customizable widgets that present information or facilitate interaction among your users.

This article will demonstrate how you can embed a SharePoint Web Part into ShortPoint. Below is an example of a page where we incorporated the Document Library into ShortPoint. Go through the interactive tutorial or follow the step-by-step guide to get started.

NOTE: The SharePoint Web Part added using the SharePoint Web Part Design Element will retain its usual functions. For example, users can still add and upload new documents, as well as, open documents in the Document Library.

NOTE: This feature is currently available for SharePoint 2019 Microsoft 365 environments.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • PART 1: Get the SharePoint web part URL
    • Step 1: Create a New Page
    • Step 2: Add a SharePoint Web Part
    • Step 3: Copy the URL 
  • PART 2: Insert SharePoint Web Part Design Element
    • Step 1: Go back to the main page and edit it
    • Step 2: Paste the copied URL
    • Step 3: Save
• SharePoint Web Part  Design Element Features
  • A. Design Tab
  • B. Spacing Tab
  • C. Custom CSS tab

Prerequisites

• You must have SharePoint Microsoft 365 (We are currently working on a subsequent release of the feature for SharePoint 2019).
• You must have ShortPoint SPFx version 8.2.0.1 or higher.
• You must be a ShortPoint Designer with an active license.
• You must have at least View permissions to the new page with the SharePoint web part.

Interactive Tutorial

Start the interactive tutorial to learn how to add the SharePoint Web Part Design Element:

NOTE: To see a detailed list of all SharePoint web parts, check out How to Add a SharePoint Web Part.

NOTE: You can also check out SharePoint Web Part Design Element Features to see the options you can customize using this Design Element.

Step-by-step Tutorial

We divided the steps into two parts. Follow them closely for a detailed guide on how to add the SharePoint Web Part Design Element:

PART 1: Get the SharePoint web part URL

In order to get the URL we will use for Part 2 of this tutorial, we must create and publish a new page with a SharePoint Web Part inside. Go through the steps to learn how:

Step 1: Create a New Page

• Go to the SharePoint page where you want to embed the ShortPoint Web Part Design Element and click New.

• Then, select Page.
• Choose the Blank template.
• Click Create a Page.
• Add a Title to your page.

Step 2: Add a SharePoint Web Part

• Hover over the new page's section and click the gray plus icon.

• Choose the SharePoint Web Part you want to use.
• Customize the web part according to your preference.
• Once satisfied, click Publish.

NOTE: To learn more about adding SharePoint web parts and to see a detailed list of all available web parts, check out How to Add a SharePoint Web Part.

Step 3: Copy the URL 

• Copy the URL of your newly created page.

NOTE: Make sure you have at least View permission on the new page you created with the SharePoint Web Part. Otherwise, you will not be able to successfully accomplish the 2nd part of this tutorial.

PART 2: Insert SharePoint Web Part Design Element

After copying the URL, you must now insert the SharePoint Web Part Design Element. Go through the steps to learn how:

Step 1: Go back to the main page and edit it

• Go back to the main page where you want to add the SharePoint Web Part Design Element and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Paste the copied URL

• Click the plus icon.
• Use the search bar to look for SharePoint Web Part and click it.
• Paste the copied URL in the field provided.
• (Optional) Adjust the size of the web part according to your preference.
• Once you are satisfied, click the green checkmark.

Step 3: Save

• Then, select the eye icon to see how your page will look when published.

• Click Save to apply all your changes.

Congratulations! You now know how to embed a ShortPoint Web Part into a ShortPoint Design Element. Enjoy exploring this feature on your SharePoint pages.

NOTE: You can also check out SharePoint Web Part Design Element Features to see the options you can customize using this Design Element.

SharePoint Web Part Design Element Features

Listed below are the customizable features available for the SharePoint Web Part Design Element:

A. Design Tab

The Design tab contains the URL field which allows you to embed the SharePoint web part. It also allows you to adjust the size of the web part. Below are the available options:

	URL of Page containing the Web Part	allows you to paste the URL of the page where you have added the SharePoint web part.
	Width	allows you to adjust the width of the SharePoint web part.
	Height	allows you to adjust the height of the SharePoint web part.

B. Spacing Tab

The Spacing tab allows you to customize the spacing around your Design Element. Below are the settings available:

	Padding Top	adjusts the top padding of the web part.
	Padding Right	adjusts the right padding of the web part.
	Padding Left	adjusts the left padding of the web part.
	Padding Bottom	adjusts the bottom padding of the web part.
	Apply different padding for Tablet Devices	toggle on if you want to customize the padding of the web part for tablet devices.
	Tablet Top Padding	adjusts the top padding of the web part for tablet devices.
	Tablet Right Padding	adjusts the right padding of the web part for tablet devices.
	Tablet Left Padding	adjusts the left padding of the web part for tablet devices.
	Tablet Bottom Padding	adjusts the bottom padding of the web part for tablet devices.
	Apply different padding for Mobile Devices	toggle on if you want to customize the padding of the web part for mobile devices.
	Mobile Top Padding	adjusts the top padding of the web part for mobile devices.
	Mobile Left Padding	adjusts the left padding of the web part for mobile devices.
	Mobile Right Padding	adjusts the right padding of the web part for mobile devices.
	Mobile Bottom Padding	adjusts the bottom padding of the web part for mobile devices.

C. Custom CSS tab

This tab allows you to use your own CSS, HTML, and JavaScript code to customize the SharePoint Web Part Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element (Basic Tutorial) to know more about Custom CSS.

NOTEThe Visibility tab is currently not available in Live Mode.

That's it! You now know the features you can customize using the SharePoint Web Part Design Element.

Advanced: Hide an Embedded SharePoint Web Part's Title

Steps:

1. You need to copy the following code element then go to the page that the SharePoint Web Part is embedded on.

[code code_html="%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%0A" code_css="%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%0A" code_js="var%20myInterval%20%3D%20setInterval(function()%20%7B%20%0A%20%20var%20iframeElement%20%3D%20document.querySelector('iframe%5Bid%5E%3D%22sharepoint-webpart-shortpoint%22%5D')%3B%0A%20%20if%20(iframeElement%20!%3D%20null)%20%7B%0A%20%20%20%20clearInterval(myInterval)%3B%0A%20%20%20%20%0A%20%20%20%20iframeElement.addEventListener(%22load%22%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20var%20iframeDoc%20%3D%20iframeElement.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%0A%20%20%20%20%20%20iframeDoc.querySelector(%22head%22).insertAdjacentHTML(%0A%20%20%20%20%20%20%20%20%22beforeend%22%2C%0A%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%22text%2Fcss%22%3E%20div%5Bdata-automation-id%3D%22webPartHeader%22%5D%20span%5Brole%3D%22heading%22%5D%20%7B%20display%3A%20none%20!important%3B%20%7D%20%3C%2Fstyle%3E%60%20%20%20%20%0A%20%20%20%20%20%20)%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D%0A%7D%2C%201000)" code="%7B%22html%22%3A%22%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%5Cn%22%2C%22css%22%3A%22%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%5Cn%22%2C%22javascript%22%3A%22var%20myInterval%20%3D%20setInterval(function()%20%7B%20%5Cn%20%20var%20iframeElement%20%3D%20document.querySelector('iframe%5Bid%5E%3D%5C%22sharepoint-webpart-shortpoint%5C%22%5D')%3B%5Cn%20%20if%20(iframeElement%20!%3D%20null)%20%7B%5Cn%20%20%20%20clearInterval(myInterval)%3B%5Cn%20%20%20%20%5Cn%20%20%20%20iframeElement.addEventListener(%5C%22load%5C%22%2C%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20var%20iframeDoc%20%3D%20iframeElement.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%5Cn%20%20%20%20%20%20iframeDoc.querySelector(%5C%22head%5C%22).insertAdjacentHTML(%5Cn%20%20%20%20%20%20%20%20%5C%22beforeend%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%5C%22text%2Fcss%5C%22%3E%20div%5Bdata-automation-id%3D%5C%22webPartHeader%5C%22%5D%20span%5Brole%3D%5C%22heading%5C%22%5D%20%7B%20display%3A%20none%20!important%3B%20%7D%20%3C%2Fstyle%3E%60%20%20%20%20%5Cn%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%7D)%3B%5Cn%20%20%7D%5Cn%7D%2C%201000)%22%2C%22showErrors%22%3Afalse%7D" padding-top="6px" padding-right="6px" padding-bottom="6px" padding-left="6px" /]

Result:

Advanced: Add a Calendar to a Page Using SharePoint Web Part

Steps:

1. Add a SharePoint Web Part Design Element to the page, and set the URL to be similar to this: <Site URL>/Lists/Events/calendar.aspx

2. Copy and paste this code element right below the added SharePoint Web Part Design Element to hide the unnecessary headers and elements from the page:

[code code_html="%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%0A" code_css="%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%0A" code_js="var%20myInterval%20%3D%20setInterval(function()%20%7B%20%0A%20%20var%20iframeElements%20%3D%20document.querySelectorAll('iframe%5Bid%5E%3D%22sharepoint-webpart-shortpoint%22%5D')%3B%0A%20%20if%20(iframeElements.length%20%3E%200)%20%7B%0A%20%20%20%20iframeElements.forEach(elem%20%3D%3E%20%7B%0A%20%20%20%20%20%20clearInterval(myInterval)%3B%0A%0A%20%20%20%20%20%20elem.addEventListener(%22load%22%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20var%20iframeDoc%20%3D%20elem.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%0A%20%20%20%20%20%20%20%20iframeDoc.querySelector(%22head%22).insertAdjacentHTML(%0A%20%20%20%20%20%20%20%20%20%20%22beforeend%22%2C%0A%20%20%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%22text%2Fcss%22%3E%20%23sideNavBox%2C%20%23suiteBarDelta%2C%20%23s4-titlerow%2C%20.ms-core-sideNavBox-removeLeftMargin%20%7B%20display%3A%20none%20!important%3B%20%7D%20%23contentBox%20%7Bmargin-left%3A%2010px%3B%20margin-right%3A%2010px%3B%20%7D%3C%2Fstyle%3E%60%20%20%20%20%0A%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D)%0A%20%20%7D%0A%7D%2C%201000)" code="%7B%22html%22%3A%22%3C!--%20Add%20your%20HTML%20code%20here%20--%3E%20%5Cn%22%2C%22css%22%3A%22%2F*%20Add%20your%20CSS%20code%20here%20*%2F%20%5Cn%22%2C%22javascript%22%3A%22var%20myInterval%20%3D%20setInterval(function()%20%7B%20%5Cn%20%20var%20iframeElements%20%3D%20document.querySelectorAll('iframe%5Bid%5E%3D%5C%22sharepoint-webpart-shortpoint%5C%22%5D')%3B%5Cn%20%20if%20(iframeElements.length%20%3E%200)%20%7B%5Cn%20%20%20%20iframeElements.forEach(elem%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20clearInterval(myInterval)%3B%5Cn%5Cn%20%20%20%20%20%20elem.addEventListener(%5C%22load%5C%22%2C%20()%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20var%20iframeDoc%20%3D%20elem.contentDocument%20%7C%7C%20elem.contentWindow.document%3B%5Cn%20%20%20%20%20%20%20%20iframeDoc.querySelector(%5C%22head%5C%22).insertAdjacentHTML(%5Cn%20%20%20%20%20%20%20%20%20%20%5C%22beforeend%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%60%3Cstyle%20type%3D%5C%22text%2Fcss%5C%22%3E%20%23sideNavBox%2C%20%23suiteBarDelta%2C%20%23s4-titlerow%2C%20.ms-core-sideNavBox-removeLeftMargin%20%7B%20display%3A%20none%20!important%3B%20%7D%20%23contentBox%20%7Bmargin-left%3A%2010px%3B%20margin-right%3A%2010px%3B%20%7D%3C%2Fstyle%3E%60%20%20%20%20%5Cn%20%20%20%20%20%20%20%20)%3B%5Cn%20%20%20%20%20%20%7D)%3B%5Cn%20%20%20%20%7D)%5Cn%20%20%7D%5Cn%7D%2C%201000)%22%2C%22showErrors%22%3Afalse%7D" padding-top="6px" padding-right="6px" padding-bottom="6px" padding-left="6px" /]

(function(){
  const myInterval = setInterval(function () {
    const iframeElement = document.querySelector('iframe[id^="sharepoint-webpart-shortpoint"]');
    if (iframeElement != null) {
      const iframeDoc = iframeElement.contentDocument || elem.contentWindow.document;
      if (iframeDoc != null) {
        iframeElement.setAttribute("allowtransparency", "true") 
        clearInterval(myInterval);
        iframeDoc.querySelector("head").insertAdjacentHTML(
          "beforeend",
          `<style type="text/css">

                #sideNavBox, 
                #suiteBarDelta, 
                #s4-titlerow, 
                .ms-core-sideNavBox-removeLeftMargin { 
                    display: none !important; 
                } 

                #contentBox {
                    margin-left: 10px; 
                    margin-right: 10px; 
                }

            </style>`
        );
      }
    }
  }, 2000);
})()

For example you can make your embedded web part's background completely transparent by applying this code:

(function(){
  const myInterval = setInterval(function () {
    const iframeElement = document.querySelector('iframe[id^="sharepoint-webpart-shortpoint"]');
    if (iframeElement != null) {
      const iframeDoc = iframeElement.contentDocument || elem.contentWindow.document;
      if (iframeDoc != null) {
        iframeElement.setAttribute("allowtransparency", "true") 
        clearInterval(myInterval);
        iframeDoc.querySelector("head").insertAdjacentHTML(
          "beforeend",
          `<style type="text/css">

                  body, .CanvasZone, .ControlZone  {
                      background-color: transparent !important;
                  }

           </style>`
        );
      }
    }
  }, 2000);
})()

Related articles:

• How to Add a SharePoint Web Part
• How to Insert Custom CSS into a Page Builder Element (Basic Tutorial)
• How to Customize the Ticker Design Element