{"id":21158245,"url":"https://github.com/simbo/msteams-message-cards","last_synced_at":"2025-03-14T15:27:06.097Z","repository":{"id":160850026,"uuid":"633496527","full_name":"simbo/msteams-message-cards","owner":"simbo","description":"A javascript library that creates message cards for MS Teams and sends them to a webhook (aka \"connector\").","archived":false,"fork":false,"pushed_at":"2023-05-05T12:04:46.000Z","size":140,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-24T07:52:43.133Z","etag":null,"topics":["cards","message","message-cards","msteams","notifications","teams"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simbo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-27T16:15:36.000Z","updated_at":"2023-11-13T00:55:46.000Z","dependencies_parsed_at":"2023-07-06T14:00:08.012Z","dependency_job_id":null,"html_url":"https://github.com/simbo/msteams-message-cards","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbo%2Fmsteams-message-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbo%2Fmsteams-message-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbo%2Fmsteams-message-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simbo%2Fmsteams-message-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simbo","download_url":"https://codeload.github.com/simbo/msteams-message-cards/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243599771,"owners_count":20317156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cards","message","message-cards","msteams","notifications","teams"],"created_at":"2024-11-20T12:19:00.939Z","updated_at":"2025-03-14T15:27:06.073Z","avatar_url":"https://github.com/simbo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MS Teams Message Cards\n\n[![npm Package Version](https://img.shields.io/npm/v/msteams-message-cards?)](https://www.npmjs.com/package/msteams-message-cards)\n[![License MIT](https://img.shields.io/badge/license-MIT-4cc552)](http://simbo.mit-license.org/)\n[![GitHub Repo](https://img.shields.io/badge/repo-public-87ceeb)](https://github.com/simbo/msteams-message-cards)\n![Native Typescript Support](https://img.shields.io/npm/types/msteams-message-cards)\n[![Coveralls Coverage](https://img.shields.io/coveralls/github/simbo/msteams-message-cards)](https://coveralls.io/github/simbo/msteams-message-cards)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/simbo/msteams-message-cards/ci.yml?branch=main)](https://github.com/simbo/msteams-message-cards/actions/workflows/ci.yml)\n\nA javascript library that creates message cards for MS Teams and sends them to a\nwebhook (aka \"connector\").\n\nIt uses the\n[legacy actionable message card](https://learn.microsoft.com/en-us/outlook/actionable-messages/message-card-reference)\nformat.\n\nThis library only supports basic features of message cards (just the ones I\nneeded). If you are missing a feature, feel free to create an\n[issue](https://github.com/simbo/msteams-message-cards/issues/new) or a\n[pull request](https://github.com/simbo/msteams-message-cards/compare).\n\nSupported Message Card Features:\n\n- `title`\n- `text`\n- `summary`\n- `themeColor` (can be set via a color name using\n  [`color-name-to-code`](https://www.npmjs.com/package/color-name-to-code))\n- `potentialAction` (URL buttons only)\n- `sections`, containing:\n  - `text`\n  - `activityTitle`\n  - `activitySubtitle`\n  - `activityText`\n  - `activityImage`\n  - `potentialAction` (URL buttons only)\n  - `facts`\n\n---\n\n## Installation\n\nThis library is published to npm registry as\n[`msteams-message-cards`](https://www.npmjs.com/package/msteams-message-cards).\n\nYou can install it:\n\n```sh\n# with npm\nnpm install --save msteams-message-cards\n\n# with yarn\nyarn add msteams-message-cards\n```\n\nℹ️ **HINT**: This library is a pure ESM package. (You may want to\n[read this](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).)\n\n## Usage Examples\n\n```js\nimport {\n  createMessageCardPayload,\n  sendMessageCard\n} from 'msteams-message-cards';\n\nconst webhookURL = 'https://my-teams.com/webhook/123/';\n\n// most simple usage\ntry {\n  await sendMessageCard({\n    webhookURL,\n    text: 'Hello World!'\n  });\n} catch (error) {\n  console.error(error);\n}\n\n// create and log payload before sending\ntry {\n  const payload = createMessageCardPayload({ text: 'Hello World!' });\n  console.log(`Message Payload:\\n${JSON.stringify(payload, null, 2)}`);\n  await sendMessageCard({ webhookURL, payload });\n} catch (error) {\n  console.error(error);\n}\n\n// using some more features\ntry {\n  await sendMessageCard({\n    webhookURL,\n    title: 'This is great!',\n    text: \"And here's my awesome message.\",\n    summary: 'Awesome summary!',\n    color: 'dodger blue',\n    buttons: [{ label: 'More Awesomeness', url: 'https://awesome.com/' }],\n    sections: [\n      {\n        facts: [\n          { name: '1', value: 'Foo' },\n          { name: '2', value: 'Bar' },\n          { name: '3', value: 'Baz' }\n        ]\n      }\n    ]\n  });\n} catch (error) {\n  console.error(error);\n}\n```\n\n## API\n\n### `sendMessageCard`\n\n```ts\nasync function sendMessageCard(options: Options): Promise\u003cvoid\u003e;\n```\n\n#### Options\n\n```ts\ntype Options = {\n  webhookURL: string;\n  payload?: Payload;\n} \u0026 PayloadOptions;\n```\n\n- `webhookURL: string` (required)  \n  …defines the webhook URL for the MS Teams connector.\n\n- `payload?: Payload` (optional)  \n  …defines the fully formatted payload to send.  \n  Only required if there are no additional [payload options](#payload-options)\n  present from which a payload could be generated.\n\nThe options for `sendMessageCard` can also include all\n[payload options](#payload-options).\n\n### `createMessageCardPayload`\n\n```ts\nfunction createMessageCardPayload(options: PayloadOptions): Payload;\n```\n\n#### Payload Options\n\n```ts\ninterface PayloadOptions {\n  summary?: string;\n  title?: string;\n  text?: string;\n  color?: string;\n  buttons?: Button[];\n  sections?: Section[];\n}\n\ntype Button = { label: string; url: string } | [string, string];\n\ninterface Section {\n  text?: string;\n  buttons?: Button[];\n  facts?: Fact[];\n  activity?: Activity;\n}\n\ntype Fact = { name: string; value: string } | [string, string];\n\ninterface Activity {\n  title?: string;\n  subtitle?: string;\n  text?: string;\n  image?: string;\n}\n```\n\nFor a valid minimum payload, at least `text` or `summary` needs to be present.\n\nSee also the\n[official documentation for legacy actionable message cards](https://learn.microsoft.com/en-us/outlook/actionable-messages/message-card-reference)\nfor more details about the different message card options.\n\n- `summary?: string`  \n  …defines the message card summary. This is should be a one-liner and it used\n  in Outlook notifications.\n\n- `title?: string`  \n  …defines the message card title.\n\n- `text?: string`  \n  …defines the message card text. It can contain basic HTML and CSS.\n\n- `color?: string`  \n  …defines the message card theme color. Should be either a color hex code or a\n  color name that can be interpreted by\n  [`color-name-to-code`](https://www.npmjs.com/package/color-name-to-code).\n\n- `buttons?: Button[]`  \n  …defines the message card buttons. It should be an array of either objects\n  containing `label:string` and `url:string` or arrays where the first element\n  is used as label and the second as URL.\n\n- `sections?: Section[]`  \n  …defines one or more message card sections with multiple optional features, of\n  which at least one needs to be present:\n\n  - `text?: string`  \n    …defines the section text.\n\n  - `buttons?: string`  \n    …defines the section buttons. It should be an array of either objects\n    containing `label:string` and `url:string` or arrays where the first element\n    is used as label and the second as URL.\n\n  - `facts?: string`  \n    …defines the facts table of a section. It should be an array of either\n    objects containing `name:string` and `value:string` or arrays where the\n    first element it used as name and the second as value.\n\n  - `activity?: Activity`  \n    …defines an activity section which is suitable to represent and article or\n    post. It's defined using an object with the following properties:\n\n    - `title?: string`  \n      …defines the title for the activity.\n\n    - `subtitle?: string`  \n      …defines the subtitle for the activity.\n\n    - `text?: string`  \n      …defines the text for the activity.\n\n    - `image?: string`  \n      …defines the image for the activity.\n\n## License\n\n[MIT \u0026copy; Simon Lepel](http://simbo.mit-license.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimbo%2Fmsteams-message-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimbo%2Fmsteams-message-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimbo%2Fmsteams-message-cards/lists"}