+ Title: Share to Teams from personal app or tab

+description: Learn to add the Share in Teams embedded on your personal app or tab

+ms.localizationpriority: medium

+keywords: Share Teams Share to Teams

+# Share to Teams from personal app or tab

+> [!NOTE]

+> Share to Teams is currently available only in [public developer preview](../../resources/dev-preview/developer-preview-intro.md).

+Share to Teams allows users to share the content from personal app or tab to other user or group or channel within Teams. Users can select Share to Teams to launch the Share to Teams experience in a pop-up window. The pop-up window allows users to add other user or group or channel to share the content.

+The following image shows the Share to Teams pop-up window:

+## Enable Share to Teams button

+> [!NOTE]

+> Ensure that you have [Microsoft Teams JavaScript Client SDK](../../tabs/how-to/using-teams-client-sdk.md) or [Microsoft Teams JavaScript Client SDK v2 Preview](../../tabs/how-to/using-teams-client-sdk.md) (`@microsoft/teams-js@1.11.0-beta.7` or later) to enable Share to Teams for your personal app or tab.

+To enable Share to Teams:

+1. Create a personal app or tab with **Teams Javascript Client SDK**.

+2. Create a **Share to Teams** button.

+3. On Share to Teams button, call `microsoftTeams.sharing.shareWebContent` with a content payload.

+The following example explains how to create a content payload:

+```json

+microsoftTeams.sharing.shareWebContent({

+ content: [

+ {

+ type: 'URL',

+ url: '<URL to be shared>',

+ preview: true

+ }

+ ]

+ });

+```

+The payload contains the following parameters:

+| Property name | Purpose |

+|||

+| `type` | The type must be `URL` |

+| `url` | `URL` to be shared |

+| `preview` | Set to `true` to enable URL preview |

+The following image shows the Share to Teams option:

+## Response codes

+The following table provides the response codes:

+|Response code|Description|

+|||

+| **100** | API not supported in the current platform. |

+| **404** | The file specified was not found on the given location. |

+| **500** | Internal error encountered while performing the required operation. |

+| **501** | API is not supported in current context. |

+| **1000** | Permissions denied by user. |

+| **2000** | Network issue. |

+| **3000** | Underlying hardware doesn't support the capability. |

+| **4000** | One or more arguments are invalid. |

+| **5000** | User is not authorized for this operation. |

+| **6000** | Could not complete the operation due to insufficient resources. |

+| **7000** | Platform throttled the request because of API was invoked too frequently. |

+| **8000** | User aborted the operation. |

+| **9000** | Platform code is old and doesn't implement this API. |

+| **10000** | The return value is too big and has exceeded our size boundries. |

+## Limitations

+The limitations to add Share to Teams button:

+* The Share to Teams button can be hosted or embedded in an app running inside Teams.

+* You can add Share to Teams button to the app created by using **Teams Javascript Client SDK**.

+## End user Share to Teams experience

+After you enable share to teams button on personal app or tab, you can share the content. To access, follow the steps:

+1. Open a personal app or tab and select **Share to Teams**.

+ :::image type="content" source="../../assets/images/share-to-teams/share-button.PNG" alt-text="share-to-teams-button":::

+2. Add other user or group or channel to share the content.

+ :::image type="content" source="../../assets/images/share-to-teams/add-recepient.PNG" alt-text="add-recipient":::

+ > [!NOTE]

+ > You can add a note in **say something about this**.

+3. Select **Share**.

+ :::image type="content" source="../../assets/images/share-to-teams/add-notes.PNG" alt-text="add-note":::

+4. Select **View** to reach the conversation where the link was shared.

+ :::image type="content" source="../../assets/images/share-to-teams/link-shared.PNG" alt-text="share-to-teams-link-shared":::

+## See also

+* [Share to Teams from web apps](share-to-teams-from-web-apps.md)

+* [Create a personal tab](../../tabs/how-to/create-personal-tab.md)

+ Title: Share to Teams from web apps

+description: Learn to add the Share to Teams embedded button on your website, with a website preview, using Code samples

+ms.localizationpriority: medium

+keywords: Share Teams Share to Teams

+# Share to Teams from web apps

+Third-party websites can use the launcher script to embed Share to Teams buttons on their webpages. When you select, it launches the Share to Teams experience in a pop-up window. This allows you to share a link directly to any person or Microsoft Teams channel without switching the context. This document guides you on how to create and embed a Share to Teams button for your website, craft your website preview, and extend Share to Teams for Education.

+> [!NOTE]

+>

+> * Only the desktop versions of Microsoft&nbsp;Edge and Google Chrome are supported.

+> * Use of Freemium or guest accounts is not supported.

+The following image displays the Share to Teams pop-up experience:

+## Embed a Share to Teams button

+1. Add the `launcher.js` script on your webpage.

+ ```html

+ <script async defer src="https://teams.microsoft.com/share/launcher.js"></script>

+ ```

