How to Add Canva Designs into a SharePoint Site using the ShortPoint Code Design Element

This tutorial will show you how to embed Canva designs into SharePoint using the Code Design Element.

Quick Walkthrough

1. Go to the Canva design you want to embed into your SharePoint page and copy the embed code.
2. Go to the SharePoint page where you want to add the Canva design and edit the ShortPoint Web Part.
3. Click the plus icon and insert the Code Design Element.
4. Paste the code in the HTML field and customize it.
5. Go to the Design tab, enable Sandbox mode and Auto Resize.
6. Click the green checkmark to apply your changes.
7. Click Save to keep your changes.

TABLE OF CONTENTS

• Quick Walkthrough
• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Copy Embed Code
  • Step 2: Edit the ShortPoint Web Part
  • Step 3: Insert the Code Design Element
  • Step 4: Paste Embed Code
  • Step 5: Enable Sandbox Mode and Auto Resize
  • Step 6: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed in your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have a Canva design ready to embed.

Interactive Tutorial

Start the interactive tutorial to learn how to embed a Canva design into SharePoint:

Step-by-step Tutorial

Follow the detailed guide below to learn how to embed Canva Designs on your SharePoint page using the ShortPoint Code Design Element:

Step 1: Copy Embed Code

• Go to the Canva Design you want to use and click Share:

• Select See all:

• Click Embed:

• A message will pop-up. Click Embed again:

• Click Copy to copy the embed code:

Step 2: Edit the ShortPoint Web Part

• Go to the SharePoint page where you want to add the Vimeo playlist and click Edit:

• Close the Toolbox:

• Click the ShortPoint tag.
• Select the Edit Properties icon:

Step 3: Insert the Code Design Element

• Choose where you want to add the Code Design Element and click the plus icon to see the library of Design Elements:

• Look for Code using the search bar and select it.

Step 4: Paste Embed Code

• Paste the code in the HTML field and customize it according to your needs:

Step 5: Enable Sandbox Mode and Auto Resize

• Enable Sandbox mode and Auto Resize to fit inside the container.

Step 6: Save

• Click the green check mark to apply your changes.
• Click the eye icon to see your page in real-time:

• Click Save to keep your changes:

Congratulations! You can now add Canva Design on your SharePoint page using the ShortPoint Code Design Element.

Related articles:

• How to Insert a Web Page Animation into SharePoint Using the ShortPoint Code Design Element
• How to Insert a Stock Widget to a SharePoint Page Using the ShortPoint Code Design Element
• How to Insert a Digital Clock into a SharePoint Page Using the ShortPoint Code Design Element
• How to Embed a Viva Engage Custom Feed to the SharePoint Page Using ShortPoint Code Design Element
• The Value of Motion Design: How to Use CodePen Codes in Modern SharePoint Pages
• How to Add Lottie Animations in the ShortPoint Code Design Element