|
| 1 | +--- |
| 2 | +title: Embed a PowerApps app in Teams | Microsoft Docs |
| 3 | +description: You can embed an app created in PowerApps in Microsoft Teams to share it. |
| 4 | +author: jimholtz |
| 5 | +manager: kvivek |
| 6 | +ms.service: powerapps |
| 7 | +ms.topic: conceptual |
| 8 | +ms.custom: canvas |
| 9 | +ms.reviewer: |
| 10 | +ms.date: 05/29/2019 |
| 11 | +ms.author: jimholtz |
| 12 | +search.audienceType: |
| 13 | + - maker |
| 14 | +search.app: |
| 15 | + - PowerApps |
| 16 | +--- |
| 17 | +# Embed a PowerApps app in Teams |
| 18 | + |
| 19 | +You can share a PowerApps you've created by embedding it directly into Microsoft Teams. When completed, users can select **+** to add your app to any of **your** team channels or conversations in the team you are in. The app appears as a tile under **Tabs for your team**. |
| 20 | + |
| 21 | +An admin can upload the app so it shows up for **all** teams in your tenant under the **All tabs section**. See [Share an app in Microsoft Teams](https://review.docs.microsoft.com/en-us/power-platform/admin/embed-app-teams?branch=JimHoltzWorkBranch). |
| 22 | + |
| 23 | +> [!NOTE] |
| 24 | +> Team custom app policies must be set to allow uploading custom apps. If unable to embed your app in Teams, check with your administrator to see if they've setup [custom app settings](https://docs.microsoft.com/MicrosoftTeams/teams-custom-app-policies-and-settings#custom-app-policy-and-settings). |
| 25 | +
|
| 26 | +## Prerequisites |
| 27 | + |
| 28 | +- [Have a PowerApps license](https://docs.microsoft.com/power-platform/admin/pricing-billing-skus) |
| 29 | +- Created a canvas app |
| 30 | + |
| 31 | +## Locate your PowerApp's GUID |
| 32 | + |
| 33 | +Find and make note of your PowerApp's GUID to use in a later step. |
| 34 | + |
| 35 | +1. Sign in to [https://web.powerapps.com](https://web.powerapps.com), and then select **Apps** in the menu. |
| 36 | + |
| 37 | + > [!div class="mx-imgBorder"] |
| 38 | + >  |
| 39 | +
|
| 40 | +2. Select **More Commands** (...) for the app you want to share in Teams, and then select **Details**. |
| 41 | + |
| 42 | + > [!div class="mx-imgBorder"] |
| 43 | + >  |
| 44 | +
|
| 45 | +3. Record the **App ID** for later use. |
| 46 | + |
| 47 | + > [!div class="mx-imgBorder"] |
| 48 | + >  |
| 49 | +
|
| 50 | +## Install App Studio |
| 51 | + |
| 52 | +You can skip these steps if App Studio is already installed. |
| 53 | + |
| 54 | +1. In Teams, select **Apps** in the lower-left of the Teams menu (). |
| 55 | + |
| 56 | +2. Search for "App Studio" in the search box and then select it. |
| 57 | + |
| 58 | + > [!div class="mx-imgBorder"] |
| 59 | + >  |
| 60 | +
|
| 61 | +3. Select **Install**. |
| 62 | + |
| 63 | + > [!div class="mx-imgBorder"] |
| 64 | + >  |
| 65 | +
|
| 66 | +4. Select **Open** for the App feature. |
| 67 | + |
| 68 | + > [!div class="mx-imgBorder"] |
| 69 | + >  |
| 70 | +
|
| 71 | +## Create a Teams app for your PowerApp |
| 72 | + |
| 73 | +1. In Teams, open App Studio. |
| 74 | + |
| 75 | + > [!div class="mx-imgBorder"] |
| 76 | + >  |
| 77 | +
|
| 78 | +2. Select the **Manifest editor** tab, and then select **Create a new app** under Welcome. |
| 79 | + |
| 80 | + > [!div class="mx-imgBorder"] |
| 81 | + >  |
| 82 | +
|
| 83 | +3. Fill in information about your app in the **App Details** page. For the App ID GUID, you should use your PowerApp's App ID GUID you recorded above. This will avoid duplication of Teams apps for a particular PowerApp. |
| 84 | + |
| 85 | + > [!div class="mx-imgBorder"] |
| 86 | + >  |
| 87 | +
|
| 88 | + |Fields |Description | |
| 89 | + |---------|---------| |
| 90 | + |**App names** | | |
| 91 | + |Short name | Required. The short display name for the app. 30 character limit. | |
| 92 | + |Long name | The full name of the app, used if the full app name exceeds 30 characters. | |
| 93 | + |**Identification** | | |
| 94 | + |App ID | Required. The unique Microsoft-generated identifier for this app. | |
| 95 | + |Package Name | Required. A unique identifier for this app. We recommend using reverse ___domain notation; for example, com.example.<AppName>. | |
| 96 | + |Version | Required. The version of the specific app. If you update something in your manifest, the version must be incremented as well. | |
| 97 | + |**Descriptions** | | |
| 98 | + | Short description | Required. A short description of your app experience, used when space is limited. 80 character limit. | |
| 99 | + | Long description | Required. The full description of your app. | |
| 100 | + | **Developer information** | | |
| 101 | + | Name | Required. The display name for the company or developer. | |
| 102 | + | Website | Required. The https:// URL to the website for your app via powerapps.com. When someone installs your app, an “About your app” page will appear. It should link to the web version of your app on powerapps.com. | |
| 103 | + | **App URLs** | These links will show up in the **About** page along with the website URL. | |
| 104 | + | Privacy statement | Required. The https:// URL to the developer's privacy policy. [Example](https://go.microsoft.com/fwlink/p/?LinkID=698505). | |
| 105 | + | Terms of use | Required. The https:// URL to the developer's terms of use. [Example](https://go.microsoft.com/fwlink/p/?LinkID=698507). | |
| 106 | + | **Branding** | | |
| 107 | + | Full color | A relative file path to a full color 192x192 PNG icon. | |
| 108 | + | Transparent outline |A relative file path to a transparent 32x32 PNG outline icon. | |
| 109 | + | Accent color | A color to use in conjunction with and as a background for your outline icons. | |
| 110 | + |
| 111 | +For more information, see [Manifest Editor](https://docs.microsoft.com/microsoftteams/platform/get-started/get-started-app-studio#manifest-editor) and [Manifest schema](https://docs.microsoft.com/microsoftteams/platform/resources/schema/manifest-schema). |
| 112 | + |
| 113 | +4. Scroll down to the Branding section and add your logos and the accent color desired for your app. These are the logos that will appear for your app in Teams. |
| 114 | + |
| 115 | + > [!div class="mx-imgBorder"] |
| 116 | + >  |
| 117 | +
|
| 118 | +5. Under **Capabilities**, select **Tabs**. |
| 119 | + |
| 120 | +6. Under **Team tab** select **Add**. |
| 121 | + |
| 122 | + > [!div class="mx-imgBorder"] |
| 123 | + >  |
| 124 | +
|
| 125 | +7. Add your app's configuration URL in the "Configuration URL" input field, using the following format: `https://web.powerapps.com/webplayer/teamsapptabsettings?appid=<PowerApp ID>` |
| 126 | + |
| 127 | + Replace `<PowerApp ID>` with the App ID GUID you recorded above. |
| 128 | + |
| 129 | + Select the [scope](https://docs.microsoft.com/microsoftteams/platform/concepts/tabs/tabs-overview#tab-scope) for your app to appear in. Ensure **Can update configuration** is checked, and then select **Save**. |
| 130 | + |
| 131 | + > [!div class="mx-imgBorder"] |
| 132 | + >  |
| 133 | +
|
| 134 | +8. Under **Finish**, select **Valid domains**. Add **apps.powerapps.com** and **apps.preview.powerapps.com** as valid domains for the Teams application. |
| 135 | + |
| 136 | + > [!div class="mx-imgBorder"] |
| 137 | + >  |
| 138 | +
|
| 139 | +9. Under **Finish**, select **Test and distribute**. Under **Install**, select **Install**. |
| 140 | + |
| 141 | + > [!div class="mx-imgBorder"] |
| 142 | + >  |
| 143 | +
|
| 144 | +10. Select the team you want the app installed in, and then select **Install**. |
| 145 | + |
| 146 | + > [!div class="mx-imgBorder"] |
| 147 | + >  |
| 148 | +
|
| 149 | +11. If you want to add an instance of that app to a channel right away, select the channel you wish to use the app in and select **Set up**. |
| 150 | + |
| 151 | + > [!div class="mx-imgBorder"] |
| 152 | + >  |
| 153 | +
|
| 154 | +12. Select **Save**. |
| 155 | + |
| 156 | +## Add the app as a tab |
| 157 | + |
| 158 | +To add the app as a tab to any channel or conversation, select **+**, and then under **Tabs for your team** select your app. |
| 159 | + |
| 160 | +> [!div class="mx-imgBorder"] |
| 161 | +>  |
| 162 | +
|
| 163 | +The app now appears as a tab. |
| 164 | + |
| 165 | +> [!div class="mx-imgBorder"] |
| 166 | +>  |
| 167 | +
|
| 168 | +### See also |
| 169 | +[Welcome to Microsoft Teams](https://docs.microsoft.com/MicrosoftTeams/teams-overview)<br /> |
| 170 | +[For admins: Embed an app in Microsoft Teams](https://docs.microsoft.com/power-platform/admin/share-app-teams) |
0 commit comments