> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/integrations/microsoft-teams.md).

# Integrating Microsoft Teams with WebViewer

Learn how to integrate Apryse's WebViewer with Microsoft Teams as a Teams App. Get started with PDFs, Annotations, and more for seamless collaboration. Follow the step-by-step guide here! The Apryse W

Welcome to Apryse. This is a guide to getting started with Apryse's WebViewer sample and integrating it with Microsoft Teams as a Teams App. The WebViewer will let you open PDFs, Annotate, Fill and Sign, and [so much more](/web/what-is-webviewer/feature-support.md).

How do Apps work in Teams?

When apps are made for Microsoft Teams a JSON manifest file is generated.The manifest file contains all the information the user needs to use the Teams app such as the web pages to navigate to for the Teams Tabs. Tabs in Teams are an `<iframe>` so adding both new or existing web apps are made possible.

## Prerequisites

The following needs to be installed for this guide:

* VS Code - [Download](https://code.visualstudio.com/download/)
* VS Code Teams Toolkit Extension - [MSFT Setup Guide](https://docs.microsoft.com/en-us/microsoftteams/platform/toolkit/teams-toolkit-fundamentals/)
* Microsoft 365 Account with valid subscription or join Microsoft 365 Developer Program [Join here](https://developer.microsoft.com/en-us/microsoft-365/dev-program/)
* Download [Node.js](https://nodejs.org/en/download/)

## Apryse WebViewer

First we need to set up a WebViewer, for this example we can explore Apryse's [samples](https://docs.apryse.com) for a preferred web framework and follow the guides to build the WebViewer.

Frameworks such as (linked to Apryse guides):

* [React](/web/get-started/libraries-and-frameworks/react.md)
* [Angular](/web/get-started/libraries-and-frameworks/angular.md)
* [Vue](/web/get-started/libraries-and-frameworks/vue.md)
* [Svelte](/web/get-started/libraries-and-frameworks/svelte.md)
* [Blazor](/web/get-started/libraries-and-frameworks/blazor.md)
* [Next.js](/web/get-started/libraries-and-frameworks/nextjs.md)
* [Nuxt.js](/web/get-started/libraries-and-frameworks/nuxt.md)

## Use ngrok to make local running instance externally accessible

The WebViewer sample needs to be publically available using HTTPS endpoints for Microsoft Teams. This can be done easily with the tool [ngrok](https://ngrok.com/download/) for testing and developing your app.

See Microsoft docs - [Setup locally hosted web app](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/debug/) for more information.

Follow steps below or setup [ngrok](https://ngrok.com/download/)

1. Install ngrok via Chocolatey

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
choco install ngrok
```

{% endcode %}
{% endtab %}
{% endtabs %}

1. Add auth token (You generate your own token and input it here)

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
ngrok authtoken <token>
```

{% endcode %}
{% endtab %}
{% endtabs %}

1. Start a tunnel (Note: Change port “4200” as needed)

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
ngrok http 4200 --host-header=localhost:4200
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Start a new project for Microsoft Teams and integrate

1. In VS Code select the extension Teams Toolkit
2. Create a new Teams app
3. Select `Edit manifest file` underneath `Development` header or go to the `manifest.local.template.json`
4. Edit all the **Urls** to match the new externally accessible Url from ngrok
5. F5 to build and run
6. Add the app

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-5152177d1f1603e04bafdc955ee1fc7f379718ab%2F21e8975e2ffffcaea0125e5e43649753eb5a4bce-1900x982.gif?alt=media)

Alternatively, the app can be zipped and sideloaded into Teams as well.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-fb16bd57eb0ff79f8cbd806733275b4667ff9000%2F24bd8edf9faff8ef1dc9e0c11e0b7985cf82a8aa-1895x981.gif?alt=media)

You should have something like this at the end!

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-a8d9cf4d4c4ac047e5f0c247862b256a348c6014%2Fe0c9fbee7926b9e7cb858bb2fe2d7136946db4b4-1909x936.gif?alt=media)

## Sideloading issues

Note: If there is an issue with Sideloading not being enabled, you must sign into the [admin center](https://admin.microsoft.com/adminportal/home?#/homepage) as the **admin** and **enable** it.

1. At the admin center, select `Teams`
2. Expand `Teams apps`
3. Underneath go to `Setup policies`
4. Enable `Upload custom apps`

This may take time to update after enabling it in the admin center.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-27af9f4ada9201c27fb058e772016cd3071d0180%2F42011391e67807d81785d39761ab559a59b6ba0d-1900x882.gif?alt=media)

## Conclusion

In this guide, we have put together Apryse's WebViewer with a Microsoft Teams Personal Tab. Review a [completed sample project](https://github.com/ApryseSDK/webviewer-microsoft-teams-samples/) on Github.

If you are interested in trying other features with the Apryse's WebViewer, check out the [getting started guides](/web/get-started/readme.md).

That is all, please [contact us](https://apryse.com/contact-us) if you need help.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/get-started/integrations/microsoft-teams.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.