ComPDF
Contact Sales
EN
PDF SDKConversion SDKIDP
PDF SDK
DemoDownloadFAQChangelog

ComPDF Salesforce SDK Integration ​

Integrate into a New Salesforce Project as a Lightning Web Component ​

This guide will help you integrate a WebViewer into Salesforce Lightning Components. It will help you clone the Salesforce sample repository and show you how to integrate WebViewer as a lightning web component.

Prerequisites ​

  • Latest stable version of Node.js and NPM
  • ComPDF License Key
  • Salesforce Development Environment

Get your license key ​

A license key is required to run WebViewer. You can refer to our requirements to obtain a license key.

Set up your Salesforce development environment ​

For step-by-step help on setting up a Salesforce development environment, please follow the instructions in the Setup Development Guide or in the Setup Development Trailhead Trailhead module. The steps include:

Deploying the Package to your Salesforce ​

To deploy the ComPDF Web SDK package to your Salesforce organization, follow these steps.

  1. Clone the ComPDF Salesforce SDK repository from GitHub repo:

    bash
    git clone https://github.com/ComPDFKit/compdf-web-example-salesforce.git

  2. In the terminal, go to the ComPDF Salesforce SDK project folder and run the following command to install the npm modules.

    bash
    npm install

  3. The ComPDF Salesforce SDK integration example now makes use of the ComPDF Web SDK available from our server at https://static.compdf.com, which means it's no longer limited by Salesforce's upload assets size 5MB limit.

  4. Add your ComPDF license key to the licenseKey property value in the ./force-app/main/default/lwc/compdfViewer/compdfViewer.js file.

    js
    licenseKey = 'YOUR_LICENSE_KEY'

  5. If you have not already done so, authenticate with your hub org and provide it with an alias ("DevHub" in the command below):

    bash
    sf org login web --set-default-dev-hub --alias DevHub

  6. Enter your Dev Hub org credentials in the browser that opens. After you log in successfully, you can close the browser. Create a scratch org using the config/project-scratch-def.json file, set the username as your default, and assign it an alias ("myScratchOrg" in the command below).

    bash
    sf org create scratch --definition-file config/project-scratch-def.json --set-default --target-dev-hub DevHub --alias myScratchOrg

  7. Push the app to your scratch org:

    bash
    sf project deploy start --source-dir force-app --target-org myScratchOrg --concise

  8. Open the scratch org:

    bash
    sf org open --target-org myScratchOrg

  9. (Optional) If you need to upload or save large files (over 6 MB), it is recommended to add your Access Token to the accessToken property in the ./force-app/main/default/lwc/compdfViewer/compdfViewer.js file. You can view your org information and obtain the Access Token by running the following command:

    bash
    sf org display --target-org myScratchOrg
    js
    accessToken = 'YOUR_ACCESS_TOKEN'

Next, we still need to do some configuration in your Salesforce organization setup.

Changing the Security Settings ​

ComPDF Salesforce SDK example uses resource packages provided by our third-party server, it is necessary to add trusted URLs in Salesforce. To change the default security settings, follow these steps.

  1. In Salesforce, go to Security > Trusted URLs.

  2. Click New Trusted URL.

  3. Configure URL properties：

    • Customize an API name, such as "ComPDF".
    • Write the following URL in the URL input box.
    https://static.compdf.com
    • Ensure that the 'Active' attribute is checked, and check all CSP directives.

  4. Click on Save.

Using the ComPDF Web SDK in Salesforce ​

Then you can use ComPDF Web SDK in your opening scratch organization:

  1. Click the app launcher icon in the top left, and select ComPDF. Then you should see the application start up.

ComPDF App

  1. Click browse to upload local PDF files, or open a file from Salesforce.

WebViewer