How to Embed a Chat Widget Using the ShortPoint Code Design Element

You can use the ShortPoint Code Design Element to add a chat widget to your SharePoint page. This tutorial will instruct you on how to accomplish this.

NOTEYou can use any chat widget you want. However, for this guide, we will be using Freshdesk as an example.

Quick Walkthrough

1. Copy the embed code of the chat widget you want to add to your page.
2. Edit the ShortPoint Web Part.
3. Click the plus icon and insert the Code Design Element.
4. Paste the code in the HTML field.
5. Go to the Design tab and disable Sandbox Mode.
6. Click the green checkmark to apply your changes.
7. Click Save to keep your changes.
8. Republish the page to see your new header.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Copy the Embed Code
  • Step 2: Edit the ShortPoint Web Part
  • Step 3: Insert the ShortPoint Code Design Element
  • Step 4: Paste Embed Code
  • Step 5: Disable Sandbox Mode
  • 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 have the necessary permissions to obtain the embed code of your chosen chat widget. For Freshdesk specifically, you need Admin access.

Interactive Tutorial

Start the interactive tutorial to learn how to add your chat widget:

Step-by-step Tutorial

Follow the detailed guide to learn how to embed a chat widget:

Step 1: Copy the Embed Code

• Copy the embed code of your chosen chat widget:

NOTEDifferent chat widgets may have different requirements and customizations. You may contact your chat provider for more details. For Freshdesk users, you may go to  Set up your help widget  to learn how to get the embed code.

Step 2: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Click the close icon to leave the Toolbox:

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

Step 3: Insert the ShortPoint Code Design Element

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

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

Step 4: Paste Embed Code

• Paste the code in the HTML field:

Step 5: Disable Sandbox Mode

• Navigate to the Design tab.
• Disable Sandbox Mode.

NOTEMake sure to not skip this step. Otherwise, the embed code will not work as expected.

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:

That’s it! You now have a chat widget on your SharePoint page.

Related articles:

• How to use jQuery with the ShortPoint Code Design Element
• How to Add a Background Image to the Page Header Using the ShortPoint Code Design Element
• How to Insert a Weather Widget Using the ShortPoint Code Design Element
• How to Embed a YouTube Video Playlist into a Modern SharePoint Page Using the Code Design Element
• How to Embed a Vimeo Video Playlist into a Modern SharePoint Page Using the Code Design Element
• How to Embed the Microsoft Stream Video into a SharePoint Page