diff --git a/docs/images/outlook-classic-win-create-meeting.png b/docs/images/outlook-classic-win-create-meeting.png new file mode 100644 index 000000000..11c5f798c Binary files /dev/null and b/docs/images/outlook-classic-win-create-meeting.png differ diff --git a/docs/images/outlook-classic-win-join-meeting.png b/docs/images/outlook-classic-win-join-meeting.png new file mode 100644 index 000000000..449257df2 Binary files /dev/null and b/docs/images/outlook-classic-win-join-meeting.png differ diff --git a/docs/images/outlook-mac-create-meeting.png b/docs/images/outlook-mac-create-meeting.png new file mode 100644 index 000000000..c5373f3de Binary files /dev/null and b/docs/images/outlook-mac-create-meeting.png differ diff --git a/docs/images/outlook-mac-join-meeting.png b/docs/images/outlook-mac-join-meeting.png new file mode 100644 index 000000000..6752c086f Binary files /dev/null and b/docs/images/outlook-mac-join-meeting.png differ diff --git a/docs/images/outlook-web-new-windows-create-meeting.png b/docs/images/outlook-web-new-windows-create-meeting.png new file mode 100644 index 000000000..013673897 Binary files /dev/null and b/docs/images/outlook-web-new-windows-create-meeting.png differ diff --git a/docs/images/outlook-web-new-windows-join-meeting.png b/docs/images/outlook-web-new-windows-join-meeting.png new file mode 100644 index 000000000..f72078483 Binary files /dev/null and b/docs/images/outlook-web-new-windows-join-meeting.png differ diff --git a/docs/outlook/online-meeting.md b/docs/outlook/online-meeting.md index 526947187..2cf9ded04 100644 --- a/docs/outlook/online-meeting.md +++ b/docs/outlook/online-meeting.md @@ -1,7 +1,7 @@ --- title: Create an Outlook add-in for an online-meeting provider description: Discusses how to set up an Outlook add-in for an online-meeting service provider. -ms.date: 11/18/2025 +ms.date: 01/06/2026 ms.topic: how-to ms.localizationpriority: medium --- @@ -38,14 +38,6 @@ The steps for configuring the manifest depend on which type of manifest you sele } ``` -1. In the [`"validDomains"`](/microsoft-365/extensibility/schema/root#validdomains) array, change the URL to `"https://contoso.com"`, which is the URL of the fictional online meeting provider. The array should look like this when you're done. - - ```json - "validDomains": [ - "https://contoso.com" - ], - ``` - 1. Add the following object to the [`"extensions.runtimes"`](/microsoft-365/extensibility/schema/extension-runtimes-array?view=m365-app-prev&preserve-view=true) array. Note the following about this code. - The `"minVersion"` of the Mailbox requirement set is set to `"1.3"` so the runtime won't launch on platforms and Office versions where this feature isn't supported. @@ -70,7 +62,7 @@ The steps for configuring the manifest depend on which type of manifest you sele "id": "online_meeting_runtime", "type": "general", "code": { - "page": "https://contoso.com/commands.html" + "page": "https://localhost:3000/commands.html" }, "lifetime": "short", "actions": [ @@ -200,47 +192,47 @@ The steps for configuring the manifest depend on which type of manifest you sele { "scale": 1, "size": 25, - "url": "https://contoso.com/assets/icon-25.png" + "url": "https://localhost:3000/assets/icon-25.png" }, { "scale": 1, "size": 32, - "url": "https://contoso.com/assets/icon-32.png" + "url": "https://localhost:3000/assets/icon-32.png" }, { "scale": 1, "size": 48, - "url": "https://contoso.com/assets/icon-48.png" + "url": "https://localhost:3000/assets/icon-48.png" }, { "scale": 2, "size": 25, - "url": "https://contoso.com/assets/icon-25.png" + "url": "https://localhost:3000/assets/icon-25.png" }, { "scale": 2, "size": 32, - "url": "https://contoso.com/assets/icon-32.png" + "url": "https://localhost:3000/assets/icon-32.png" }, { "scale": 2, "size": 48, - "url": "https://contoso.com/assets/icon-48.png" + "url": "https://localhost:3000/assets/icon-48.png" }, { "scale": 3, "size": 25, - "url": "https://contoso.com/assets/icon-25.png" + "url": "https://localhost:3000/assets/icon-25.png" }, { "scale": 3, "size": 32, - "url": "https://contoso.com/assets/icon-32.png" + "url": "https://localhost:3000/assets/icon-32.png" }, { "scale": 3, "size": 48, - "url": "https://contoso.com/assets/icon-48.png" + "url": "https://localhost:3000/assets/icon-48.png" } ] } @@ -300,21 +292,21 @@ The steps for configuring the manifest depend on which type of manifest you sele - - - - - + + + + + - + - + @@ -372,7 +364,7 @@ In this section, learn how your add-in script can update a user's meeting to inc 1. Replace the entire content of the **commands.js** file with the following JavaScript. ```js - // 1. How to construct online meeting details. + // 1. Construct online meeting details. // Not shown: How to get the meeting organizer's ID and other details from your service. const newBody = '
' + 'Join Contoso meeting' + @@ -388,13 +380,12 @@ In this section, learn how your add-in script can update a user's meeting to inc let mailboxItem; - // Office is ready. Office.onReady(function () { mailboxItem = Office.context.mailbox.item; } ); - // 2. How to define and register a function command named `insertContosoMeeting` (referenced in the manifest) + // 2. Define and register a function command named `insertContosoMeeting` (referenced in the manifest) // to update the meeting body with the online meeting details. function insertContosoMeeting(event) { // Get HTML body from the client. @@ -413,7 +404,7 @@ In this section, learn how your add-in script can update a user's meeting to inc // Register the function. Office.actions.associate("insertContosoMeeting", insertContosoMeeting); - // 3. How to implement a supporting function `updateBody` + // 3. Implement a supporting function `updateBody` // that appends the online meeting details to the current body of the meeting. function updateBody(event, existingBody) { // Append new body to the existing body. @@ -433,31 +424,65 @@ In this section, learn how your add-in script can update a user's meeting to inc ## Test and validate your add-in -Follow the usual guidance to [test and validate your add-in](testing-and-tips.md), then [sideload](sideload-outlook-add-ins-for-testing.md) the manifest in Outlook on the web, on Windows (new or classic), or on Mac. If your add-in also supports mobile, restart Outlook on your Android or iOS device after sideloading. Once the add-in is sideloaded, create a new meeting and verify that the Microsoft Teams or Skype toggle is replaced with your own. +To test and validate your add-in, [sideload the manifest](sideload-outlook-add-ins-for-testing.md) in Outlook on the web or on Windows (new or classic). If you're using the add-in only manifest, you can also sideload on Mac. For an add-in that supports mobile, restart Outlook on your Android or iOS device after sideloading. Once the add-in is sideloaded, create a new meeting and verify that the Microsoft Teams or Skype toggle is replaced with your own. + +> [!NOTE] +> Add-ins that use the unified manifest can't be sideloaded in Outlook on Mac or on mobile devices. To run this type of add-in, the add-in must first be published to [Microsoft Marketplace](https://marketplace.microsoft.com/) then deployed in the [Microsoft 365 Admin Center](../publish/publish.md). For more information, see the "Client and platform support" section of [Office Add-ins with the unified app manifest for Microsoft 365](../develop/unified-manifest-overview.md#client-and-platform-support). ### Create meeting UI -As a meeting organizer, you should see screens similar to the following three images when you create a meeting. +The meeting organizer's UI varies depending on the Outlook client. + +#### Outlook on the web and the new Outlook on Windows + +:::image type="content" source="../images/outlook-web-new-windows-create-meeting.png" alt-text="The create-meeting screen in Outlook on the web and the new Outlook on Windows."::: + +#### Classic Outlook on Windows + +:::image type="content" source="../images/outlook-classic-win-create-meeting.png" alt-text="The create-meeting screen in classic Outlook on Windows."::: + +#### Outlook on Mac + +:::image type="content" source="../images/outlook-mac-create-meeting.png" alt-text="The create-meeting screen in Outlook on Mac."::: + +#### Outlook on mobile devices -[:::image type="content" source="../images/outlook-android-create-online-meeting-off.png" alt-text="The create meeting screen on Android with the Contoso toggle off.":::](../images/outlook-android-create-online-meeting-off-expanded.png#lightbox) [:::image type="content" source="../images/outlook-android-create-online-meeting-load.png" alt-text="The create meeting screen on Android with a loading Contoso toggle.":::](../images/outlook-android-create-online-meeting-load-expanded.png#lightbox) [:::image type="content" source="../images/outlook-android-create-online-meeting-on.png" alt-text="The create meeting screen on Android with the Contoso toggle on.":::](../images/outlook-android-create-online-meeting-on-expanded.png#lightbox) +[:::image type="content" source="../images/outlook-android-create-online-meeting-off.png" alt-text="The create-meeting screen in Outlook on Android with the Contoso toggle off.":::](../images/outlook-android-create-online-meeting-off-expanded.png#lightbox) [:::image type="content" source="../images/outlook-android-create-online-meeting-load.png" alt-text="The create-meeting screen in Outlook on Android with a loading Contoso toggle.":::](../images/outlook-android-create-online-meeting-load-expanded.png#lightbox) [:::image type="content" source="../images/outlook-android-create-online-meeting-on.png" alt-text="The create-meeting screen in Outlook on Android with the Contoso toggle on.":::](../images/outlook-android-create-online-meeting-on-expanded.png#lightbox) ### Join meeting UI -As a meeting attendee, you should see a screen similar to the following image when you view the meeting. +The meeting attendee's UI varies depending on the Outlook client. -[:::image type="content" source="../images/outlook-android-join-online-meeting-view-1.png" alt-text="The join meeting screen on Android.":::](../images/outlook-android-join-online-meeting-view-1-expanded.png#lightbox) +#### Outlook on the web and the new Outlook on Windows -> [!IMPORTANT] -> The **Join** button is only supported in Outlook on the web, on Mac, on Android, on iOS, and in new Outlook on Windows. If you only see a meeting link, but don't see the **Join** button in a supported client, it may be that the online-meeting template for your service isn't registered on our servers. See the [Register your online-meeting template](#register-your-online-meeting-template) section for details. +:::image type="content" source="../images/outlook-web-new-windows-join-meeting.png" alt-text="The join-meeting screen in Outlook on the web and the new Outlook on Windows."::: -## Register your online-meeting template +#### Classic Outlook on Windows -Registering your online-meeting add-in is optional. It only applies if you want to surface the **Join** button in meetings, in addition to the meeting link. Once you've published your online-meeting add-in and would like to register it, create a GitHub issue using the following guidance. We'll contact you to coordinate a registration timeline. +:::image type="content" source="../images/outlook-classic-win-join-meeting.png" alt-text="The join-meeting screen in classic Outlook on Windows."::: -> [!IMPORTANT] -> -> - The **Join** button is only supported in Outlook on the web, on Mac, on Android, on iOS, and in new Outlook on Windows. -> - Only online-meeting add-ins published to Microsoft Marketplace can be registered. Line-of-business add-ins aren't supported. +#### Outlook on Mac + +:::image type="content" source="../images/outlook-mac-join-meeting.png" alt-text="The join-meeting screen in Outlook on Mac."::: + +#### Outlook on mobile devices + +[:::image type="content" source="../images/outlook-android-join-online-meeting-view-1.png" alt-text="The join-meeting screen in Outlook on Android.":::](../images/outlook-android-join-online-meeting-view-1-expanded.png#lightbox) + +> [!NOTE] +> Your online-meeting add-in must meet certain requirements to include the **Join** button in Outlook on the web, on Mac, on Android, on iOS, and in the new Outlook on Windows. For more information, see [Implement the Join button](#implement-the-join-button). + +## Implement the Join button + +The **Join** button only appears in meetings if: + +- The online-meeting add-in is published to Microsoft Marketplace. Line-of-business add-ins aren't supported. +- The add-in is registered. +- The registered add-in is running in Outlook on the web, on Mac, on Android, on iOS, and in the new Outlook on Windows. + +### Register your online-meeting template + +To register your online-meeting add-in, once you've published your add-in to Microsoft Marketplace, create a GitHub issue using the following guidance. We'll contact you to coordinate a registration timeline. 1. Create a [new GitHub issue](https://github.com/OfficeDev/office-js/issues/new). 1. Set the **Title** of the new issue to "Outlook: Register the online-meeting template for my-service", replacing `my-service` with your service name. @@ -475,6 +500,7 @@ After a meeting ends, the organizer and attendees often need access to important This section outlines how to use the Microsoft Graph API to update a calendar item with post-meeting resources. The updated content of a meeting will be reflected in the calendars of the organizer and the attendees. Additionally, an update will be sent to the attendees. This implementation requires the following: + - An access token to make Microsoft Graph API calls. For guidance, see [Use the Microsoft Graph REST API from an Outlook add-in](microsoft-graph.md). - An indicator to your add-in when a meeting scheduled with your online-meeting add-in has ended. - Access to a meeting's Exchange ID and the ID assigned by the add-in. @@ -560,3 +586,4 @@ Several restrictions apply. - [Add-ins for Outlook on mobile devices](outlook-mobile-addins.md) - [Add support for add-in commands in Outlook on mobile devices](add-mobile-support.md) - [Working with calendars and events using the Microsoft Graph API](/graph/api/resources/calendar-overview) +- [Make every meeting online](https://support.microsoft.com/office/70f9bda0-fd29-498b-9757-6709cc1c73f0)