{"id":11741,"date":"2022-10-12T07:52:40","date_gmt":"2022-10-12T14:52:40","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=11741"},"modified":"2022-10-12T06:44:43","modified_gmt":"2022-10-12T13:44:43","slug":"boost-your-microsoft-teams-app-experience-with-new-link-unfurling-capabilities","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/boost-your-microsoft-teams-app-experience-with-new-link-unfurling-capabilities\/","title":{"rendered":"Boost your Microsoft Teams app experience with new link unfurling capabilities\u00a0\u00a0"},"content":{"rendered":"<p><span data-contrast=\"auto\">Making your work easier, and more intuitive, is what we&#8217;re all about. Links are one of the most popular forms of content shared in Microsoft Teams today. At Microsoft, we are investing deeply in this space to enable rich discovery and content collaboration experiences, with <\/span><i><span data-contrast=\"auto\">link unfurling<\/span><\/i><span data-contrast=\"auto\"> at the center of these workflows.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/DemoGif.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-11748\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/DemoGif.gif\" alt=\"Image DemoGif\" width=\"800\" height=\"450\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>What is link unfurling?<\/h2>\n<p>Teams\u2019 users constantly share links in chats and meetings to exchange information about work, news, videos and more. This makes the user who receives the message click the link and switch to other platforms to consume the content. Wouldn&#8217;t it be helpful if users could see an overview of the link before clicking it? That way users can work more intuitively and efficiently without compromising context switching.<\/p>\n<p>With link unfurling, by simply copying and pasting a URL into a Teams chat, Teams users can get an adaptive card with a rich, interactive preview of the app content, presented in the same context of the chat or meeting where they work.<\/p>\n<p>To enable Link unfurling, your app can register to receive an invoke activity when URLs with a particular domain are pasted into the compose message area. The invoke contains the full URL that was pasted into the compose message area. You can respond with a card that the user can unfurl for additional information or actions. This works as a search command with the URL as the search term.<\/p>\n<h2>Types of link unfurling<\/h2>\n<p>With link unfurling for Teams, flexibility is key. Whether your app requires authentication, installation or not, link unfurling allows you to provide a seamless experience for your app users.<\/p>\n<p>How do we do it? When a user shares a link in Teams, we first check to see if we can match it to a Teams app to generate a specified preview for it and handle the authentication flow as needed by your app. If the link doesn\u2019t map to a Teams app, then we create a preview of your web site through basic or rich actionable previews.<\/p>\n<p>This diagram shows you a quick view of the scenarios you can manage with link unfurling:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-1.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-11757\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-1-1024x569.png\" alt=\"This diagram shows you a quick view of the scenarios you can manage with link unfurling:\" width=\"640\" height=\"356\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-1-1024x569.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-1-300x167.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-1-768x426.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-1.png 1430w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>To learn more about how to implement link unfurling previews using your Teams app, learn more <a href=\"https:\/\/aka.ms\/ignite-teams-dev-linkunfurling-general\">here<\/a>.<\/p>\n<p>To learn about building portable, live adaptive card-based loop components for your unfurled app links, see <a href=\"https:\/\/aka.ms\/ignite-teams-dev-acLoopComponents\">here<\/a>.<\/p>\n<h2>Expand your app visibility, discoverability, and ultimately your app usage<\/h2>\n<p>What if you could leverage the benefits of link unfurling to provide a seamless experience to your users even when your app isn&#8217;t directly installed on Teams? App adoption can be hindered by the user having to find and install your app first, which can be time-consuming. Beyond the benefits link unfurling provides for end users, as a developer it also allows you to expand your app visibility, discoverability, and ultimately its usage by our mutual customers.<\/p>\n<h3>Welcome <em>zero-install link unfurling<\/em><\/h3>\n<p>With zero-install link unfurling, any time one of your links is shared in Teams, your app can unfurl it and showcase its value and skills right in the flow of conversation, regardless of if the user has discovered or installed your app before.<\/p>\n<p>The zero-install link unfurling experience is governed by all Teams admin security policies, which means that if an app is blocked at the tenant level, zero-install link unfurling won&#8217;t preview it.<\/p>\n<h3>Get started with zero-install link unfurling<\/h3>\n<p>To get your app ready for zero-install link unfurling these are the 3 main steps:<\/p>\n<ol>\n<li>Prepare your app, opt-in via manifest\n<ul>\n<li>Set the manifest property <em>supportsAnonymousAccess<\/em> to TRUE<\/li>\n<\/ul>\n<\/li>\n<li>Look for the new payload request\n<ul>\n<li>Set your app to handle the new invoke request composeExtension\/anonymousQueryLink in the manifest.\n<ul>\n<li>If your app doesn\u2019t require authentication, send back a response with type <em>result<\/em> and the unfurled card.<\/li>\n<li>If your app requires authentication, send back a response with type <em>auth <\/em>and a welcome card.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><em>Create a welcome card<\/em>\n<ul>\n<li>Create beautiful welcome cards showing users a preview of your app with placeholder fields that will populate on the card on sign-in, to get more users to discover and learn about your app even before they\u2019ve installed it.<\/li>\n<li>We recommend using <a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/bots\/how-to\/authentication\/auth-aad-sso-bots\">Single sign-on support for bots &#8211; Teams | Microsoft Docs<\/a> to create the most light-weight, one-time sign-in experience for your users.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/MicrosoftTeams-image-7.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11797\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/MicrosoftTeams-image-7-1024x443.png\" alt=\"Image MicrosoftTeams image 7\" width=\"800\" height=\"346\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/MicrosoftTeams-image-7-1024x443.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/MicrosoftTeams-image-7-300x130.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/MicrosoftTeams-image-7-768x332.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/MicrosoftTeams-image-7.png 1336w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>To learn more about how to implement zero-install link unfurling learn more <a href=\"https:\/\/aka.ms\/ignite-teams-dev-linkunfurling-zeroinstall\">here.<\/a><\/p>\n<h2>Enable link previews for your website links<\/h2>\n<p>Even if you don\u2019t have a Teams app, we are making it easier than ever for you to show rich adaptive cards to unfurl previews of your links.\u00a0By leveraging <a href=\"http:\/\/www.schema.org\">schema.org<\/a> and using a library of micro-capability templates, you can unfurl rich previews for your links in Teams, using the data you already specify.<\/p>\n<h3>Get started<\/h3>\n<p>Simply specify schema.org metadata related to one of the following types on your website, and we\u2019ll use it show users a rich preview when they share your links in Teams.\u00a0\u00a0Here\u2019s an example of how this works:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-3.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-11761\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-3-1024x683.png\" alt=\"Example of enabling link previews for your website links\" width=\"640\" height=\"427\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-3-1024x683.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-3-300x200.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-3-768x512.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-3.png 1400w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/a><\/p>\n<p>We have created several templates for you to start leveraging this feature.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-4-1.png\"><img decoding=\"async\" class=\"aligncenter wp-image-11762\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-4-1-1024x496.png\" alt=\"Examples of templates to start leveraging link unfurling\" width=\"900\" height=\"436\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-4-1-1024x496.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-4-1-300x145.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-4-1-768x372.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-4-1-1536x745.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/10\/Link-unfurling-image-4-1-2048x993.png 2048w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p>Try it out today!<u> <\/u>Get more information <a href=\"https:\/\/aka.ms\/ignite-teams-dev-linkunfurling-appless\">here<\/a>\u00a0on how to take advantage of these new previews for your website. To see what your website templates will look like in Teams, just paste a link in Teams and see it unfurl in real-time!<\/p>\n<h2>Take advantage of link unfurling in Teams to enhance your teamwork experience today!<\/h2>\n<p>Boosting your Teams app experience with new capabilities is now much easier than even before. We walked you through a variety of link unfurling experiences, and now it is time for you to start building on the platform with it! Here\u2019s something you can start doing:<\/p>\n<ul>\n<li>If you\u2019re getting acquainted with the Teams Platform, start by adding schema.org properties that map to one of our templates. Learn how <a href=\"https:\/\/aka.ms\/ignite-teams-dev-linkunfurling-appless\">here<\/a>.<\/li>\n<li>Next, build a Teams app that does link unfurling, learn more <a href=\"https:\/\/aka.ms\/ignite-teams-dev-linkunfurling-general\">here<\/a>. You can also learn how to add card actions in a bot <a href=\"https:\/\/aka.ms\/ignite-teams-dev-linkunfurling-cardActions\">here<\/a> and create adaptive cards, thumbnails and hero cards <a href=\"https:\/\/aka.ms\/ignite-teams-dev-linkunfurling-ac\">here<\/a>.<\/li>\n<li>Finally, add zero install link unfurling to give users a preview of what your unfurled link looks like and the information it would contain even if your app requires authentication or isn\u2019t installed. Learn more <a href=\"https:\/\/aka.ms\/ignite-teams-dev-linkunfurling-zeroinstall\">here<\/a>.<\/li>\n<\/ul>\n<p>And don\u2019t forget to check out our Ignite session on <a href=\"https:\/\/aka.ms\/ignite-teams-dev\">Building Collaborative apps to power an evolving workplace<\/a> where we will show this and more exciting, new capabilities we are shipping for you.<\/p>\n<p>We can\u2019t wait to see your app and website previews running on Teams!<\/p>\n<p>See you at Microsoft Ignite 2022.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Links are one of the most popular forms of content shared in Microsoft Teams today. We are investing deeply in this space to enable rich discovery and content collaboration experiences, with link unfurling at the center of these workflows.\u00a0<\/p>\n","protected":false},"author":103201,"featured_media":11912,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[195],"class_list":["post-11741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-link-unfurling"],"acf":[],"blog_post_summary":"<p>Links are one of the most popular forms of content shared in Microsoft Teams today. We are investing deeply in this space to enable rich discovery and content collaboration experiences, with link unfurling at the center of these workflows.\u00a0<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/11741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/103201"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=11741"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/11741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/11912"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=11741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=11741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=11741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}