Add Live Chat to SharePoint

In this article we're going to show you how you can add Live Chat for Microsoft Teams to a SharePoint Modern Communication site.  Typically SharePoint does not allow you to add javascript code snippets to your website and disables scripting in general SharePoint sites.  We'll show you how to extend your SharePoint communication site to allow inline javascript code snippets.

How to Add Live Chat to SharePoint

Overview of Requirements:

  • Microsoft 365 and SharePoint Admin Access: To enable adding custom web parts and JavaScript.
  • Node.js & npm (Node Package Manager): Required for setting up and deploying the Script Editor web part using the SharePoint Framework (SPFx).
  • Live Chat Code Snippet: You’ll need this code to embed the live chat widget into your SharePoint page. If you don’t have one yet, you can sign up for a free trial on Social Intents.

First, you can use the SharePoint Framework (SPfx) to extend your SharePoint pages with a Modern Script Editor web part.  This web part enables embedding of a JavaScript code snippet into your pages.  There is a good guide on GitHub:   https://pnp.github.io/sp-dev-fx-webparts/gettingstarted/

Step-by-Step Instructions:

Step 1. Set Up SharePoint Framework (SPFx) and Script Editor Web Part

SharePoint modern sites don't allow JavaScript embedding by default. To enable this functionality, you will use the  SharePoint Framework (SPFx) to add a Modern Script Editor web part that can execute JavaScript.

You can follow the instructions on GitHub to get started with the  SPFx Script Editor web part: Modern Script EditorWeb Part. Here's a brief overview of the process:

  • Install Node.js and npm if they are not already installed on your machine.
  • Clone the Script Editor web part project:
git clone https://github.com/pnp/sp-dev-fx-webparts
cd sp-dev-fx-webparts/samples/react-script-editor
npm install
gulp serve

This command will clone the repository and install all the necessary dependencies.

Step 2. Package and Deploy the Script Editor Web Part

Once the Script Editor web part is ready, you need to package it so it can be uploaded to your SharePoint site.

  • Run the following commands to bundle and package the solution:
gulp bundle --ship
gulp package-solution --ship<br>
  • This will generate a .sppkg file (in sharepoint/solution/ directory). This file is what you will upload to your SharePoint site’s App Catalog.

Step 3. Upload the Web Part to the App Catalog

  • Log in to your SharePoint Admin Center.
  • Navigate to the App Catalog and upload the .sppkg file you just created.
  • Once uploaded, deploy the Script Editor web part by selecting it from the list in the App Catalog.

Step 4. Add the Script Editor Web Part to Your SharePoint Page

  • Go to the SharePoint Modern Communication site where you want to embed the live chat.
  • Click the Edit button in the top-right corner of the page.
  • Click the + icon to add a new web part to your page.
  • Search for and select the Script Editor web part (the one you deployed).
  • After adding the web part, click the Edit Markup button to open the markup editor.

SharePoint Script Editor web part

Now, click the 'Edit markup' button to customize your web part.

SharePoint Modern Script Editor

Step 5. Add the Live Chat Code Snippet

  • Now, you’ll add the code snippet for the Live Chat widget.
  • If you haven’t signed up for Live Chat, you can sign up for a free trial on Social Intents to get the necessary code.
  • Copy and paste the JavaScript snippet into the Script Editor web part.

Step 6. Save and Publish the Page

  • After adding the code snippet, click Save or Publish to make the changes live.
  • Once the page is published, the Live Chat icon will appear on your SharePoint communication site.

Step 7. Test the Live Chat in SharePoint

  • Once the Live Chat icon is visible on the page, test it by initiating a chat.
  • The chat request will be sent to your live chat dashboard, where you or your team can engage with visitors in real-time.

Conclusion

By following these steps, you can easily add  Live Chat to your SharePoint Modern Communication site. This integration allows you to provide real-time support and communication with your site visitors, making it easier to manage customer inquiries and interactions directly from your Social Intents account.

If you haven't set up Live Chat yet, you can sign up for a free trial here and start engaging with your website visitors today!