Skip to content

Commit e2be8a5

Browse files
datalogics-ericsdatalogics-erics
authored
Create README.md
Add Bubble.io tutorial
1 parent d67b122 commit e2be8a5

File tree

1 file changed

+172
-0
lines changed

1 file changed

+172
-0
lines changed

‎Bubble.io/Advanced Integrations/README.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
![Integrate pdfRest with Bubble to Automate PDF Workflows](https://cms.pdfrest.com/content/images/2025/09/Solution-Integrate-pdfRest-with-Bubble-Automation.png)
2+
3+
# Enhancing Your Bubble App with pdfRest
4+
5+
[Bubble.io](https://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.
6+
7+
To get started, [sign up for a free Starter account](https://pdfrest.com/getstarted/) with pdfRest to generate your dedicated API Key. You’ll use this key to authenticate requests from Bubble.io.
8+
9+
---
10+
11+
## Objective
12+
13+
This tutorial will demonstrate how to:
14+
15+
1. Install and configure the Bubble.io **API Connector** for pdfRest.
16+
2. Create Bubble visual elements for file upload and action buttons.
17+
3. Call pdfRest APIs for **Upload**, **Convert to PDF/A**, and **Merge PDFs**.
18+
4. Configure workflows to trigger the API calls and provide links to download your new files.
19+
20+
---
21+
## Step 1: Install and Configure the API Connector Plugin
22+
23+
- In the Bubble **Editor**, open the **Plugins** tab, and select **Add plugins**.
24+
- Search for and install the **API Connector**.
25+
- Create a new API named `pdfRest`.
26+
27+
In the API setup:
28+
29+
- Add a **Shared header** for authentication:
30+
- **Key** = `Api-Key`
31+
- **Value** = your pdfRest API key
32+
- Check the box to mark this as **PRIVATE**
33+
34+
![Bubble API Connector.png](https://cms.pdfrest.com/content/images/2025/09/Bubble-API-Connector.png)
35+
36+
- For each endpoint, add a new POST call:
37+
- **Upload API** → `POST https://api.pdfrest.com/upload`
38+
- **Convert to PDF/A API** → `POST https://api.pdfrest.com/pdfa`
39+
- **Merge PDFs API** → `POST https://api.pdfrest.com/merged-pdf`
40+
- Set the **Body type** as **Multipart/form-data**
41+
- Ensure responses are returned in JSON for easy parsing
42+
43+
---
44+
## Step 2: Define Your Desired API Endpoint Parameters
45+
46+
Each endpoint requires specific parameters in its API call. Click the name of the APIs below for direct links to their documentation.
47+
48+
- [**Upload API**](https://pdfrest.com/apitools/upload-files/)
49+
- Parameters
50+
- `file`: The file to be uploaded to the pdfRest server
51+
- `url`: The URL of a file publicly available on the internet to upload to the pdfRest server
52+
53+
![Upload API configuration.png](https://cms.pdfrest.com/content/images/2025/09/Upload-API-configuration.png)
54+
55+
- [**Convert to PDF/A API**](https://pdfrest.com/apitools/convert-to-pdfa/)
56+
- Parameters:
57+
- One of:
58+
- `file`: The file to be sent in the request's form data (dynamic)
59+
- `id`: The `id` of the uploaded file on the pdfRest server (dynamic)
60+
- `output_type`: The desired PDF/A type for the output file (optional)
61+
- `rasterize_if_errors_encountered`: Whether a page should be rasterized in the event an error is encountered (optional)
62+
- `output`: The name of the output file (optional)
63+
64+
![PDF:A API configuration.png](https://cms.pdfrest.com/content/images/2025/09/PDF-A-API-configuration.png)
65+
66+
- [**Merge PDFs API**](https://pdfrest.com/apitools/merge-pdfs/)
67+
- Parameters
68+
- `id`: The list of file id's uploaded to the pdfRest server
69+
- For `id`'s value, use `<idX>` where `X` 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 the `type` and `pages` lists!
70+
- `type`: The list of input types for the given documents
71+
- Either `file` or `id`, but for the purposes of this example they will all be `id`
72+
- `pages`: What pages of each document should be in the final merged document (for this example, `1-last` uses all pages).
73+
74+
![Merge API configuration.png](https://cms.pdfrest.com/content/images/2025/09/Merge-API-configuration.png)
75+
76+
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](https://docs.pdfrest.com/pdfrest-api-toolkit-cloud/api-reference-guide/).
77+
78+
---
79+
## Step 3: Create Visual Elements in Bubble
80+
81+
1. On your page, drag out a **Group**. This will contain the UI for the file action.
82+
2. Inside the **Group**, add a **File Uploader** element. This lets users select a PDF. For merging PDFs, use two or more **File Uploader** elements.
83+
3. Add a **Dropdown** if you want the user to select options (e.g., *PDF/A conformance level* via the `output_type` parameter).
84+
4. Add a **Button** (e.g. “Convert to PDF/A” or “Merge PDFs”).
85+
86+
These elements will connect to workflows that call the pdfRest API.
87+
88+
A simple visual implementation of Convert to PDF/A might look like the following:
89+
90+
![Convert to PDF:A.png](https://cms.pdfrest.com/content/images/2025/09/Convert-to-PDF-A-1.png)
91+
92+
For defining the options in the drop down, make sure to match the values *exactly* as defined in the [Convert to PDF/A documentation](https://docs.pdfrest.com/pdfrest-api-toolkit-cloud/api-reference-guide/#/pdfa).
93+
94+
![PDF:A Dropdown configuration.png](https://cms.pdfrest.com/content/images/2025/09/PDF-A-Dropdown-configuration.png)
95+
96+
A simple implementation of a Merge PDFs workflow might look like the following:
97+
98+
![Merge PDF.png](https://cms.pdfrest.com/content/images/2025/09/Merge-PDF.png)
99+
100+
Note that this uses *two* **File Uploader** components. You can customize this with as many as required for your particular implementation.
101+
102+
---
103+
## Step 4: Configure Workflows
104+
105+
For each button, create a **Workflow** that connects the visual elements to the API calls:
106+
107+
#### Convert to PDF/A Workflow
108+
109+
A workflow for Convert to PDF/A might look like the following:
110+
111+
![PDF:A flow.png](https://cms.pdfrest.com/content/images/2025/09/PDF-A-flow.png)
112+
113+
To accomplish this, define the following:
114+
- Click the **+** button, hover over **Plugins**, and select `pdfRest - PDF/A` from the options.
115+
- Pass the `file` from the `FileUploader` for your `PDF/A` group.
116+
- Also pass the `output_type` value from the `Dropdown` element you created earlier
117+
- Include any other optional values, such as `rasterize_if_errors_encountered` if you'd like to dynamically change the value from its default.
118+
119+
![PDF:A Parameters.png](https://cms.pdfrest.com/content/images/2025/09/PDF-A-Parameters.png)
120+
121+
- Finally, click the **+** button again and choose **Navigation** -> **Open an external website**
122+
- Here, you can use the `Result of step 1 (pdfRest - PDF/A)'s outputUrl`
123+
- If configured in this way, it will open the processed PDF into a new tab
124+
125+
![PDF:A URL destination.png](https://cms.pdfrest.com/content/images/2025/09/PDF-A-URL-destination.png)
126+
127+
#### Merge PDFs Workflow (Backend)
128+
129+
A **Workflow** for Merge PDFs might look like the following:
130+
131+
![Merge PDFs flow.png](https://cms.pdfrest.com/content/images/2025/09/Merge-PDFs-flow.png)
132+
133+
Before any other configuration, we'll define a new **Data type** called `OutputFile`. This will contain the `url` of the processed output file.
134+
- Choose the **Data** tab in the navigation on the left side of the screen
135+
- In the **New type** field, enter `OutputFile`
136+
137+
![New type.png](https://cms.pdfrest.com/content/images/2025/09/New-type.png)
138+
139+
- Add a **Field** on `OutputFile` called `url`
140+
141+
![Data type Define OutputFile.png](https://cms.pdfrest.com/content/images/2025/09/Data-type-Define-OutputFile.png)
142+
143+
Back in the **Workflow** tab, define the following:
144+
- Click the **+** button, then choose **Plugins** -> `pdfRest - Upload`.
145+
- Set either the `url` or `file` parameter to the user inputs (for the purposes of this example, `file` is used).
146+
- Repeat the above step for however many files the user is merging together.
147+
148+
![Merge PDFs upload files.png](https://cms.pdfrest.com/content/images/2025/09/Merge-PDFs-upload-files.png)
149+
150+
- Click the **+** button, then choose **Plugins** -> `pdfRest - Merge`.
151+
- Define the `id` for each uploaded file with `Result of step X (pdfRest - Upload)'s files: first item's id`.
152+
- Make sure you choose `first item's id`, as there will always only be one item in the `files` array from each Upload call.
153+
- Note that for the purposes of this example, there are only two files, but this can be expanded to your needs.
154+
155+
![Merge PDFs ids.png](https://cms.pdfrest.com/content/images/2025/09/Merge-PDFs-ids.png)
156+
157+
- To use a **Download File** button, click the **+** button and choose, **Data (Things)** -> `Create a new thing...`
158+
- Choose the **Data type** `OutputFile` that was defined earlier
159+
- Set the `url` to be equal to `Result of step 3 (pdfRest - Merge)'s outputUrl`
160+
- Finally, click the **+** button and choose, **Element Actions** -> `Display data in a group/popup`
161+
- Set the **Element** to `Group OutputFile`, and **Data to Display** as `Result of Step 4 (Create a new OutputFile...)`
162+
163+
![Display Data in Group OutputFile.png](https://cms.pdfrest.com/content/images/2025/09/Display-Data-in-Group-OutputFile.png)
164+
165+
When configured correctly, the **Download** button should then take you to the URL of the newly merged documents.
166+
167+
---
168+
### Conclusion
169+
170+
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.
171+
172+
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](https://pdfrest.com/getstarted/) and start exploring the possibilities.

0 commit comments

Comments
 (0)