Home

Microsoft Teams Incoming Webhook - Message Formatting

%3CLINGO-SUB%20id%3D%22lingo-sub-31984%22%20slang%3D%22en-US%22%3EMicrosoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-31984%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20created%20a%20formatted%20message%20and%20sent%20it%20to%20to%20Microsoft%20Teams%20Incoming%20Webhook%20as%20described%20here%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdev.outlook.com%2FConnectors%2FGetStarted%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.outlook.com%2FConnectors%2FGetStarted%3C%2FA%3E.%20I%20used%20the%20sample%20message%20(the%20last%20one%2C%20the%20most%20complex%2C%20with%20sections)%20from%20here%26nbsp%3B%20%3CA%20href%3D%22https%3A%2F%2Fdev.outlook.com%2FConnectors%2FReferencehttp%3A%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.outlook.com%2FConnectors%2FReference%3C%2FA%3E..%20It's%20visible%20in%20my%20MS%20Teams%20Channel%20but%20the%20formatting%20is%20slightly%20different.%20Are%20there%20any%20limitations%20to%20message%20format%20inside%20Microsoft%20Teams%3F%20What%20are%20the%20supported%20Markdowns%3F%3C%2FP%3E%3CP%3EExpected%20result%3A%3C%2FP%3E%3CP%3E%3CIMG%20src%3D%22https%3A%2F%2Fdev.outlook.com%2Fcontent%2Fimages%2Fconnectors%2Fmultiple-sections.png%22%20alt%3D%22A%20connector%20card%20with%20multiple%20sections%22%20border%3D%220%22%20%2F%3E%3C%2FP%3E%3CP%3EActual%20Result%20(even%20the%20guy%20on%20the%20picture%20is%20different%20%3B)%3C%2Fimg%3E%20%3A(%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20774px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F8824iC2C7E84FD2889883%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Message.PNG%22%20title%3D%22Message.PNG%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EActual%20message%20format%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EWhat%20markdowns%2FJSON%20attributes%20should%20I%20use%20to%20create%20a%20message%20similar%20to%20the%20one%20below%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20518px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F8825i8C90E0ED17A3DF78%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Important.PNG%22%20title%3D%22Important.PNG%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EImportant%20message%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E--%3C%2FP%3E%3CP%3EBr%2C%3C%2FP%3E%3CP%3EJacek%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-31984%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EChat%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EConversations%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Teams%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-282154%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-282154%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20use%20an%20webhook%20from%20azure%20VM%20portal%20to%20extend%20the%20autoshutdown.%20unfortuantely%20the%20message%20in%20teams%20cut%20and%20we%20cannot%20see%20the%20full%20text.%20it%20is%20possilbe%20to%20expand%20the%20size%20from%20this%20message%20box%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-251359%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-251359%22%20slang%3D%22en-US%22%3E%3CP%3EIf%20you%20are%20looking%20for%20the%20details%20on%20how%20to%20build%20Cards%2C%20you%20will%20want%20to%20use%20the%20following%3A%3C%2FP%3E%3CUL%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fconcepts%2Fcards%2Fcards%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fmicrosoftteams%2Fplatform%2Fconcepts%2Fcards%2Fcards%3C%2FA%3E%3C%2FLI%3E%3C%2FUL%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20the%20%22Message%20Card%20Playground%22%20(i.e.%20test%20JSON%20code)%2C%20use%20one%20of%20the%20two%20following%20URLs%3A%3C%2FP%3E%3CUL%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Fmessagecardplayground.azurewebsites.net%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmessagecardplayground.azurewebsites.net%2F%3C%2FA%3E%3C%2FLI%3E%3CLI%3E%3CA%20href%3D%22https%3A%2F%2Facdesignerbeta.azurewebsites.net%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Facdesignerbeta.azurewebsites.net%2F%3C%2FA%3E%3C%2FLI%3E%3C%2FUL%3E%3CP%3EOne%20thing%20to%20keep%20in%20mind%2C%20if%20you%20are%20using%20Webhooks%20to%20perform%20your%20integrations%2C%20StackOverflow%20states%20that%20Webhooks%20do%20not%20currently%20support%20the%20Adaptive%20Cards%2C%20as%20they%20are%20planning%20to%20have%20that%20in%20place%20for%20Bots%20first%20(%3CA%20href%3D%22https%3A%2F%2Fstackoverflow.com%2Fquestions%2F50753072%2Fmicrosoft-teams-webhook-generating-400-for-adaptive-card%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fstackoverflow.com%2Fquestions%2F50753072%2Fmicrosoft-teams-webhook-generating-400-for-adaptive-card%3C%2FA%3E).%20Also%2C%20Teams%20seems%20to%20have%20some%20limitations%20on%20the%20JSON%20values%20that%20can%20be%20used%2C%20so%20try%20the%20simplest%20forms%20first%2C%20before%20you%20start%20writing%20complex%20code.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-235675%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-235675%22%20slang%3D%22en-US%22%3E%3CP%3Ethe%20link%20is%20broken...%20does%20anybody%20has%20the%20new%20link..%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CHR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F40547%22%20target%3D%22_blank%22%3E%40Michael%20Lombardi%3C%2FA%3E%26nbsp%3Bwrote%3A%3CBR%20%2F%3E%3CP%3EIt%20is%2C%20but%20the%20%3CA%20href%3D%22https%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Fmicrosoft-teams%2Fconnectors%23next-steps%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Edocumentation%20for%20teams%3C%2FA%3E%26nbsp%3Bactually%20sends%20you%20there%20for%20further%20guidance%20-%20indicating%20that%20you%26nbsp%3B%3CEM%3Eshould%3C%2FEM%3E%20be%20able%20to%20get%20connector%20cards%20displayed%20in%20your%20channels%20just%20like%20they%20display%20for%20Outlook.%3C%2FP%3E%3CHR%20%2F%3E%3C%2FBLOCKQUOTE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-175464%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-175464%22%20slang%3D%22en-US%22%3E%3CP%3EI%20hadnt%20heard%20about%20the%20messaging%20playground%20before%20and%20was%20searching%20everywhere%20for%20a%20full%20fledged%20JSON%20sample%20to%20create%20cards.%20Thanks%20for%20the%20link%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-82199%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-82199%22%20slang%3D%22en-US%22%3E%3CP%3EAfter%20trying%20to%20get%20images%20into%20Teams%2C%20I%20found%20the%20full%20example%20of%20a%20MessageCard%20(after%20stumbling%20into%20this%20thread%20too%20many%20times)%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmessagecardplayground.azurewebsites.net%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmessagecardplayground.azurewebsites.net%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFiring%20that%20into%20MS%20Teams%20we%20get%3A%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20771px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F16428iB63928A1CC5BD2D9%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22teamsEffort.PNG%22%20title%3D%22teamsEffort.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3BSo%20anyone%20stumbling%20around%20like%20I%20am%2C%20came%20across%20this%20thread%20and%20wondering%20what%20kind%20of%20%22rich%20content%22%20Teams%20Webhooks%20supports%2C%20this%20appears%20to%20be%20%22it%22.%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20you%20want%20images%2C%20you%20seem%20to%20be%20limited%20to%20the%20%22images%22%20gallery%20and%20the%20activityImage.%26nbsp%3B%3C%2FP%3E%3CP%3ECard%20title%20formatting%2C%20actions%20and%20hero%20images%20straight-up%20don't%20work.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20this%20post%20becomes%20old%2C%20use%20the%20first%20link%20and%20fire%20the%20example%20at%20your%20webhook%20URL%20to%20see%20if%20there's%20been%20any%20improvement.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E(Edit%3A%26nbsp%3BActually%2C%20I%20can%20use%20images%20in%20the%20'text'%20field%2C%20just%20the%20one%20I%20was%20using%20bugged%20out.%20But%20the%20above%20info%20is%20useful%2C%20so%20I'll%20leave%20it)%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-53327%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-53327%22%20slang%3D%22en-US%22%3EI%20completely%20agree.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-53303%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-53303%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20glad%20it's%20working%20for%20new%20teams%2C%20and%20I'll%20try%20that%20shortly%2C%20but%20it%26nbsp%3B%3CEM%3Ereally%3C%2FEM%3E%20needs%20to%20be%20fixed%20for%20existing%20teams.%20Thanks%20for%20the%20catch%20though!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-53194%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-53194%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSTRONG%3ECreate%26nbsp%3Ba%20new%20team%20and%20try%20it%20again%3C%2FSTRONG%3E.%20%3CEM%3EAfter%20recent%20updates%3C%2FEM%3E%20pushed%20by%20Microsoft%2C%20I%20have%20much%20nicer%20looking%20message%20cards%20(including%20the%20defined%20color%2C%20an%20action%20that%20actually%20looks%20like%20a%20button%2C%20etc.)%26nbsp%3Bwhen%20I%20post%20them%20to%20a%26nbsp%3B%3CEM%3Enew%3C%2FEM%3E%20team%20within%20my%20MS%20Teams%20account.%20Posting%20the%20exact%20same%20payload%20to%20an%20existing%20team%20(from%20before%20updating)%20still%20results%20in%20the%20flat%20misformat%2C%20same%20as%20you%20posted.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-46633%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-46633%22%20slang%3D%22en-US%22%3E%3CP%3EIt%20is%2C%20but%20the%20%3CA%20href%3D%22https%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Fmicrosoft-teams%2Fconnectors%23next-steps%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Edocumentation%20for%20teams%3C%2FA%3E%26nbsp%3Bactually%20sends%20you%20there%20for%20further%20guidance%20-%20indicating%20that%20you%26nbsp%3B%3CEM%3Eshould%3C%2FEM%3E%20be%20able%20to%20get%20connector%20cards%20displayed%20in%20your%20channels%20just%20like%20they%20display%20for%20Outlook.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-38235%22%20slang%3D%22en-US%22%3ERe%3A%20Microsoft%20Teams%20Incoming%20Webhook%20-%20Message%20Formatting%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-38235%22%20slang%3D%22en-US%22%3E%3CP%3EI%20think%20the%20formatting%20options%20for%20incoming%20webhooks%20in%20teams%20are%26nbsp%3Bslim.%26nbsp%3BHopefully%2C%20we%20will%20see%20full%20markup%20support%20and%20possibly%20actions%20etc.%20sometime%20in%20the%20future.%3CBR%20%2F%3E%3CBR%20%2F%3EI%20believe%20the%20documentation%20you%20found%20is%20for%20Msft%20groups%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E
Jacek Kopciński
Visitor

