title: Microsoft Teams cards as html
body: <p>I have Microsoft Teams chat messages collected via API and want to display those on a website. The problem comes when JSONs of <a href="https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference" rel="nofollow noreferrer">cards</a> are in these chat messages. I tried displaying adaptive cards with <a href="https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/getting-started" rel="nofollow noreferrer">Adaptive Card JS SDK</a> and it displayed adaptive card type fine. But I can't find any reference to how can I display other card types correctly.</p>
  <p>Few thoughts:</p>
  <ol>
  <li>Can I convert any other card type to an Adaptive Card JSON (either
  by a library or coding the con so I can display with Adaptive Card
  JS SDK? But then if I do it by code myself will I able to handle all
  card types/scenarios?</li>
  <li>Is there any JS library that could show JSONs of cards other than
  Adaptive cards also</li>
  </ol>
  <p>I need to be able to display any card type, but it doesn't need to be an exact match of how displayed in the MS Teams app (closer the better :) ). I don't need any functionalities in cards as button clicks/redirections, just card need to be rendered in HTML as it would in MS Teams.
  Note: I have the content types of card JSON as <code>application/vnd.microsoft.card.hero</code>, <code>application/vnd.microsoft.card.thumbnail</code>, <code>application/vnd.microsoft.teams.card.o365connector</code>, etc from chat meta data.</p>
  <p>eg 1: Card from Wikipedia app</p>
  <p><a href="https://i.stack.imgur.com/2YcN1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2YcN1.png" alt="enter image description here" /></a></p>
  <p>JSON for the card</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;title&quot;: &quot;&lt;a href=\&quot;https://en.wikipedia.org/wiki/Unidentified%20flying%20object\&quot; target=\&quot;_blank\&quot;&gt;Unidentified flying object&lt;/a&gt;&quot;,
    &quot;text&quot;: &quot;unidentified flying object (&lt;span&gt;UFO&lt;/span&gt;) is any aerial phenomenon that cannot immediately be identified or explained. Most &lt;span&gt;UFOs&lt;/span&gt; are identified or investigated&quot;,
    &quot;images&quot;: [
      {
        &quot;alt&quot;: &quot;Unidentified flying object&quot;,
        &quot;url&quot;: &quot;https://upload.wikimedia.org/wikipedia/commons/b/bc/PurportedUFO2cropped.jpg&quot;
      }
    ],
    &quot;buttons&quot;: [
  
    ]
  }
  </code></pre>
  <p>eg 2: Card of Stocks app
  <a href="https://i.stack.imgur.com/wFSid.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wFSid.png" alt="enter image description here" /></a></p>
  <p>JSON for the card</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;sections&quot;: [
      {
        &quot;activityTitle&quot;: &quot;&lt;span style=\&quot;font-weight:600;font-size:1.8rem\&quot;&gt;Apple Inc (Nasdaq Stock Market: AAPL)&lt;/span&gt;&quot;,
        &quot;activitySubtitle&quot;: &quot;&lt;span style=\&quot;font-size:1.6rem\&quot;&gt;125.89&amp;nbsp;&amp;nbsp;&lt;span style=\&quot;color:#7FBA00\&quot;&gt;&amp;#x25B2; 2.35 (1.90%)&lt;/span&gt;&lt;/span&gt;&quot;,
        &quot;activityText&quot;: &quot;\r\n&lt;br/&gt;\r\n&lt;div style=\&quot;font-size:1.2rem\&quot;&gt;\r\n  &lt;p&gt;\r\n    &lt;span style=\&quot;font-weight:600\&quot;&gt;When:&lt;/span&gt; Friday, June 4, 2021 7:59 PM EDT. Delayed 15 minutes.&lt;br/&gt;    &lt;span style=\&quot;font-weight:600\&quot;&gt;After hours:&lt;/span&gt; 126.01\r\n  &lt;/p&gt;\r\n  &lt;p&gt;Data from Refinitiv&lt;/p&gt;\r\n&lt;/div&gt;&quot;,
        &quot;potentialAction&quot;: [
          {
            &quot;@type&quot;: &quot;OpenUri&quot;,
            &quot;targets&quot;: [
              {
                &quot;os&quot;: &quot;default&quot;,
                &quot;uri&quot;: &quot;https://www.msn.com/en-us/money/stockdetails/fi-a1mou2&quot;
              }
            ],
            &quot;name&quot;: &quot;More details&quot;,
            &quot;@id&quot;: &quot;ViewOnMsn&quot;
          },
          {
            &quot;@type&quot;: &quot;OpenUri&quot;,
            &quot;targets&quot;: [
              {
                &quot;os&quot;: &quot;default&quot;,
                &quot;uri&quot;: &quot;https://www.bing.com/news/search?q=Apple Inc&quot;
              }
            ],
            &quot;name&quot;: &quot;News&quot;,
            &quot;@id&quot;: &quot;ViewNews&quot;
          }
        ],
        &quot;markdown&quot;: false
      }
    ]
  }
  </code></pre>
  <p>eg 3: Card of Youtube app</p>
  <p><a href="https://i.stack.imgur.com/IA6XQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IA6XQ.png" alt="enter image description here" /></a></p>
  <p>JSON for the card</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;title&quot;: &quot;M1 MacBook Pro and Air review: Apple delivers&quot;,
    &quot;subtitle&quot;: &quot;The Verge | 1.4M views | 6 months ago&quot;,
    &quot;text&quot;: &quot;&lt;p&gt;Apple has updated three Mac with its own M1 processors: the Macbook Air, the entry-level 13-inch MacBook Pro, and the Mac mini. Will Intel-based apps run? Will ...&lt;/p&gt;\r\n\r\n\r\n&lt;p&gt;YouTube | 12:57&lt;/p&gt;&quot;,
    &quot;images&quot;: [
      {
        &quot;alt&quot;: &quot;M1 MacBook Pro and Air review: Apple delivers&quot;,
        &quot;url&quot;: &quot;https://i.ytimg.com/vi/OEaKQ0pxQsg/hqdefault.jpg&quot;
      }
    ],
    &quot;buttons&quot;: [
  
    ],
    &quot;tap&quot;: {
      &quot;type&quot;: &quot;openUrl&quot;,
      &quot;title&quot;: &quot;M1 MacBook Pro and Air review: Apple delivers&quot;,
      &quot;value&quot;: &quot;https://www.youtube.com/watch?v=OEaKQ0pxQsg&quot;
    }
  }
  </code></pre>