Embed Microsoft Teams in SharePoint

In this article we're going to show you how you can embed Live Chat for Microsoft Teams in a SharePoint website.  By default SharePoint doesn't allow you to add a code snippet to your modern communication website and disables scripting in general.  We'll show you how to extend your SharePoint communication site to allow inline javascript code snippets so that you can embed your Microsoft Teams Live Chat into SharePoint.

How to Embed Live Chat for Microsoft Teams into a SharePoint Website

In this article, we're going to show you how to embed  Live Chat for Microsoft Teams into your SharePoint website. By default, SharePoint disables inline scripting on modern communication sites, preventing you from easily adding JavaScript code snippets. However, with a few steps, you can extend your SharePoint site to allow JavaScript, enabling you to embed your Microsoft Teams Live Chat widget.

Overview of Requirements:

  • Microsoft 365 and SharePoint Access: Ensure you have administrative privileges to make changes to SharePoint and its app catalog.
  • Microsoft Teams Live Chat Code Snippet: If you don’t have this yet, you can sign up for a Live Chat for Microsoft Teams free trial to get the code snippet.
  • SharePoint Framework (SPFx): You'll need to use SPFx to add a Modern Script Editor web part that allows JavaScript embedding.
  • Node.js & npm (Node Package Manager): These are necessary to install and package the Modern Script Editor web part.

Steps to Embed Live Chat in SharePoint

Step 1. Set Up Your Development Environment for SPFx

  • First, install Node.js and npm if they aren't already installed. These tools will help you package and deploy your custom Script Editor web part.
  • Follow Microsoft's official guide for setting up your SharePoint Framework development environment: SPFxDevelopment Setup.

Step 2. Download and Install the Modern Script Editor Web Part

  • You can use an existing Script Editor web part available from the SharePoint Patterns and Practices (PnP) GitHub repository. This web part allows you to embed custom JavaScript code in modern SharePoint pages.
  • Visit the GitHub page here: Modern Script Editor Web Part and follow the instructions to clone the repository using npm:
git clone https://github.com/pnp/sp-dev-fx-webparts
cd sp-dev-fx-webparts/samples/react-script-editor
npm install 
gulp serve

Step 3. Package and Deploy the Script Editor Web Part

  • Once you have the Script Editor web part installed and working locally, package it so that it can be deployed to your SharePoint app catalog:
gulp bundle --ship 
gulp package-solution --ship<br>
  • Upload the generated .sppkg file (usually found in the sharepoint/solution/ folder) to your SharePoint app catalog. This will allow you to add the Script Editor web part to your SharePoint pages.

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

  • Navigate to your SharePoint site where you want to embed the live chat.
  • Click the Edit button at the top right of the page.
  • Click the + button on the page and search for the Script Editor web part (the one you deployed). Add this to the section where you want the live chat to appear.
  • Click the Edit markup button in the Script Editor web part.

Step 5. Add the Live Chat for Microsoft Teams Code Snippet

  • If you haven't signed up for Live Chat for Microsoft Teams yet, you can sign up for a free trial. After signing up, you will receive a JavaScript code snippet to embed the live chat widget on your website.
  • Copy the code snippet and paste it into the Script Editor's markup section. This code snippet will enable the live chat icon to appear on your SharePoint communication site.


SharePoint Script Editor web part

Add your Live Chat code snippet to the Edit HTML Code section:

SharePoint Modern Script Editor

Step 6: Save and Publish Your Page

  • After adding the JavaScript snippet, click Save or Publish to apply the changes to the SharePoint page.
  • Once the page is published, you should see the Live Chat icon visible on your SharePoint communication site similar to the screenshot below:

Step 7. Chat with Visitors via Microsoft Teams

  • When a visitor clicks the live chat button, the chat request is sent directly to your Microsoft Teams channel. From there, you and your team can chat with the visitor in real-time, right from Microsoft Teams.
  • This integration helps improve communication efficiency by centralizing live chat requests into your existing Teams workflow.

Conclusion

By following these steps, you can easily embed  Live Chat for Microsoft Teams into your SharePoint website, creating a seamless communication channel between your website visitors and your Teams channel. Using the SPFx framework, you can unlock the ability to add inline JavaScript code to your modern SharePoint pages, providing a powerful tool for live chat and other interactive features.

If you haven’t yet set up Live Chat for Microsoft Teams, sign up here to start your free trial today.