Build A Link Unfurling Messaging Extension Using The Microsoft Teams App

Introduction

 

Messaging extensions Link Unfurling is the process of performing an action based on the hyperlink pasted into a message. This allows the developer to design the card based on hyperlink details.

 

Link Unfurling

 

Messaging extensions Link Unfurling invokes the activity when the hyperlink from defined domain (defined or whitelist into the manifest file) is pasted into the message compose area. Link Unfurling help to respond to the full hyperlink with adaptive cards as well as additional information. It takes advantage of the Bot Framework's messaging schema and secure communication protocol to connect with Microsoft Teams Client App.

 

There are three types of messaging extension that can be built for Microsoft Teams, i.e.

1. Search based messaging extension for Microsoft Teams
2. Action-based messaging extension for Microsoft Teams
3. Link Unfurl with messaging extension for Microsoft Teams.

In this article, I am going to explain the "Link Unfurling messaging extension for Microsoft Teams". In layman terms, unfurl means to unfold the link and extract more information. 

 

Previous Article

 

A search-based messaging extension can be found here.

 

The action-based messaging extension can be found here.

 

How Messaging Extension Link Unfurling works:

 

 

Prerequisites

• Microsoft Teams
• Azure Bot Framework, .NetCore
• Microsoft 365 tenant
• Microsoft Azure subscription

Let's get started:

 

To create a Microsoft Team Messaging Extension requires two activities,

1. Create a Microsoft Azure Bot.
2. Create a manifest file with bot reference
3. Upload the manifest file to MS Team Client App.

Step 1 - Create a Microsoft Azure Bot

1. Browse the https://portal.azure.com with your work or school account.
2. Click "+Create Resource"
3. Select "AI + Machine Learning"
4. Select "Web App Bot"

Step 2 - Complete all required information and click create to provision the bot

1. Bot handle: its unique name of your bot.
2. Subscription: Select a valid available subscription.
3. Resource Group: Select an appropriate resource group or create a new one as per requirement.
4. Location: Select your closed azure location or the preferred location.
5. Pricing: Select the required pricing tier or F0 as free for POC activity.
6. App Name: Leave it as-is for this demo purpose.
7. Service Plan: Leave it as-is for this demo purpose.
8. Bot Template: Leave it as-is for this demo purpose.
9. Application insight: Select off for this demo purpose
10. Microsoft App Id and Password: Leave it as-is for this demo purpose.
11. Click create to provision

 

Step 3 - Enable Microsoft Team Channel for your Bot

 

In order for the bot to interact with MS Teams, you must enable the Teams Channel

 

 

To complete the process, MS Teams and Webchat should be available and should be listed in your channel lists.

 

 

Step 4 - Create a Bot Framework

 

In this section, we are going to create an echo bot using Visual Studio 2019

• Open the Visual Studio, Select create project and navigate to the desired directory to create a project.
• Select Echo Bot (Bot Framework v4) .Net Core

 

Step 5 - Update Default Bot Code

1. Select EchoBot.cs and Remove all default methods implemented into the EchoBot class.
2. Inherit Team Activity Handler to Echo Bot Class to implement the messaging extension-related method.
3. Add the Link Query Async method to respond with the designed card.
4. Add Query Async execute custom logic based on action command id

 

 

Link Query Async design the card and response to the same thread as Message Extension Response which consists of a designed hero card. 

protected override Task<MessagingExtensionResponse> OnTeamsAppBasedLinkQueryAsync(ITurnContext<IInvokeActivity> turnContext, AppBasedLinkQuery query, CancellationToken cancellationToken)
       {
           var heroCard = new ThumbnailCard
           {
               Title = "Thumbnail Card",
               Text = query.Url,
               Images = new List<CardImage> { new CardImage("https://www.leaders-in-law.com/wp-content/uploads/2020/03/COVID-19.png") },
           };
           var attachments = new MessagingExtensionAttachment(HeroCard.ContentType, null, heroCard);
           var result = new MessagingExtensionResult("list", "result", new[] { attachments });

           return Task.FromResult(new MessagingExtensionResponse(result));
       }

Build and Publish the Bot Code to the Publishing Profile.

 

Step 5 - Create Manifest

1. Create a folder within the solution with the name "TeamAppManifest"
2. Create and add icon-color.png file
3. Create and add icon-outline.png file
4. Create manifest.json file and Update compose Extension with Command Context "Compose" and "CommandBox

"composeExtensions": [
   {
     "botId": "4c961f60-bb20-44a9-913d-2177652ddb3b",
     "commands": [
       {
         "id": "searchQuery",
         "context": [ "commandBox" ],
         "description": "Test command to run query",
         "title": "Search Command",
         "type": "query",
         "parameters": [
           {
             "name": "searchQuery",
             "title": "Search Query",
             "description": "Your search query",
             "inputType": "text"
           }
         ]
       }
     ],
     "messageHandlers": [
       {
         "type": "link",
         "value": {
           "domains": [
             "*.botframework.com",
             "*.wikipedia.org"
           ]
         }
       }
     ]
   }
 ]

Step 6 - Upload Manifest into Microsoft Teams App

 

Navigate to manifest folder /src/manifest. Select both .png files and manifest.jon file and zip all three files. Give the name of zip file "manifest"

 

Login to https://teams.microsoft.com:

1. Navigate to App Studio
2. Select Import an existing app
3. Select the manifest.zip file
4. The bot name with the icon will appear at the screen

 

 

Step 7 - Install Custom App to Teams Solution

1. Select the Install App using Manifest file, and it will navigate to create an app page with all pre-filled information. Then, select test and distribute
2. Click Add to add the app to teams.

 

One bot deployment and manifest configuration is done, its time to test the messaging extension.

 

Output

1. Navigate to teams and select channel
2. Paste the whitelisted domain URL into composing the message box and click enter.
3. The link will be posted as hyperlink and immediately it will add thumbnail card to same message.

Before deploy solution, if the hyperlink is pasted, it will show just hyperlink

 

 

 

After deploying the solution, the same hyperlink is pasted and the result will appear with a designed adaptive card. 

 

 

Codebase exists here.

 

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.