+1. Add an HTML element on your webpage with the `teams-share-button` class attribute and the link to share in the `data-href` attribute.

+ ```html

+ <div

+ class="teams-share-button"

+ data-href="https://<link-to-be-shared>">

+ </div>

+ ```

+ After completing this, the Microsoft Teams icon gets added to your website. The following image shows the Share to Teams icon:

+ 

+1. Alternatively, if you want a different icon size for the Share-to Teams button, use the `data-icon-px-size` attribute.

+ ```html

+ <div

+ class="teams-share-button"

+ data-href="https://<link-to-be-shared>"

+ data-icon-px-size="64">

+ </div>

+ ```

+1. If the shared link requires user authentication, and the URL preview from your link to be shared does not render well in Teams, then you can disable the URL preview by adding the `data-preview` attribute set to `false`.

+ ```html

+ <div

+ class="teams-share-button"

+ data-href="https://<link-to-be-shared>"

+ data-preview="false">

+ </div>

+ ```

+1. If your page dynamically renders content, you can use the `shareToMicrosoftTeams.renderButtons()` method to force **Share** to render at the appropriate place in the pipeline.

+## Craft your website preview

+When your website is shared to Teams, the card that is inserted into the selected channel contains a preview of your website. You can control the behavior of this preview by ensuring the appropriate meta-data is added to the website being shared, such as the `data-href` URL.

+To display the preview:

+* You must include either a **Thumbnail image**, or both a **Title** and **Description**. For best results, include all three.

+* The shared URL does not require authentication. If it requires authentication, you can share it, but the preview is not created.

+The following table outlines the necessary tags:

+|Value|Meta tag| Open Graph|

+|-|-|-|

+|Title|`<meta name="title" content="Example Page Title">`|`<meta property="og:title" content="Example Page Title">`|

+|Description|`<meta name="description" content="Example Page Description">`|`<meta property="og:description" content="Example Page Description">`|

+|Thumbnail Image| none. |`<meta property="og:image" content="http://example.com/image.jpg">`|

+You can use either the HTML default versions or the Open Graph version.

+## Share to Teams for Education

+For teachers using the Share to Teams button, there is an additional option to `Create an Assignment`. This enables you to quickly create an assignment in the chosen Team, based on the shared link. The following image displays Share to Teams for education:

+## Full launcher.js definition

+| Property | HTML attribute | Type | Default | Description |

+| -- | - | | - | - |

+| href | `data-href` | string | n/a | The href of the content to share. |

+| preview | `data-preview` | Boolean (as a string) | `true` | Whether or not to show a preview of the content to share. |

+| iconPxSize | `data-icon-px-size` | number (as a string) | `32` | The size in pixels of the Share to Teams button to render. |

+| msgText | `data-msg-text` | string | n/a | Default text to be inserted before the link in the message compose box. Maximum number of characters is 200. |

+| assignInstr | `data-assign-instr` | string | n/a | Default text to be inserted in the assignments "Instructions" field. Maximum number of characters is 200. |

+| assignTitle | `data-assign-title` | string | n/a | Default text to be inserted in the assignments "Title" field. Maximum number of characters is 50. |

+### Methods

+**`shareToMicrosoftTeams.renderButtons(options)`**

+`options` (optional): `{ elements?: HTMLElement[] }`

+Currently, all share buttons are rendered on the page. If an optional `options` object is supplied with a list of elements, those elements are rendered into share buttons.

+### Set default form values

+You can select to set default values for the following fields on the Share to Teams form:

+* Say something about this: `msgText`

+* Assignment Instructions: `assignInstr`

+* Assignment Title: `assignTitle`

+#### Example

+ Default form values are given in the following example:

+```html

+<span

+ class="teams-share-button"

+ data-href="https://www.microsoft.com/education/products/teams"

+ data-msg-text="Default Message"

+ data-assign-title="Default Assignment Title"

+ data-assign-instr="Default Assignment Instructions"

+></span>

+```

+## See also

+* [Integrate web apps](~/samples/integrate-web-apps-overview.md)

+* [Share to Teams from personal app or tab](share-to-teams-from-personal-app-or-tab.md)

+ Title: Share to Teams overview

+description: Describes how to create share-to-teams button

+ms.localizationpriority: medium

+keywords: Share to Teams overview

+# Share to Teams

+Share to Teams is a button enabled on any web app, personal app, or tab that allows users to share content to other users in Teams.

+You can also decide the placement of the Share to Teams button on the app. Users can pin the crucial content and refer to it while collaborating with Teams.

+You can enable this feature on the following:

+* Web apps

+* Personal app or tab

+## Share to Teams from web apps

+You can embed Share to Teams button on the web apps that allows users to share the content from the web apps to any chat, group chat, or channel in Teams, without switching the context.

+For more information, see [Share to Teams from web apps](share-to-teams-from-web-apps.md).

+## Share to Teams from personal app or tab

+You can embed Share to Teams button in the personal app or tab hosted inside Teams that allows users to share the content from the personal app or tab to any chat, group chat, or channel in Teams without switching the context.

