Preview generators

Microsoft Teams message preview generator

Mock up a Microsoft Teams bot message as a card with a title, body text, and up to two buttons, in a chat or a channel, then export it as a PNG.

Bot avatar (optional)
Image set
Preview
Background
GitHubAvailable
ChatFilesActivity
GitHub12:34 PM
CI failed on main
Workflow run #1284 failed at the test step. 3 of 214 checks did not pass. The last green run was 2 hours ago.
View runRe-run jobs
Type a message

Send this with one API call. Connect a Teams bot to Courier and post this, or a custom Adaptive Card, to users and channels.

Add Teams to your app

Instructions

How to use this tool

  1. 01Choose Chat or Channel. For a channel, enter the team and channel names, then the bot name that will send the message.
  2. 02Upload a bot avatar if you want it on the message, then write the card title and body text.
  3. 03Fill in up to two button labels, a main action and a secondary one.
  4. 04Set the timestamp.
  5. 05Click Download PNG to export the chat view.

Background

How Teams shows a message from a bot

A Teams bot can post plain text or a card. Custom cards are Adaptive Cards: a JSON description of the layout, which Teams draws inside the conversation. This preview draws a card with a title, body text, and two buttons, in a chat or a channel.

Microsoft's documentation says Teams supports Adaptive Card features up to version 1.6 for cards a bot sends, and recommends staying within that version. A card can show up to six primary actions, and Microsoft's design guidance says most cards don't need that many.

Background

Writing a card that reads at a glance

Make the title state the event in a few words, use the body for the one detail that decides what to do next, and put that next step on the first button.

A second button works best as a quiet alternative, like muting the alert or opening a dashboard. Microsoft's guidance also says a card should never need a horizontal scroll, so keep tables and long identifiers out of the body.

Background

Sending the card from Courier

Courier sends to Teams through a bot you register in the Teams Developer Portal and Azure. Once the bot is connected, you can address a message by conversation ID, channel ID, or user ID. Addressing by email or channel name also needs Microsoft Graph permissions that an administrator has to approve.

To send a custom card, add a Microsoft Teams channel in Design Studio, insert a Jsonnet block, and paste in the card JSON from Microsoft's Adaptive Cards Designer.

FAQ

Frequently asked questions

Which Adaptive Card version does Teams support?

Microsoft's docs say Teams supports Adaptive Card features up to version 1.6 for cards sent by a bot, and the Teams mobile app supports cards up to 1.6 too. Microsoft recommends designing within that version.

How many buttons can a Teams card have?

An Adaptive Card supports up to six primary actions shown on the card, according to Microsoft. This preview shows two, which covers the usual pairing of one main action and one secondary one.

How large can a message from a Teams bot be?

Microsoft lists 100 KB for a bot message and 28 KB for an Incoming Webhook. Courier sends through a bot, so the 100 KB figure is the one that applies to a card sent from Courier.

Does this mockup match new Teams or classic Teams?

It draws the lighter, rounded look of the newer Teams app, with the purple brand color, not the older dark-purple chrome. It is a mockup rather than a screen capture, so check it against your own client before using it in a design review.

How do I send an Adaptive Card from Courier?

Connect a Teams bot to Courier first. Then add a Microsoft Teams channel in Design Studio, insert a Jsonnet block, and paste in the card JSON from Microsoft's Adaptive Cards Designer. Data you pass in the send call fills the card.

More tools

Browse more free tools

Preview generatorsSlack message previewMock up a Slack app message with a header, body text, and up to two buttons, in a channel or a direct message, then export it as a PNG.Preview generatorsIn-app feed previewMock up an in-app notification center, the bell and its dropdown feed, with your own titles and text in light or dark, then export it as a PNG.Preview generatorsWhatsApp message previewBuild WhatsApp Business template mockups: image header, message, footer and quick-reply buttons. A template is what you send outside the 24-hour window.

Send Teams messages from the Courier API

Connect a Teams bot to Courier, then send text or Adaptive Cards to users and channels with one API call.

Send Teams messages with Courier