**Source URL:** https://general.veevavault.dev/commercial/library/guides/external-document-viewer.md

# Vault External Document Viewer



You can embed the external document viewer into a website or use it as a standalone viewer for documents in your Vault.
Vault ensures that only the latest steady state version of the document will be accessible through the viewer at all times.

<Aside>The external document viewer is only available in [PromoMats](https://commercial.veevavault.help/en/gr/26440) and
[MedComms](https://medical.veevavault.help/en/gr/26440) Vaults with the **Public Distribution** and **View-Based User** license type features enabled.</Aside>
The External Viewer has the following unique properties:

* Allows anonymous access to documents stored in Vault.

* Can be embedded in an iFrame within a website using the JavaScript code below.

* Supports use as a standalone browser page.

The Token API generates document access tokens needed by the external viewer:

* A valid Vault session is required to ensure the non-Vault user has access to the document.

* Only users with a view-based license can access the endpoint to request an anonymous viewing token.

* In order to generate the token, a valid session ID is required.

## Setting up the External Viewer {#setting-up-the-external-viewer}

You can include the following snippet of JavaScript code into your website to display a specific Vault document.

```
<!DOCTYPE html>
<html>
 <body>
   <!-- 1. The <iframe> (and Vault viewer) will replace this <div> tag. -->
   <div id="viewer"></div>

   <script>
     // 2. This code loads the IFrame Viewer API code asynchronously.
     var tag = document.createElement('script');

     tag.src = 'https://js.veevavault.com/vault.js';
     var firstScriptTag = document.getElementsByTagName('script')[0];
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

     // 3. This function creates an <iframe> (and Vault viewer) after the API code downloads.
     var viewer;
     function onVeevaVaultIframeAPIReady() {
       viewer = new VV.Viewer('viewer', {
         height: '600',
         width: '600',
         error: 'We\'re sorry. The document you are trying to view is not available.'
       });
     }
   </script>
 </body>
</html>

```

Once the viewer is embedded, a Vault Document Token generated for the desired document needs to be provided in the URL parameters, as well as a DNS parameter to pass the source Vault's DNS.

## Generating Tokens for Vault Documents {#token-gen}

Generate tokens with the [Document Tokens endpoint](/vault-api/api-reference/26.1/documents/document-tokens).

<Endpoint path="/api/{VERSION}/objects/documents/tokens" method="POST"></Endpoint>

## How to Create the URL {#ex-viewer-create-url}

When sharing your documents in an embedded viewer, users must navigate to a URL that includes both the anonymous viewing token and your Vault's DNS:

```
https://{PAGE_WITH_EMBED_SCRIPT}?token={VIEWING_TOKEN}&dns={CUSTOMER}.veevavault.com

```

For example, a URL for information for the CholeCap product might be:

```
https://cholecap.com/about.html?token=3003-cb6e5c3b-4df9-411c-abc2-6e7ae120ede7&dns=myvault.veevavault.com

```

If you want to display multiple documents in the viewer, use the `tokenGroup` parameter when requesting tokens and use
any of the tokens from the response within the URL. Vault will determine whether a token belongs to a group and will
automatically show all documents within the group. The token in the URL corresponds to the document that displays when the viewer loads.

