Some test text!

Loading...
Guides
Microsoft Teams

Integrating Microsoft Teams with WebViewer

Welcome to PDFTron. This is a guide to getting started with PDFTron'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:

PDFTron WebViewer

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

Frameworks such as (linked to PDFTron guides):

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
choco install ngrok
  1. Add auth token (You generate your own token and input it here)
ngrok authtoken <token>
  1. Start a tunnel (Note: Change port “4200” as needed)
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

drawing

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

drawing

You should have something like this at the end!

drawing

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.

drawing

Conclusion

In this guide, we have put together PDFTron's WebViewer with a Microsoft Teams Personal Tab. A completed sample project can be found here as well

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

That is all, if you need any help our contact information is here.


Get the answers you need: Support

Upcoming Webinar: SDK Features Preview and Live Run-Through | July 14, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use