
Integrate pdfRest with Bubble to Automate PDF Workflows
Bubble.io is a powerful no-code/low-code platform that lets you build and launch fully functional web applications visually, without writing any traditional code. Using its built-in API Connector plugin, you can connect your app to external APIs like pdfRest to create powerful, automated document workflows.
To get started, sign up for a free Starter account with pdfRest to generate your dedicated API Key. You’ll use this key to authenticate requests from Bubble.io.
Tutorial: Enhancing Your Bubble App with pdfRest
Objective
This tutorial will demonstrate how to:
- Install and configure the Bubble.io API Connector for pdfRest.
- Create Bubble visual elements for file upload and action buttons.
- Call pdfRest APIs for Upload, Convert to PDF/A, and Merge PDFs.
- Configure workflows to trigger the API calls and provide links to download your new files.
Step 1: Install and Configure the API Connector Plugin
- In the Bubble Editor, open the Plugins tab, and select Add plugins.
- Search for and install the API Connector.
- Create a new API named
pdfRest
.
In the API setup:
- Add a Shared header for authentication:
- Key =
Api-Key
- Value = your pdfRest API key
- Check the box to mark this as PRIVATE
- Key =
- For each endpoint, add a new POST call:
- Upload API →
POST https://api.pdfrest.com/upload
- Convert to PDF/A API →
POST https://api.pdfrest.com/pdfa
- Merge PDFs API →
POST https://api.pdfrest.com/merged-pdf
- Upload API →
- Set the Body type as Multipart/form-data
- Ensure responses are returned in JSON for easy parsing
Step 2: Define Your Desired API Endpoint Parameters
Each endpoint requires specific parameters in its API call. Click the name of the APIs below for direct links to their documentation.
- Upload API
- Parameters
file
: The file to be uploaded to the pdfRest serverurl
: The URL of a file publicly available on the internet to upload to the pdfRest server
- Parameters
- Convert to PDF/A API
- Parameters:
- One of:
file
: The file to be sent in the request's form data (dynamic)id
: Theid
of the uploaded file on the pdfRest server (dynamic)
output_type
: The desired PDF/A type for the output file (optional)rasterize_if_errors_encountered
: Whether a page should be rasterized in the event an error is encountered (optional)output
: The name of the output file (optional)
- One of:
- Parameters:
- Merge PDFs API
- Parameters
id
: The list of file id's uploaded to the pdfRest server- For
id
's value, use<idX>
whereX
is the number of the file, as shown in the image below. You may use as many<idX>
's as you like, but remember to include the same amount of values for thetype
andpages
lists!
- For
type
: The list of input types for the given documents- Either
file
orid
, but for the purposes of this example they will all beid
- Either
pages
: What pages of each document should be in the final merged document (for this example,1-last
uses all pages).
- Parameters
If you'd like to use a tool that isn't explicitly shown here, most tools can be easily added simply by defining the parameters as shown in the pdfRest API Toolkit Reference Guide.
Step 3: Create Visual Elements in Bubble
- On your page, drag out a Group. This will contain the UI for the file action.
- Inside the Group, add a File Uploader element. This lets users select a PDF. For merging PDFs, use two or more File Uploader elements.
- Add a Dropdown if you want the user to select options (e.g., PDF/A conformance level via the
output_type
parameter). - Add a Button (e.g. “Convert to PDF/A” or “Merge PDFs”).
These elements will connect to workflows that call the pdfRest API.
A simple visual implementation of Convert to PDF/A might look like the following:
For defining the options in the drop down, make sure to match the values exactly as defined in the Convert to PDF/A documentation.
A simple implementation of a Merge PDFs workflow might look like the following:
Note that this uses two File Uploader components. You can customize this with as many as required for your particular implementation.
Step 4: Configure Workflows
For each button, create a Workflow that connects the visual elements to the API calls:
Convert to PDF/A Workflow
A workflow for Convert to PDF/A might look like the following:
To accomplish this, define the following:
- Click the + button, hover over Plugins, and select
pdfRest - PDF/A
from the options. - Pass the
file
from theFileUploader
for yourPDF/A
group. - Also pass the
output_type
value from theDropdown
element you created earlier- Include any other optional values, such as
rasterize_if_errors_encountered
if you'd like to dynamically change the value from its default.
- Include any other optional values, such as
- Finally, click the + button again and choose Navigation -> Open an external website
- Here, you can use the
Result of step 1 (pdfRest - PDF/A)'s outputUrl
- If configured in this way, it will open the processed PDF into a new tab
- Here, you can use the
Merge PDFs Workflow (Backend)
A Workflow for Merge PDFs might look like the following:
Before any other configuration, we'll define a new Data type called OutputFile
. This will contain the url
of the processed output file.
- Choose the Data tab in the navigation on the left side of the screen
- In the New type field, enter
OutputFile
- Add a Field on
OutputFile
calledurl
Back in the Workflow tab, define the following:
- Click the + button, then choose Plugins ->
pdfRest - Upload
. - Set either the
url
orfile
parameter to the user inputs (for the purposes of this example,file
is used).- Repeat the above step for however many files the user is merging together.
- Click the + button, then choose Plugins ->
pdfRest - Merge
. - Define the
id
for each uploaded file withResult of step X (pdfRest - Upload)'s files: first item's id
.- Make sure you choose
first item's id
, as there will always only be one item in thefiles
array from each Upload call. - Note that for the purposes of this example, there are only two files, but this can be expanded to your needs.
- Make sure you choose
- To use a Download File button, click the + button and choose, Data (Things) ->
Create a new thing...
- Choose the Data type
OutputFile
that was defined earlier - Set the
url
to be equal toResult of step 3 (pdfRest - Merge)'s outputUrl
- Choose the Data type
- Finally, click the + button and choose, Element Actions ->
Display data in a group/popup
- Set the Element to
Group OutputFile
, and Data to Display asResult of Step 4 (Create a new OutputFile...)
- Set the Element to
When configured correctly, the Download button should then take you to the URL of the newly merged documents.
Conclusion
By installing the API Connector, creating visual elements, and configuring workflows, you’ve now linked Bubble.io to the pdfRest API Toolkit's Upload, PDF/A, and Merge PDFs endpoints. The pdfRest API Toolkit includes many tools for Compression, Security, Digital Signatures, and so much more that can be connected in similar fashion.
Once you’ve mastered this foundation, you can extend your Bubble.io app into a complete document automation platform! Sign up for a free pdfRest Starter account and start exploring the possibilities.