Integrating Microsoft Teams with WebViewer

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.

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
• VS Code Teams Toolkit Extension - MSFT Setup Guide
• Microsoft 365 Account with valid subscription or join Microsoft 365 Developer Program Join here
• Download Node.js

Apryse WebViewer

First we need to set up a WebViewer, for this example we can explore Apryse's samples for a preferred web framework and follow the guides to build the WebViewer.

Frameworks such as (linked to Apryse guides):

• React
• Angular
• Vue
• Svelte
• Blazor
• Next.js
• Nuxt.js

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 for testing and developing your app.

See Microsoft docs - Setup locally hosted web app for more information.

Follow steps below or setup ngrok

1. Install ngrok via Chocolatey

Shell

choco install ngrok

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

Shell

ngrok authtoken <token>

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

Shell

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

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

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

You should have something like this at the end!

Sideloading issues

Note: If there is an issue with Sideloading not being enabled, you must sign into the admin center 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.

Conclusion

In this guide, we have put together Apryse's WebViewer with a Microsoft Teams Personal Tab. Review a completed sample project on Github.

If you are interested in trying other features with the Apryse's WebViewer, check out the getting started guides.

That is all, please contact us if you need help.