How to integrate with Wix Velo?

Introduction

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.). You can find the example integration built with Velo and PDF Generator API here.

Example application Demo
Download helper functions from GitHub
Example documents

The Wix Wiz prepared informative videos and tutorials about PDF Generator API on Wix, see this link 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. You also need a PDF Generator API account. If you don't have one, you can create a free Sandbox Account. You can use the free Sandbox Account for 1 month to evaluate and integrate the API. The Sandbox Account allows you to make 2500 merges per month.

The monthly usage (merges) is calculated based on the number of document generation requests multiplied by the number of unique datasets in the request. Read more

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

Velo's 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.

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.

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 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.

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.

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 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.

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, Mailchimp) 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.

Example site

If you want to replicate the example page you see here, you also need to copy the UI elements. You can find the element ID's we used in the example.

Updated on: 27/12/2023