Merge pull request #255760 from jamescadd/main

Adds Calling reactions page

Author: AnnaMHuff

articles/communication-services/how-tos/calling-sdk/includes/manage-calls/manage-calls-web.md

@@ -371,58 +371,4 @@ Check is screen sharing is on. It returns `Boolean`.
 
 ```js
 const isScreenSharingOn = call.isScreenSharingOn;
-```
-## Send or receive a reaction from other participants
-> [!NOTE]
-> This API is provided as a preview for developers and may change based on feedback that we receive. To use this api please use 'beta' release of Azure Communication Services Calling Web SDK version 1.18.1 or higher
-
-Within ACS you can send and receive reactions when on a group call:
-- Like :+1:
-- Love :heart:
-- Applause :clap:
-- Laugh :smile:
-- Surprise :open_mouth:
-
-To send a reaction you'll use the `sendReaction(reactionMessage)` API. To receive a reaction message will be built with Type `ReactionMessage` which uses `Reaction` enums as an attribute. 
-
-You'll need to subscribe for events which provide the subscriber event data as:
-```javascript
-export interface ReactionEventPayload {
-    /**
-     * identifier for a participant
-     */
-    identifier: CommunicationUserIdentifier | MicrosoftTeamsUserIdentifier;
-    /**
-     * reaction type received
-     */
-    reactionMessage: ReactionMessage;
-}
-```
-
-You can determine which reaction is coming from which participant with `identifier` attribute and gets the reaction type from `ReactionMessage`. 
-
-### Sample on how to send a reaction in a meeting
-```javascript
-const reaction = call.feature(SDK.Features.Reaction);
-const reactionMessage: SDK.ReactionMessage = {
-       reactionType: 'like'
-};
-await reaction.sendReaction(reactionMessage);
-```
-
-### Sample on how to receive a reaction in a meeting
-```javascript
-const reaction = call.feature(SDK.Features.Reaction);
-reaction.on('reaction', event => {
-    // user identifier
-    console.log("User Mri - " + event.identifier);
-    // received reaction
-    console.log("User Mri - " + event.reactionMessage.reactionType);
-    // reaction message
-    console.log("reaction message - " + JSON.stringify(event.reactionMessage));
-}
-```
-
-### Key things to note about using Reactions:
-- For teams interoperability scenarios, the functionality of the feature depends on the meeting poilicy for the reaction capability.
-- On direct 1:1 calls between a CTE user and a teams user, the reaction functionality is disabled.
+```

articles/communication-services/how-tos/calling-sdk/includes/reactions/media/reaction-applause.png

@@ -0,0 +1,66 @@
+---
+author: jamescadd
+ms.service: azure-communication-services
+ms.topic: include
+ms.date: 10/20/2023
+ms.author: jacadd
+---
+[!INCLUDE [Install SDK](../install-sdk/install-sdk-web.md)]
+
+## Send or receive a reaction from other participants
+> [!NOTE]
+> This API is provided as a preview for developers and may change based on feedback that we receive. To use this api please use 'beta' release of Azure Communication Services Calling Web SDK version 1.18.1 or higher
+
+Within ACS you can send and receive reactions when on a group call:
+- Like :::image type="icon" source="media/reaction-like.png":::
+- Love :::image type="icon" source="media/reaction-love.png":::
+- Applause :::image type="icon" source="media/reaction-applause.png":::
+- Laugh :::image type="icon" source="media/reaction-laugh.png":::
+- Surprise :::image type="icon" source="media/reaction-surprise.png":::
+
+To send a reaction, use the `sendReaction(reactionMessage)` API. To receive a reaction, the message will be built with Type `ReactionMessage` that uses `Reaction` enums as an attribute. 
+
+You need to subscribe for events that provide the subscriber event data:
+```javascript
+export interface ReactionEventPayload {
+    /**
+     * identifier for a participant
+     */
+    identifier: CommunicationUserIdentifier | MicrosoftTeamsUserIdentifier;
+    /**
+     * reaction type received
+     */
+    reactionMessage: ReactionMessage;
+}
+```
+
+You can determine which reaction is coming from which participant with `identifier` attribute and gets the reaction type from `ReactionMessage`. 
+
+### Sample on how to send a reaction in a meeting
+```javascript
+const reaction = call.feature(SDK.Features.Reaction);
+const reactionMessage: SDK.ReactionMessage = {
+       reactionType: 'like'
+};
+await reaction.sendReaction(reactionMessage);
+```
+
+### Sample on how to receive a reaction in a meeting
+```javascript
+const reaction = call.feature(SDK.Features.Reaction);
+reaction.on('reaction', event => {
+    // user identifier
+    console.log("User Mri - " + event.identifier);
+    // received reaction
+    console.log("User Mri - " + event.reactionMessage.reactionType);
+    // reaction message
+    console.log("reaction message - " + JSON.stringify(event.reactionMessage));
+}
+```
+
+### Key things to note about using Reactions:
+- For Microsoft Teams interoperability scenarios, the functionality of the feature depends on the meeting policy for the reaction capability.
+- Reactions are supported in the Web Calling SDK.
+- Reactions are not currently supported in the Native SDKs.
+- Reactions are supported for Microsoft Teams Meeting interoperability, Azure Communication Services Rooms, and Group Calls.
+- Reactions are not supported for 1:1 calls.

articles/communication-services/how-tos/calling-sdk/includes/reactions/media/reaction-laugh.png

@@ -0,0 +1,31 @@
+---
+title: Reactions
+titleSuffix: An Azure Communication Services how-to guide
+description: Use Azure Communication Services SDKs to send and receive reactions.
+author: jamescadd
+manager: chpalm
+ms.author: jacadd
+ms.service: azure-communication-services
+ms.subservice: calling
+ms.topic: how-to 
+ms.date: 10/20/2023
+ms.custom: template-how-to
+---
+
+# Reactions
+In this article, you learn how to implement the reactions capability with Azure Communication Services Calling SDKs. This capability allows users in a group call or meeting to send and receive reactions with participants in Azure Communication Services and Microsoft Teams. Reactions for users in Microsoft Teams are controlled by the configuration and policy settings in Teams. Additional information is available in [Manage reactions in Teams meetings and webinars](/microsoftteams/manage-reactions-meetings) and [Meeting options in Microsoft Teams](https://support.microsoft.com/en-us/office/meeting-options-in-microsoft-teams-53261366-dbd5-45f9-aae9-a70e6354f88e)
+
+[!INCLUDE [Public Preview Disclaimer](../../includes/public-preview-include-document.md)]
+
+## Prerequisites
+
+- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F). 
+- A deployed Communication Services resource. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
+- A user access token to enable the calling client. For more information, see [Create and manage access tokens](../../quickstarts/identity/access-tokens.md).
+- Optional: Complete the quickstart to [add voice calling to your application](../../quickstarts/voice-video-calling/getting-started-with-calling.md)
+
+[!INCLUDE [Spotlight Client-side JavaScript](./includes/reactions/reactions-web.md)]
+
+## Next steps
+- [Learn how to manage calls](./manage-calls.md)
+- [Learn how to manage video](./manage-video.md)

articles/communication-services/how-tos/calling-sdk/includes/reactions/media/reaction-like.png

@@ -308,6 +308,8 @@ items:
         href: how-tos/calling-sdk/record-calls.md
       - name: Raise Hand
         href: how-tos/calling-sdk/raise-hand.md
+      - name: Reactions
+        href: how-tos/calling-sdk/reactions.md
       - name: Spotlight
         href: how-tos/calling-sdk/spotlight.md
       - name: Show transcription state