How to integrate with Bubble?

Introduction

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

Install PDF Generator API Bubble Plugin
Example application Demo
Example application Editor
Example documents

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. You can use the free Sandbox Account for 3 months 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

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.

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"
}

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 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"
}

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

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

Send PDF document 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 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 to easily create a Workflow that generates PDF from your database object and sends an email with an attachment.

Updated on: 01/06/2021