> 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/salesforce/get-started/integrate.md).

# Integrating Salesforce with WebViewer JavaScript PDF library

Integrate a free trial of WebViewer to add accurate, reliable document processing in Salesforce Lightning Components with this step-by-step guide. Get unlimited usage and support from solution enginee

Welcome to Apryse. This guide will help you **integrate a free trial of 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. Your free trial includes unlimited trial usage and support from solution engineers.

{% embed url="<https://www.youtube.com/embed/NdRg-RnlC5g>" %}

<a href="https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-salesforce" class="button primary">Get the Salesforce sample source code here</a>

## Prerequisites

* [**Salesforce CLI**](https://developer.salesforce.com/docs/atlas.en-us.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm#sfdx_setup_install_cli)
* [**Node and NPM**](https://nodejs.org/en/)
* (Optional) [**Visual Studio Code with Salesforce Extensions**](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode)
* WebViewer:

{% @apryse-download-button/apryse-download-button id="WebViewer\_web\_web" title="Download WebViewer" showVersion="true" %}

For step-by-step help on setting up a Salesforce development environment, see one of the following:

* \[Salesforce DX Setup Guide]\(<https://developer.salesforce.com/docs/atlas.en-us.sfdx\\_setup.meta/sfdx\\_setup/sfdx\\_setup\\_intro.htm?search\\_text=trial> hub org)
* [Trailhead Module: App Development with Salesforce DX](https://trailhead.salesforce.com/modules/sfdx_app_dev/)

{% hint style="info" %}
**License Key Required**

The trial of Apryse SDK requires a trial license key, which is provided in the box titled "License Key". A commercial license key is required for use in a production environment. Please [contact sales](https://apryse.com/form/contact-sales) to purchase a commercial key or if you need any other license key assistance.
{% endhint %}

{% hint style="warning" %}
**Keep your license keys confidential.**

License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).
{% endhint %}

## Initial Setup

1. Extract [WebViewer.zip](https://docs.apryse.com/downloads/WebViewer.zip).
2. Navigate into the extracted folder and run:

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

```sh
npm run optimize
```

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

1. You will encounter the following prompts, which you should answer **y/n** as indicated:

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

```sh
Optimize: Do you want to exclude the use of optimized worker files? If you exclude them make sure that you pass 'enableOptimizedWorkers: false' to the WebViewer constructor. [y/n]:  n
Optimize: Will you be using WebViewer Server? See https://docs.apryse.com/web/guides/wv-server/ for more info. [y/n]:  n
Optimize: Will you be converting all your documents to XOD? See https://docs.apryse.com/web/guides/optimize-lib-folder for more info. [y/n]:  n
Optimize: Do you need client side office support (docx, pptx, xlsx)? [y/n]:  y
Optimize: Do you need client side office support for legacy office files (doc, ppt, xls)? [y/n]:  y
Optimize: Do you need the full PDF API? See https://docs.apryse.com/web/guides/optimize-lib-folder for more info (most users dont need this option). [y/n]:  y
Optimize: Do you want to use the production version of PDFNet.js? The production version does not have type checking and console messages, but is much smaller than the development version. [y/n]:  n
Optimize: Do you need to use the content editing feature? (This is for editing content on the page in the viewer) [y/n]:  n
Optimize: Do you need to use the office editing feature? (This is for editing docx files in the viewer) [y/n]:  n
Optimize: Do you need to deploy to Salesforce? See https://docs.apryse.com/web/guides/optimize-lib-folder for more info (most users dont need this option). [y/n]:  y
Optimize: Do you need the source map for WebViewer's UI? The source map allows you to debug WebViewer's UI on your site using unminified code. [y/n]:  n
Optimize: Would you like to use the web component version of WebViewer (instead of the iframe)? [y/n]:  n
```

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

{% hint style="info" %}
**Do I need to exclude optimized workers?**

Because of Salesforce governor limits there is a limited file size able to be loaded and so the optimized workers need to be used. Make sure to answer "n" to whether you would like to exclude the optimized workers. [More details on Salesforce governor limits.](https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_gov_limits.htm)
{% endhint %}

After answering these prompts, answer **y** to the final confirmation prompt and the script will optimize and zip the source code you’ll need later to a new `webviewer-salesforce` directory.

Note that this optimization produces `.zip` files of no more than 5 mb in size in addition to the `.resource-meta.xml` -- this meets the requirements to safely upload to the Salesforce platform.

{% hint style="info" %}
**Do I need full PDF API?**

Note that in certain circumstances, you may need the full PDF API. For more details on when you may need to enable it, [please see our guide here ](/web/full-api/full-api-overview.md).
{% endhint %}

{% hint style="warning" %}
**If You Chose "No" for the Full API**

Please ensure you set [this boolean to false](https://github.com/ApryseSDK/webviewer-salesforce/blob/7d592d31b6642df7c4914c6e0d6830750c6108e7/force-app/main/default/lwc/pdftronWebViewer/pdftronWebViewer.js#L10) like so:
{% endhint %}

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

```js
fullAPI = false;
```

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

{% hint style="warning" %}
To ensure WebViewer is initialized and instructed to look for the pdf\_lean files, and not the pdf\_full files.
{% endhint %}

1. Next clone the [`webviewer-salesforce`](https://github.com/ApryseSDK/webviewer-salesforce) sample:

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

```sh
git clone https://github.com/ApryseSDK/webviewer-salesforce.git
```

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

1. Copy the `.zip` files that were output by the optimizing script in the `webviewer-salesforce` folder to the `force-app/main/default/staticresources` folder of the cloned project.

![](https://306473577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfmJo9lQOEYOFBgOyFp26%2Fuploads%2Fgit-blob-ed813889a53b6a60d9b3c0720b72e7123a1c97d1%2Fc9458a8c156ddd0975ba15c27a19809d880de018-1286x574.png?alt=media)

Note how every `.zip` file, and the `myfiles/` directory, has a corresponding `.resource-meta.xml` file, wherein the contents of each `.xml` file are the same.

1. Make sure you are in the cloned project directory and authenticate with your hub org and provide it with an alias (**DevHub** in the command below) from your command line using an authorization method:

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

```sh
sf org login (authorization method) --alias devHub
```

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

1. Enter your Dev Hub org credentials in the browser that opens to the lightning experience setup page. Enable `devhub` by typing `dev hub` in the quick find search and toggle to `enable` as shown in the picture below.

![](https://306473577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfmJo9lQOEYOFBgOyFp26%2Fuploads%2Fgit-blob-ce779865c9da6186c68fb960b759b6bb6483a29f%2F1f571b69f09f441602f2fd54702731f5fa5f8b84-1120x775.png?alt=media)

1. Create a scratch org using the `config/project-scratch-def.json` file, set the username as your default, and assign it an alias:

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

```sh
sf org create scratch --alias myScratchOrg
```

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

1. Push the app to your scratch org:

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

```sh
sf project deploy start --target-org myScratchOrg
```

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

## Run the sample

1. Make sure you are still in the cloned project. Open the scratch org:

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

```sh
sf org open --target-org myScratchOrg
```

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

1. A browser will open where you should click the app launcher icon in the top left, and select `Apryse`.

![](https://306473577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfmJo9lQOEYOFBgOyFp26%2Fuploads%2Fgit-blob-adfee5715cffeda227932dd2b6da4a31a58ac386%2Fd7a9536f914281037cf382213d81a5559b7c5ecb-1200x701.png?alt=media)

You should see the application start up:

![](https://306473577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfmJo9lQOEYOFBgOyFp26%2Fuploads%2Fgit-blob-d0255ee7af688885056be7f8aaaa1f571f835d13%2F902c84fb5bbf0699e33d5d1bf228eed70818152b-1200x855.png?alt=media)

## Extending the sample

See our [Salesforce overview page](/salesforce/get-started/readme.md) for information on how to follow our general WebViewer guides when WebViewer is integrated into Salesforce.

## Next step

<a href="/web/what-is-webviewer/usage.md" class="button primary">Usage</a><a href="/web/get-started/guides.md" class="button primary">Guides</a><a href="https://github.com/iKettles/apryse-gitbook/tree/main/web/samples/README.md" class="button primary">Samples</a><a href="https://sdk.apryse.com/api/web/index.html" class="button primary">API docs</a>

{% hint style="info" %}
**For more information on how to call WebViewer API, check out this blog.**
{% endhint %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.apryse.com/salesforce/get-started/integrate.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.