> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.pdfgeneratorapi.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Integrate with Wix Velo

Wix Velo is a full-stack development platform that empowers you to build, manage and deploy professional web apps rapidly. You can use PDF Generator API to quickly generate PDF documents using the data you already have in your Velo site (e.g. store orders, database records etc.). 

* [Example application Demo](https://tanel9.wixsite.com/pdf-api-demo)
* [Download helper functions from GitHub](https://github.com/pdfgeneratorapi/wix-velo-client)
* [Example documents](https://pdfgeneratorapi.com/templates/free-templates)

**The Wix Wiz** prepared informative videos and tutorials about PDF Generator API on Wix, see [this link](https://www.youtube.com/playlist?list=PLPEOVBufndjiIpjC2cSUFAqtO5a5-UQFk) if you are interested.

### Setup

To set up the integration, you either need an existing Velo project, or you would need to create a new one [here](https://www.wix.com/velo). You also need a PDF Generator API account. 

If you don't have one, you can create a [free Sandbox Account](https://us1.pdfgeneratorapi.com/signup) and use it for **14 days** to evaluate and integrate the API, with **up to 50 credits** available during the trial period..

| For more information on how credit usage is calculated, see this [article](https://support.pdfgeneratorapi.com/en/article/how-credit-usage-is-calculated-5820vc/).

### Use Velo's Secrets Manager to save the API key and secret

Velo's [Secrets Manager](https://support.wix.com/en/article/velo-about-the-secrets-manager) lets you securely store the PDF Generator API key and secret. The value of each secret is safely stored and encrypted in the Secrets Manager in your site's dashboard so that only you can access it. We can access the key and secret stored to Secrets Manager from the code, and we don't need to copy-paste API keys to our code.

![Velo'sSecret Manager](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/secretsmanager3_1g3i20f.png)

##### Adding API key and secret to Secrets Manager

You can find your PDF Generator API key and secret from **Account Settings** view. The next step is to add two new secrets to Velo's Secrets Manager. One for the PDF Generator API key and the second one for the secret. Name the PDF Generator API key as **pdf\_api\_key** and secret as **pdf\_api\_secret**; then we can access these values using Secrets Manager via code.

![PDF Generator API key and secret in Account Settings](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/image_v1t5nk.png)
![Velo's Secrets Manger - add API key as pdf_api_key](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/secretsmanager1_1fvanu0.png)
![Velo's Secrets Manger - add API secret as pdf_api_secret](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/secretsmanager2_1kx9d1i.png)

### Integration Code

This part requires that you have used Velo before and have at least tried it a couple of times. You can follow a [Getting Started with Velo tutorial](https://support.wix.com/en/article/getting-started-with-velo-by-wix) created by Wix to get familiar with the tool. If you are comfortable continuing,  open your project in the Editor and ensure that you have the **Dev Mode** enabled. If you have the Dev Mode enabled you will see a sidebar with Page Code and Code Files.

![Velo - enabling the Dev Mode](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/enabledevmode_hmsdyf.png)

### Installing NPM dependencies

The example code depends on two NPM repositories - **pdf-generator-api-client**, which is a wrapper for our REST API, and **jsonwebtoken**, which handles the JSON Web Token (JWT) generation. Open the **Code Files** section from the sidebar, and click **Install packages from npm**. Please search for the package names and install them.

![Velo tools > Packages > Install packages from npm](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/installnpmpackage_bl1zj6.png)
![Install pdf-generator-api-client package](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/installpdfapinpmpackage_1hhtnvf.png)
![Install jsonwebtoken package](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/installjwtnpmpackage_n8jzdm.png)

### Adding the example code to your project

We have prepared a set of helper logic to speed up the integration process. You can download helper files and example code from our [GitHub Repository](https://github.com/pdfgeneratorapi/wix-velo-client) and copy them to your project.

* **backend/datasource.jsw** - contains an example of how to access your Velo database and fetch data e.g. products.
* **backend/pdfapi.jsw** - contains PDF Generator API related helper functions to generate PDF, fetch list of templates and generate URL to editor. We have also implemented JSON Web Token generation and making the API requests using the pdf-generator-api-client package.
* **public/pdfapi.jsw** - contains helper files for your UI. We have added logic to fill Dropdown with templates, open the generated PDF in a new tab and generate editor URL for the button.
* **example.js** - contains UI page logic to interact with the elements.

![Copy helper files to your backend and public folder](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-04-0615-47-37_1fq86t5.png)

### Use-cases

Here are some use-cases that you might have in your application. If you have a use-case that we have not covered, please contact us support@pdfgeneratorapi.com

##### Generate a URL to PDF

Our API allows you to generate PDF and store it temporarily (for 30 days) to our service. You can access the generated PDF via unique URL that you receive as API request response. You can use the `generatePDFUrl` function that you can find in **backend/pdfapi.jsw**. You can use the link to open generated PDF from your application without storing it on your application.

```
import {generatePDFUrl} from 'backend/pdfapi.jsw';

const data = {name: "Test"}; // Data can be simple js object or array

generatePDFUrl(workspaceIdentifier, templateId, data)
  .then((data) => {
    $w('#download').link = data.response; // This is URL to PDF that is valid for 30 days
    $w('#download').enable();
    $w('#download').label = "Open PDF";
  });
```

##### Generate a PDF and save to Wix database

You can generate base64 encoded PDF file that you can store to your Wix database and later re-use to send emails, display to user or prompt download.

```
import {generatePDF} from 'backend/pdfapi.jsw';
import wixData from 'wix-data';

const data = {name: "Test"}; // Data can be simple js object or array

generatePDF(workspaceIdentifier, templateId, data)
  .then((data) => {
    const base64PDF = data.response;
    wixData.save("myCollection", {pdf: data.response})
      .then((results) => {
      })
      .catch((err) => {
      });
  });
```

##### Generate a PDF with data from your Wix site

It the previous examples we have used static object as the `data` parameter value, but it is also possible to use your data from Wix database. The ability to use data directly from your database gives you a lot of possibilities to generate transactional documents like invoices, packing slips, certificates and reports. In the example repository you can find `getStoreProducts` function in **backend/datasource.jsw** which shows how to get your product records from Wix database.

```
import {generatePDFUrl} from 'backend/pdfapi.jsw';
import {getStoreProducts} from 'backend/datasource.jsw';

getStoreProducts().then((products) => {
  generatePDFUrl(workspaceIdentifier, templateId, products)
    .then((data) => {
      $w('#download').link = data.response; // This is URL to PDF that is valid for 30 days
      $w('#download').enable();
      $w('#download').label = "Open PDF";
    });
});
```

##### Send generated PDF via email

Most of the transactional email APIs (e.g [SendGrid](https://sendgrid.com/docs/api-reference), [Mailchimp](https://mailchimp.com/developer/transactional/api/)) allow you to add attachments to your email as base64 encoded content. You can use the same `generatePDF` function to generate the base64 PDF content and add it directly to your email API request.

![SendGrid Send Mail API - attachment content](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/sendgridapi_5gq0d2.png)

##### Example site

If you want to replicate the example page you see [here](https://tanel9.wixsite.com/pdf-api-demo), you also need to copy the UI elements. You can find the element ID's we used in the example.

![Example page UI element ID's](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/uielementids_145v4jy.png)
---
### Related articles you may find helpful

* [Common use-cases of the Expression language](/en/article/common-use-cases-of-the-expression-language-1seclga/)
* [How to use the editor?](/en/article/how-to-use-the-editor-1a194yy/)
* [Which fonts, languages and characters are supported?](/en/article/which-fonts-languages-and-characters-are-supported-meo2d7/)