man thinking

Share Your Web Page to Teams

There's a new feature in Teams, currently in preview (as of June 2019) which makes it easy to share a web site or page in Teams. Of course it has always been pretty straightforward to do this. You just paste the URL into a conversation.

Teams - embed link in conversation

But there's an even better way if you have a website and you want to make it easy for a user to add your page. Now because this is still in preview (at the time of writing) you're going to have to enable Developer Preview in the Teams client - well actually in the browser, because it doesn't work in the client applications yet. To enable developer preview, open Teams in a browser, click on your ID icon (avatar) in the top right of the window, choose About from the menu and then choose Developer Preview.

Teams - enable developer preview

Now we're ready to add code to the page we want to make available to share in Teams.

At the top of this page I have included the following code:

<script async defer src="https://teams.microsoft.com/share/launcher.js" ></script>
<div class="teams-share-button" data-href="https://www.spdoctor.com/articles/Share_Your_Web_Page_to_Teams.html" data-icon-px-size="100" ></div>

Now, provided you have developer preview enabled, you can click on the Teams icon link at the top of this page and it will all be taken care of. The JavaScript works a bit like one of those tracking links for analytics or advertising and quietly generates a Teams icon of the size you specify (maximum 128 pixels square) and wires it up to Teams by means of a URL that will give the user the option of posting the link to the Teams channel, if they so choose. You can see in your browser that the link points back to teams.microsoft.com/share, along with the URL of the page we specify (it doesn't have to be this page).

Teams - add a link

When a user clicks on the link a browser window will open and give them a dialog to choose a Team or channel and the option to add a description.

Teams - add a link

For more information about this feature, I recommend that you go to the documentation page for the Share-to-Teams feature.