+For more information, see [Share to Teams from personal app or tab](share-to-teams-from-personal-app-or-tab.md).

+## See also

+[Share to Teams developer page](https://developer.microsoft.com/microsoft-teams/share-to-teams#/)

+||Shared channels|

+* [Share to Teams from web apps](~/concepts/build-and-test/share-to-teams-from-web-apps.md)

+* [Share to Teams from web apps](~/concepts/build-and-test/share-to-teams-from-web-apps.md)

+1. Go to Microsoft Teams and select **Apps**&nbsp;:::image type="content" source="~/assets/images/tab-images/store.png" alt-text="Teams Store":::.

+1. Select **Manage your apps** and **Upload a custom app**.

+1. Go to Microsoft Teams and select **Apps**&nbsp;:::image type="content" source="~/assets/images/tab-images/store.png" alt-text="Teams Store":::.

+1. Select **Manage your apps** and **Upload a custom app**.

+* [Share to Teams from personal app or tab](~/concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md)

+* [Share to Teams from web apps](~/concepts/build-and-test/share-to-teams-from-web-apps.md)

+|04/06/2022| Share to Teams from personal app or tab (developer preview) | Integrate with Teams > Share to Teams > [Share to Teams from personal app or tab](concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md) |

+|02/25/2022| Introduced step-by-step guide to invoke task modules in Teams| Build cards and task modules > Build task modules > Use task modules from bots > [Invoke task module from Teams](sbs-botbuilder-taskmodule.yml)|

+|02/24/2022| Introduced step-by-step guide to build action based messaging extension | Build Messaging Extensions > Action commands > Define action commands > [Build action based messaging extension](sbs-meetingextension-action.yml)|

+|02/24/2022| Introduced step-by-step guide to build search based messaging extension | Build messaging extensions > Search commands > Define search commands > [Build search based messaging extension](sbs-messagingextension-searchcommand.yml)|

+|02/24/2022| Introduced step-by-step guide to create Outgoing Webhooks | Build webhooks and connectors > Create Outgoing Webhooks > [Create Outgoing Webhooks](sbs-outgoing-webhooks.yml)|

+| 02/23/2022 |Microsoft Teams store ranking parameters| Distribute your app > Publish to the Teams store > [Microsoft Teams store ranking parameters](concepts/deploy-and-publish/appsource/post-publish/teams-store-ranking-parameters.md)|

+|02/09/2022| Introduced step-by-step guide how to upload files to Teams from a bot | Build bots > Send and receive files > [step-by-step guide how to upload files to Teams from a bot](sbs-file-handling-in-bot.yml) |

+| 02/18/2022 | Introduced extensive Glossary for the Microsoft Teams Developer Documentation to help you find the definition about a term quickly | [Glossary](~/get-started/glossary.md) |

+| 02/18/2022 | Updated the Overview module for mapping Teams app to organizational goals, user story, and exploring Teams app features | [Overview > Teams app that fits](overview.md) |

+| 02/18/2022 | Updated the App fundamentals module to Plan your app to include mapping use cases to Teams features, and app planning checklist | [Plan your app > Overview](~/concepts/app-fundamentals-overview.md) |

+|02/17/2022| What to expect after you submit your app?| Distribute your app > Publish to the Teams store > [Overview](concepts/deploy-and-publish/appsource/publish.md)|

+|02/15/2022| Introduced step-by-step guide how to upload files to Teams from a bot | Build bots > Send and receive files > [Step-by-step guide how to upload files to Teams from a bot](sbs-file-handling-in-bot.yml) |

+|02/11/2022| Shared meeting stage| ΓÇó Build apps for Teams meetings > [Shared meeting stage](apps-in-teams-meetings/enable-and-configure-your-app-for-teams-meetings.md#shared-meeting-stage) </br> ΓÇó Build apps for Teams meetings > [Meeting apps API references](apps-in-teams-meetings/API-references.md) </br> ΓÇó App manifest > Public developer preview > [Developer preview manifest schema](resources/schem)|

+|02/08/2022| Introduced step-by-step guide to create Calling and Meeting bot| Build bots > Calls and meetings bots > Register calls and meetings bot > [Step-by-step guide to create Calling and Meeting bot](sbs-calling-and-meeting.yml) |

+|02/07/2022| Tools and SDKs |Teams Toolkit for Visual Studio Code > </br> ΓÇó Add capabilities to Teams app> [Add capabilities to your Teams apps](toolkit/add-capability.md) </br> ΓÇó Add cloud resources to Teams app> [Add cloud resources to your Teams app](toolkit/add-resource.md) |

+|02/03/2022| Introduced app manifest version 1.12 | ΓÇó App manifest > [App manifest schema](resources/schem) |

+|04/06/2022| Share to Teams from personal app or tab | Integrate with Teams > Share to Teams > [Share to Teams from personal app or tab](concepts/build-and-test/share-to-teams-from-personal-app-or-tab.md) |