Merge pull request #1376 from OfficeDev/v-mfurquan/share-to-teams-web…

…-app

Share To Teams Web Apps - Present now button feature

samples/tab-deeplink/nodejs/README.md

@@ -78,6 +78,12 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
     ```
   - Update the `.env` configuration for the bot to use the `YOUR-MICROSOFT-APP-ID`, `YOUR-MICROSOFT-APP-PASSWORD` and `BASE-URL` is tunnel url eg. 124.ngrok-free.app. (Note the MicrosoftAppId is the AppId created in step 1 (Setup for Bot), the MicrosoftAppPassword is referred to as the "client secret" in step 1 (Setup for Bot) and you can always create a new client secret anytime.)
 
+  - navigate to `Deeplink.html` page at line number `58` Update the `data-app-id` attribute with your application id.
+
+    ```bash
+    data-app-id="{{Your-App-Id}}"
+    ```
+
     - In a terminal, navigate to `samples/tab-deeplink/nodejs`
 
         ```bash
@@ -150,42 +156,52 @@ Enter text in the emulator.  The text will be echoed back by the bot.
 
 `@mention` bot in meeting chat to get an adaptive card.
 
-![Bot-Adaptive-Card](DeepLinkBot/images/BotAdaptiveCard.png)
+![Bot-Adaptive-Card](Images/BotAdaptiveCard.png)
 
 Click on `Side Panel Deeplink` which will redirect to the meeting side panel.
 **Note:** When the deeplink is opened outside meeting, it will redirect to meeting details tab.
-![Meeting-Sidepanel](DeepLinkBot/images/Sidepanel.PNG)
+![Meeting-Sidepanel](Images/Sidepanel.PNG)
 
 
 **Tab interaction:**
    
 **Deeplink to Audio Call:**
 
-![Audio-Deeplink](images/AudioCall.png)
+![Audio-Deeplink](Images/AudioCall.png)
 
 **Deeplink to Video Call:**
    
-![Video-Deeplink](images/VideoCall.png)
+![Video-Deeplink](Images/VideoCall.png)
 
 **Deeplink to Meeting schedule:**
    
-![Meeting-Schedule](images/MeetingSchedule.png)
+![Meeting-Schedule](Images/MeetingSchedule.png)
 
 **Deeplink to Polly app install dialog:**
    
-![App-Install-Dialog](images/AppInstall.png)
+![App-Install-Dialog](Images/AppInstall.png)
 
 **Deeplink to start new chat:**
    
-![Start-New-Chat](images/StartChatDeeplink.png)
+![Start-New-Chat](Images/StartChatDeeplink.png)
 
-![New-Chat](images/StartNewChat.png)
+![New-Chat](Images/StartNewChat.png)
 
 **Deeplink to channel conversation:**
    
-![Show-Channel-Conversation ](images/GroupChatDeeplink.png)
+![Show-Channel-Conversation ](Images/GroupChatDeeplink.png)
+   
+![channel-Conversation](Images/GroupChat.png)
+
+**Share To Teams Web Apps:**
+
+![Teams Button](Images/ShareToTeamWebApps.png)
+
+![Present Now Feature](Images/PresentNow_Button.png)
    
-![channel-Conversation](images/GroupChat.png)
+![OpensInNewBrowser](Images/ShareToTeams_UseWebApp.png)
+
+![SharedFromWebApp](Images/ShareToTeams_LinkSharedFromWebApp.png)
 
 ## Outlook on the web
 
@@ -223,6 +239,8 @@ Click on `Side Panel Deeplink` which will redirect to the meeting side panel.
 
 - [Extend Teams apps across Microsoft 365](https://learn.microsoft.com/en-us/microsoftteams/platform/m365-apps/overview)
 
+- [Share to teams web apps](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/share-to-teams-from-web-apps?branch=pr-en-us-10824&tabs=method1)
+
 
 
 <img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/tab-deeplink-nodejs" />

samples/tab-deeplink/nodejs/pages/DeepLink.html

@@ -6,6 +6,7 @@
         integrity="sha384-/DJ9oJEFZSpGiUQx9Na5Yb5svOPPqSb3khKxJ/YgoZ2GtrkzWgSTBpESy3LvMPVk"
         crossorigin="anonymous"></script>
     <script src="DeepLinkModel.js"></script>
+    <script async defer src="https://teams.microsoft.com/share/launcher.js"></script>
     <script type="text/javascript">
         microsoftTeams.app.initialize().then(() => {
             microsoftTeams.app.getContext().then((context) => {
@@ -47,6 +48,16 @@
     <div id="taskContent"
         style="margin-top:-23px;margin-left:80px;color:Highlight;font-family:'Segoe UI';font-size:15px"></div>
     <div id="list-content" style="margin-top:3rem"></div>
+    <div class="surface">
+        <div class="panel">
+            <h3>Share to Teams using a web page</h3>
+            <p>Click below Teams button to open popup</p>
+            <span class="teams-share-button"
+                data-href="https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/share-to-teams-from-web-apps?branch=pr-en-us-10824&tabs=method1#embed-a-share-to-teams-button"
+                data-msg-text="Test Message" data-icon-px-size="64" data-allow-share-in-meeting="true"
+                data-app-id="{{Your-App-Id}}" data-preview="true"></span>
+        </div>
+    </div>
     <div style="margin-top:1rem;">
         <span class="container" style="font-size:20px;font-weight:700;">
             Extended Deep link features

samples/tab-deeplink/nodejs/pages/ExtendedDeepLink.html

@@ -3,7 +3,7 @@
     integrity="sha384-/DJ9oJEFZSpGiUQx9Na5Yb5svOPPqSb3khKxJ/YgoZ2GtrkzWgSTBpESy3LvMPVk"
     crossorigin="anonymous"></script>
 <script src="env.js"></script>
-<script src="DeepLinkFeatures.js"></script>ss
+<script src="DeepLinkFeatures.js"></script>
 <link rel="stylesheet" href="/style.css" />
 
 <div>