HANDS ON SharePoint
HANDS ON Teams
HANDS ON Lists
HANDS ON tek
M365 Admin
Add Microsoft Teams chats to SharePoint
In today’s work environment, we’ve all witnessed the transformation of how we get things done. Work is all about collaboration, flexibility, and staying connected. Chances are you’ve heard that technology should be where you work, seamlessly integrated into your daily routine.
Microsoft understands this need and has made great improvements in that direction. While most applications were brought into Microsoft Teams, there is another exciting perspective worth exploring: bringing Microsoft Teams to your SharePoint intranet.
In this blog post, I’m showing you how to do just that. I’ll guide you through the process of integrating Microsoft Teams chats into your SharePoint intranet, including a custom solution that I developed for this purpose.
For a while, I’ve had the idea of creating an integrated chat for SharePoint using Microsoft Teams, like the one found on LinkedIn. However, this requires a substantial amount of work, and writing a Microsoft Teams custom application solely for this purpose seemed too much.
I’ve had this project idea bouncing around in my head for a while. But one day, as I was casually scrolling through the latest Microsoft Teams updates, I stumbled upon a new feature that makes links shared in Teams conversations open right next to the related website, giving you a better feel for the context.
This was the perfect solution to implement the Microsoft Teams chat inside SharePoint and after exploring it a bit I concluded that it was viable and built the extension you are now reading about in this post.
How to add Microsoft Teams chats to SharePoint sites
If you are willing to know more about the implementation details have a look to here where I explain how things were made.
Before we jump into the details of the installation process make sure you download the sppkg package from here.
- Extract the zip file, inside you will find a sppkg to install the solution in your SharePoint tenant
- Open the SharePoint app catalog and upload the chat-embedded.sppkg
- Check the option Enable this app and it to all sites, this will make the app available in all modern SharePoint site for all the users
- Click Enable app
- Click Go to API access page, this step is required to see the profile picture of the user in the extension
- Select the Read permission from the chat-embedded-client-side-solution and click Approve
Navigate to any page in your organization and you will see the extension at the bottom of the page. If you are not yet authenticated in Microsoft Teams in the browser you will have to do it the first time you use the extension, after it you will be able to simply have conversations from any SharePoint page as shown in the following animation.
Note this extension takes advantage of an integration made by Microsoft and it automatically gets the color of the theme from your operating system, so it automatically chooses the light or dark themes.
If you want to see it in action have a look to the video below, and make sure you follow me on social media and YouTube so you don’t miss future updates and cool integrations for your SharePoint intranet.
October 27, 2023
Hi Joao, I published your solution in a tenant, but the all users appear with “Unknown User” (and I did give permissions to graph api) Did you know what happens?
Thanks for your solution!!
November 16, 2023
Do you see the unknown user in the chat window or in the component to open it?
November 6, 2023
I have used your code facing one issued at bottom placeholder show error message object is possibly undefined
November 16, 2023
Can you share a screenshot with the error with me?
November 15, 2023
If you are not using Edge make sure you open Teams in EDGE in the browser and then refresh the SharePoint page again.
I had a Chrome user reporting that it only worked after Teams was launched in EDGE for the first time, once he did it, it started working in all browsers.
November 15, 2023
Thank you so much for creating this. I’m not able to get it to work though. I am using Edge and have opened Teams in the browser and refreshed. The Team app just doesn’t show up on the page. Is there anything I need to turn on in the tenant to make it work?
November 16, 2023
Have you installed it in the global app catalog and made it enabled to all the modern SharePoint sites?
If that is the case, check the browser console and let me know if you see any error related to the extension.
November 21, 2023
Thank you for leading me in the right direction. There was an error on retrieving my photo. I didn’t have a photo, so I uploaded one, and after that it worked. Is there a way around that, if someone does not have a photo in M365?
February 9, 2024
I’ll need to fix it so it works for all users with and without a photo.
Thanks for letting me know.
Have a nice day 🙂
November 24, 2023
Hello Mr. Ferreira,
I really like the look and feel similar to the LinkedIn messaging. My observation is that it provides full Teams functionality to users.
Can you imagine a functionality that would limit or target a specific Teams channel?
Seeking to provide a support type Teams chat without full Teams functionality.
Keep up the great work.
February 8, 2024
Hi Charles,
That is not possible using a solution like this one that is leveraging what Microsoft built for outlook.
To implement something like that you would need to build a custom solution using the Microsoft Graph APIs to get the messages for a specific channel.
Have a nice day 🙂
December 1, 2023
Hi !
Thank you for this tip, it works very nice ! Even if we deploy it only on the appCatalog of a single site and not global appCatalog.
One question : is it possible to hide it or move it if some users want it ? Sometimes it can hide some SharePoint system buttons.
Thanks !
January 26, 2024
Hi David,
With the current version is not possible but it starts bother me sometimes as it stays on top of some save buttons.
I’ll add to my back log make it draggable so users can move it if it hides important buttons.
Have a nice day 🙂
December 4, 2023
I have imported this in my sharepoint and it works effortlessly but still i am eager to open a chat directly instead of opening the lists of chats i want to open the single chat
can you help me to achieve this..?
January 26, 2024
Hi Sachin,
That will require custom development and a custom solution to implement it. This solution is taking advantage of what Microsoft built for Edge.
Have a nice day 🙂
January 31, 2024
This is what I was trying to do, and I was able to alter the URL to a specific chat (worked the same as when I copy/paste João’s URL in the app – https://teams.microsoft.com/embed-client/chats/list?layout=singlePane). I’m still seeing an error when I attempt to package it myself.
Even unaltered, I still see the error. I’ll have more time to play around later this week.
February 2, 2024
Hi Josh,
I was investigating this a bit further and with the link to the chat it should work.
This is the link I used https://teams.microsoft.com/embed-client/chats/19:74c1084e-ce52-462b-a95c-414f54c7b8a9_ad73609b-e71e-45ef-a7f1@unq.gbl.spaces/view?layout=singlePane
Did not compiled it into a new solution but tested it using the debugger and it worked fine.
Hope this helps.
Have a nice day 🙂
January 15, 2024
Hello again, João. I’ve walked through several times but only receive the same errors. I’d love a couple of updates but have tried your out-of-the-box package first. So far, I have:
> loaded in the catalog for all sites
> opened Teams in EDGE first (and did a hard refresh)
First:
Could not load teams-chat-embedded-application-customizer in require. TypeError: Cannot read properties of undefined (reading ‘id’)
Second:
‘ClientSideExtension.ApplicationCustomizer.c129df59-b7ec-487d-b748-e197e12a16f8’. Error information is ‘Extension failed to load for componentId “c129df59-b7ec-487d-b748-e197e12a16f8”.’.
January 15, 2024
One more thing: API is already approved via another app (PnP search).
January 26, 2024
If the permission is already granted you don’t need to do it again, it will use the same permission from Search.
January 15, 2024
Well….it worked when adding/installing it to all sites. Is that a requirement? I’d love to initially add to a few for testing/project requirements.
January 26, 2024
Hi Josh,
No it is not a requirement, you can add it to individual sites also.
The best way to do it is by creating site collection app catalogs where you want to make it available, here is an article I did explaining how to do it.
https://sharepoint.handsontek.net/2024/01/26/create-sharepoint-site-collection-app-catalog-using-pnp-powershell/
Hope this helps, have a nice weekend.
January 26, 2024
Josh,
I’m replying to your comments in the wrong order, I’m assuming you made it work already.
If not please let me know so I can investigate further the issue.
Have a nice day 🙂
February 2, 2024
Hi Josh
Trying to get this to work but, not seeing any teams extension at the bottom of the page. I have tried logging into teams online in Edge and then refreshing SharePoint site but still no joy.
February 4, 2024
Hi Russell,
Do you see any error in the browser console?
On your app catalog navigate to the tenant wide extension list and check if you see the TeamsChatEmbedded item in the list.
Where is the Tenant Wide Extensions list located?
If you don’t see it please follow the installation steps again.
Have a nice day 🙂
February 4, 2024
Hi
It was not in the Tenant Wide Extension list so went through steps again and its now there. Cant see it after change, getting errors in the browser console still…
Failed to load resource: the server responded with a status of 404 () graph.microsoft.com/v1.0/me/photo/$value:1
February 5, 2024
Hi Russel,
Do you have a profile picture defined in Microsoft 365?
If you do, please make sure the permissions on #6 are approved.
Have a nice day 🙂
February 7, 2024
can’t see that app at footer
February 7, 2024
Hello,
Do you see any error in the browser console?
On your app catalog navigate to the tenant wide extension list and check if you see the TeamsChatEmbedded item in the list.
Where is the Tenant Wide Extensions list located?
If you don’t see it please follow the installation steps again.
Have a nice day