Integration

This section will introduce how to integrate the Foxit Web Collaboration Add-on into an existing web application which is built based on Foxit PDF SDK for Web 9.0.0.

In this guide, we will take the complete_webViewer demo（FoxitPDFSDKforWeb/examples/UIExtension/complete_webViewer) of Foxit PDF SDK for Web as an example to show you the critical steps of the integration.

:

Assumed that you already have a simple collaboration server. If you need to integrate the collaboration server with your own infrastructure, please refer to Web Collaboration Server Guide.

Install Dependencies

Navigate into the root directory of complete_webViewer demo by running

npm install @foxitsoftware/web-collab-client

Initialize a Web Collaboration Client

import { WebCollabClient } from ' @foxitsoftware/web-collab-client'

async function initWebCollabClient(){
  
  // Get pdfViewer from the existing web app.
  let pdfViewer = await pdfui.getPDFViewer();
  
  // Login with your own User Authentication service.   
  let userInfo = await login();
  
  const webCollabClient = new WebCollabClient({
    pdfViewer: pdfViewer,
    baseURL:`http://localhost:8080`, // This should be changed to the collaboration server base url.
    userProvider: () => {
      return {
        id: userInfo.id,
        username: userInfo.name,
        token: userInfo.token 
      }
    }
  });
  
  return webCollabClient
}

Initiator: Initiate a Collaboration and Begin the Collaboration session

async function initiateCollaboration(){
  const colloaboration = await webCollabClient.createCollaboration({
    // The URL of file to share.
    fileUrl: '/assets/FoxitPDFSDKforWeb.pdf', 
    isDocPublic: true,
    docName: "FoxitPDFSDKforWeb" 
  })
 
  // Begin the collaboration session. 
  await collaboration.begin()
 
  // Listen to online member state change event and refresh the online members list.
  collaboration.on("onlineStatusChanged",async function (){
     const onlineMembers = await colloaboration.getOnlineMembers()
    
     // You can show online members on the UI. For abbreviation, we just log to console here. 
     console.log(onlineMembers)
  })
 
  // Create a invitation which will expire in 2 hours (7200 * 1000 milliseconds)  
  const invitation = await webCollabClient.createInvitation(colloaboration.id, 7200 * 1000)
 
  // Then, you can send invitation to others who will join the collaboration by the invitation id. 
  sendInvitationByEmail(invitation)
  
}

Participant: Join a Collaboration

// The participant gets the invitation id by email or a shared link. 
const invitationId = getInvitationFromSomewhere()

async function joinCollaboration(){
  
   // Get the collaboration by initation id.  
  const collaboration =  await webCollabClient.joinCollaborationWithInvitation(invitationId) 
 
  // Start to collaborate with others.
  await collaboration.begin()
  
}

This guide is intended to show how to integrate the Foxit Web Collaboration Add-on into an existing web application. The code is not production grade.