> ## 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 Bubble

[Bubble](https://bubble.io/) is the most powerful no-code platform, empowering entrepreneurs to build production-ready web apps. Bubble lets you create interactive, multi-user apps for desktop and mobile web browsers, including all the features you need to build a site like Facebook or Airbnb. Build out logic and manage a database with our intuitive, fully customizable platform.

You can use PDF Generator API Bubble Plugin to quickly generate PDF documents using the data you already have in your Bubble application (e.g. store orders, database records etc.).

* [Install PDF Generator API Bubble Plugin](https://bubble.io/plugin/pdf-generator-api-1621422101542x543842438658129900)
* [Example application Demo](https://pdf-generator-api-demo.bubbleapps.io/version-test)
* [Example application Editor](https://bubble.io/page?name=index&id=pdf-generator-api-demo&tab=tabs-1)
* [Example documents](https://pdfgeneratorapi.com/templates/free-templates)

${youtube}[PDF Generator API Bubble Plugin Introduction](_0LcYayLsPw)

### Setup

To use PDF Generator API Bubble Plugin, you need a PDF Generator API account. If you don't have one, you can create a [free Sandbox Account](https://us1.pdfgeneratorapi.com/signup). The Sandbox account can be used 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/).

### Configuring the Plugin

In the plugin configuration, you need to add API KEY, API SECRET and WORKSPACE values. You can find your PDF Generator API key and secret from **Account Settings** view. The WORKSPACE is the workspace identifier that specifies the request context. Your default workspace identifier is the email you used to sign up to PDF Generator API. 

![PDF Generator API Plugin Configuration](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/bubblepluginconfig_12yf11v.png)

### Actions

The current plugin version has two Actions that you can use in your Bubble Workflow - **PDF API - Generate Document** and **PDF API - Open Editor**.

### PDF API - Generate Document

This Action allows you to send dynamic data from your application to generate a PDF document using a template you created in PDF Generator API. The Action returns a data set where `content` is the URL to file, or base64 encoded PDF content.

```
{
      "content": "URL or base64 encoded content",
      "file_name": "file name with extension"
}
```

![PDF API - Generate Document](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-05-2211-00-35_1cp3iya.png)

##### Properties

**Template ID**  (required)
The ID of a template in PDF Generator API. It can be a static value or a Dynamic value from your application (e.g. database or form input)

**Workspace**  (optional)
Workspace identifier in PDF Generator API. It can be a static text or a dynamic value from your application (e.g. database or form input). You can use a unique identifier for each of your users to take advantage of our workspace logic.

|| This value defaults to the **WORKSPACE** value you specified in the plugin configuration.

**File name** (optional)
The file name can be a static text or a dynamic value from your application (e.g. database or form input). 

**Output type** (required)
The generated PDF document returns a public URL or base64 encoded PDF document. You can use the URL to quickly show the PDF document to your end-user without the need to save it in your Bubble application. The base64 encoded PDF document can be saved to your Bubble Database or used as an attachment for your emails.

  {
        "content": result.response,
	"file\_name": result.meta.name,
        "content\_encoding": result.meta.encoding,
        "content\_type": result.meta['content-type']
    }

|| The generated URL is available for 30 days

**JSON data** (optional)
The JSON data is used to replace placeholders in your template. You can add static JSON or use Dynamic placeholders to send data from your application. If you want to send a Bubble Database object, you can use [jsonNest](https://bubble.io/plugin/jsonest-1558206028791x336433982900797440) plugin to convert your Database object to JSON automatically. Please see the **Use-cases** section for the detailed tutorial.

### PDF API - Open Editor

This Action allows you to open the PDF Generator API editor from your Bubble application. The Action returns a data set where `editor_url` is a unique URL that loads the editor. You can redirect the user to the URL or show it in an iframe.

```
{ 
  "editor_url": "unique URL to load editor"
}
```
![PDF API - Open Editor](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-05-2215-35-55_tq6bsx.png)

##### Properties

**Template ID**  (required)
The ID of a template in PDF Generator API. It can be a static or a dynamic value from your application (e.g. database or form input). 

**Workspace**  (optional)
Workspace identifier in PDF Generator API. It can be a static text or a dynamic value from your application (e.g. database or form input).  You can use a unique identifier for each of your users to take advantage of our workspace logic. 

|| This value defaults to the **WORKSPACE** value you specified in the plugin configuration.

**Language**  (optional)
Allows you to open editor in a specific language - defaults to English (en).

**JSON data** (optional)
The JSON data is used to replace placeholders in your template. You can add static JSON or use Dynamic placeholders to send data from your application. If you want to send a Bubble Database object, you can use the [jsonNest](https://bubble.io/plugin/jsonest-1558206028791x336433982900797440) plugin to convert your Database object to JSON automatically. Please see the **Use-cases** section for the detailed tutorial.

### 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 at support@pdfgeneratorapi.com.

##### Open generated document or editor in a new tab

The ability to open links in a new tab is essential, and to achieve this, you can use the [Toolbox](https://bubble.io/plugin/toolbox-1488796042609x768734193128308700) plugin, which allows you to run `Javascript` and take advantage of `window.open` function. In the example below, we use the **Tooltbox Run javascript** action after **PDF API - Generate Document** command to open the generated document on a new page. You can do the same with the PDF API - Open Editor Action to open the editor in a new tab.

![Toolbox - Run javascript](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-05-2218-51-58_1f8pxap.png)

##### Use Bubble Database object as JSON data

It is possible to use your Bubble Database object (e.g. User, Company, Order etc.) as the data source for the generated document. If you want to send a Bubble Database object, you can use [jsonNest](https://bubble.io/plugin/jsonest-1558206028791x336433982900797440) plugin to convert your Database object to JSON automatically. The jsonNest plugin supports deeply nested objects and allows you to configure field names. Please see their documentation for more information.

For our [example app](https://bubble.io/page?type=page&name=orders&id=pdf-generator-api-demo&tab=tabs-2) we have created `Order` and `LineItem` Database objects and use the jsonNest plugin to convert the Database object to JSON before the document generation Action.

![PDF API - Generate Document from Database object](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-05-2215-46-08_4tol0o.png)

![Use jsoNest result as JSON data from PDF API](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-05-2218-41-04_2juc4y.png)

##### Send PDF document 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 PDF API - Generate Document Action with Output type set to base64 to attach the generated PDF file to an email.

You could use the [Bubble SendGrid plugin](https://bubble.io/plugin/sendgrid-1484327506287x474510747987607550) to easily create a Workflow that generates PDF from your database object and sends an email with an attachment.

![Send PDF document as email attachment](https://storage.crisp.chat/users/helpdesk/website/11e0e518fc48ce00/screenshot2021-05-2218-50-09_12zkknc.png)
---
### Related articles you may find helpful

* [Converting HTML to PDF - How to start?](/en/article/converting-html-to-pdf-how-to-start-1t3jshu/)
* [How to use the editor?](/en/article/how-to-use-the-editor-1a194yy/)
* [What is Expression Language?](/en/article/what-is-expression-language-1teiau6/)
