How to Embed a Chat Widget into a SharePoint Page

With the ShortPoint Code Editor Web Part, you can embed a chat widget into your SharePoint site. Follow the quick tutorial or go through the Step-by-step Tutorial to get started.

NOTEFor this article, we will be using the Freshdesk chat widget as an example.

TABLE OF CONTENTS

• Prerequisite
• Quick Walkthrough
• Step-by-step Tutorial
  • Step 1: Copy the Embed Code
  • Step 2: Add the ShortPoint Code Web Part
  • Step 3: Edit the ShortPoint Code Web Part
  • Step 4: Paste the Code
  • Step 5: Republish Page

Prerequisite

• You must already have the ShortPoint Code Web Part installed on your SharePoint page. To learn how to do this, check out How to Install ShortPoint Code Editor in SharePoint.
• You must be the Admin of your chat portal. This is needed to get the embed code for the chat widget.

Quick Walkthrough

1. Copy the embed code of the chat widget. 

2. Go to your SharePoint page and add the ShortPoint Code Web Part.

3. Click the Edit Properties icon of the ShortPoint Code to edit it.

4. Click Import Code to paste the code.

5. Select the Edit HTML field to customize the code according to your needs. Once done, click Save.

6. Close the ShortPoint Code window.

7. Republish the page.

Step-by-step Tutorial

Go through the steps to learn how to embed a chat widget to your page:

Step 1: Copy the Embed Code

• Go to your chat portal and copy the embed code:

NOTEDifferent requirements may be needed depending on the chat widget you are trying to embed. Consult your respective chat provider for more details. In the case of Freshdesk, you can refer to Set up your help widget to learn how to get the embed code.

Step 2: Add the ShortPoint Code Web Part

• Go to the SharePoint page where you want to add the chat widget and click Edit:

• Click the close icon to leave the Toolbox:

• Select the plus icon to add a web part:

• Use the search bar to look for ShortPoint Code, or scroll down until you see the Advanced section. Click ShortPoint Code:

Step 3: Edit the ShortPoint Code Web Part

• Click the Edit Properties icon:

Step 4: Paste the Code

• Click Import Code:

• You will get a pop-up asking if you want to overwrite the current code with the code in your clipboard. Click OK:

• You will get a notice that the code was successfully imported from your clipboard. Click OK again:

• You can directly edit the code in the code editor. Simply select Edit HTML field, freely customize the code according to your needs, and click Save:

NOTEMake sure that Sandbox Mode is disabled. Otherwise, the code will not be applied properly.

Step 5: Republish Page

• Once satisfied, click the close icon to leave the ShortPoint Code window:

• Click Republish once you’re ready to make your changes live:

Great! You can now support your users on your SharePoint pages with the chat widget:

Need more ideas on how to use the ShortPoint Code Editor? Take a look at the tutorials we gathered to start you on your journey:

• How to Add a Facebook Post to a SharePoint Page
• How to Add an Instagram Post to a SharePoint Page
• How to Add an X Post to a SharePoint Page
• How to Add a Viva Engage Feed to a SharePoint Page
• How to Embed a YouTube Video Playlist to a SharePoint Page
• How to Embed a Vimeo Video Playlist to a SharePoint Page
• How to Add a Stock Widget to a SharePoint Site
• How to Add a Web Page Animation to a SharePoint Page
• How to Embed a Weather Widget to a SharePoint Page