Skip to content

app-icon-badging-for-your-app.md

Latest commit

 

History

History
122 lines (86 loc) · 5.4 KB

app-icon-badging-for-your-app.md

File metadata and controls

122 lines (86 loc) · 5.4 KB
title App Icon Badges for Meetings
description Learn how to enable app icon badging for your Microsoft Teams app in meeting, app manifest setting, and its code samples to enable app icon badging (Node.js, .NET).
ms.topic conceptual
ms.localizationpriority medium
ms.owner vichug
ms.date 01/23/2025

Enable app icon badging for your Teams app

App icon badging helps a meeting participant identify any app activity during a meeting. Participants get activity notification for the meeting apps.

When there's a new activity during the meeting, the app calls the targetedMeetingNotification API and displays a red badge on the app icon in the meeting unified bar (U-bar). When the participant selects the app icon, the app opens in the meeting side panel, and the badge goes away.

For example, during a real time collaboration in a meeting, if a participant adds a comment in a file added to the meeting, the app calls the targetedMeetingNotification API from the participant's meeting side panel. The API triggers a badge on the app icon to make other participants aware of the comment activity.

The following image shows you the app icon badging in the meeting U-bar:

:::image type="content" source="../assets/images/app-icon-badging.png" alt-text="Screenshot shows you the app icon badging in U-bar in teams meeting."lightbox="../assets/images/app-icon-badging.png":::

Note

To enable app icon badging, follow these steps:

  1. Enable app manifest settings for app icon badging
  2. Enable app icon badging for your app

Enable app manifest settings for app icon badging

To enable app icon badging, you must:

  • Ensure that you've configured meetingSidePanel as a context property for your app.
  • Configure the authorization property and the name and type properties under the resourceSpecific field in the app manifest as follows:
"webApplicationInfo": {
    "id": "<<MICROSOFT-APP-ID>>",
    "resource": "https://RscBasedStoreApp"  },
  "authorization": {
    "permissions": {
      "resourceSpecific": [
        {
          "name": "OnlineMeetingNotification.Send.Chat",
          "type": "Application"        }
      ]
    }
  }

Enable app icon badging for your app

To enable app icon badging, ensure that you've enabled targeted in-meeting notification.

The Targeted meeting notification and app icon badging API is extended to support the app icon badging capability on the app icon and pass the user MRI IDs of the intended recipients. The surfaces parameter now supports meetingTabIcon value, which is used by the app.

App can also pass the tabEntityId, if there are multiple instances of the app added to the same meeting. If the tabEntityId isn't passed, then Teams displays the badge on the first app icon on the users meeting window.

Example

C#

Sample code reference

TeamsInfo.SendMeetingNotificationAsync(context, notificationPayload, meetingId);

JavaScript

Sample code reference

TeamsInfo.sendMeetingNotification(context, notificationPayload, meetingId);

JSON

{
    "type": "targetedMeetingNotification",
    "value": {
        "recipients": [
            "<participant1 MRI>",
            "<participant2 MRI>" 
        ],
        "surfaces": [
            {
                "surface": "meetingTabIcon",
                "tabEntityId": "<tab id from tab sdk>" // optional           
            }
        ]
    }
}

[!INCLUDE Response code]

Limitations

  • App icon badging displays only one notification for a user in a minute per meeting.

  • App icon badging is displayed to a maximum of first 50 participants for a particular meeting.

Code sample

|Sample name | Description | Node.js | .NET | |----------------|-----------------|--------------| | App icon badging for your Teams app | This sample app showcases how to implement app icon badging for notifications in Teams meetings. | View | View |

See also