Hi,

 

I created a formatted message and sent it to to Microsoft Teams Incoming Webhook as described here: https://dev.outlook.com/Connectors/GetStarted. I used the sample message (the last one, the most complex, with sections) from here  https://dev.outlook.com/Connectors/Reference.. It's visible in my MS Teams Channel but the formatting is slightly different. Are there any limitations to message format inside Microsoft Teams? What are the supported Markdowns?

Expected result:

A connector card with multiple sections

Actual Result (even the guy on the picture is different ;) :(

 Message.PNGActual message format

What markdowns/JSON attributes should I use to create a message similar to the one below:

Important.PNGImportant message

--

Br,

Jacek

 

10 Replies

I think the formatting options for incoming webhooks in teams are slim. Hopefully, we will see full markup support and possibly actions etc. sometime in the future.

I believe the documentation you found is for Msft groups?

It is, but the documentation for teams actually sends you there for further guidance - indicating that you should be able to get connector cards displayed in your channels just like they display for Outlook.

Create a new team and try it again. After recent updates pushed by Microsoft, I have much nicer looking message cards (including the defined color, an action that actually looks like a button, etc.) when I post them to a new team within my MS Teams account. Posting the exact same payload to an existing team (from before updating) still results in the flat misformat, same as you posted.

I'm glad it's working for new teams, and I'll try that shortly, but it really needs to be fixed for existing teams. Thanks for the catch though!

I completely agree.

After trying to get images into Teams, I found the full example of a MessageCard (after stumbling into this thread too many times):

https://messagecardplayground.azurewebsites.net

 

Firing that into MS Teams we get:teamsEffort.PNG

 

 So anyone stumbling around like I am, came across this thread and wondering what kind of "rich content" Teams Webhooks supports, this appears to be "it". 

If you want images, you seem to be limited to the "images" gallery and the activityImage. 

Card title formatting, actions and hero images straight-up don't work. 

 

If this post becomes old, use the first link and fire the example at your webhook URL to see if there's been any improvement. 

 

(Edit: Actually, I can use images in the 'text' field, just the one I was using bugged out. But the above info is useful, so I'll leave it)

I hadnt heard about the messaging playground before and was searching everywhere for a full fledged JSON sample to create cards. Thanks for the link

the link is broken... does anybody has the new link.. 


@Michael Lombardi wrote:

It is, but the documentation for teams actually sends you there for further guidance - indicating that you should be able to get connector cards displayed in your channels just like they display for Outlook.


 

If you are looking for the details on how to build Cards, you will want to use the following:

 

For the "Message Card Playground" (i.e. test JSON code), use one of the two following URLs:

One thing to keep in mind, if you are using Webhooks to perform your integrations, StackOverflow states that Webhooks do not currently support the Adaptive Cards, as they are planning to have that in place for Bots first (https://stackoverflow.com/questions/50753072/microsoft-teams-webhook-generating-400-for-adaptive-car...). Also, Teams seems to have some limitations on the JSON values that can be used, so try the simplest forms first, before you start writing complex code.

We use an webhook from azure VM portal to extend the autoshutdown. unfortuantely the message in teams cut and we cannot see the full text. it is possilbe to expand the size from this message box?

Related Conversations
Stable version of Edge insider browser
HotCakeX in Discussions on
35 Replies
flashing a white screen while open new tab
cntvertex in Discussions on
13 Replies
Tabs and Dark Mode
cjc2112 in Discussions on
22 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
28 Replies
Edge insider Dev bypasses IE mode website list
HotCakeX in Enterprise on
4 Replies