Skip to main content

Bubble.io Integration

Bubble.io is a no-code app development framework that lets you build web and mobile apps without writing any code. With the official APITemplate.io plugin for Bubble.io, you can generate PDFs and images directly from your Bubble app data — no coding required.

With this integration you can:

  • Generate PDFs (invoices, reports, certificates) from your Bubble app data
  • Generate images (social media graphics, product images) dynamically
  • Email the results to users by combining the plugin with Bubble's email action
tip

For the full step-by-step walkthrough with additional details, see the blog post: How to generate PDF documents and Images with Bubble.io

Prerequisites​

You need accounts on both services:

  1. Bubble.io — sign up at bubble.io
  2. APITemplate.io — sign up at app.apitemplate.io

Step 1 — Set up APITemplate.io​

Obtain your API key​

Log in to APITemplate.io, go to the API Integration tab, and copy your API key.

Copy your API key from the API Integration tab

Create a PDF template​

  1. Navigate to Manage Templates
  2. Click New PDF Template
  3. Give your template a name and select a base template (e.g. Sample Invoice Template 1)
  4. Click Create
  5. Copy the template ID from the Manage Templates page

Creating a PDF template

Create an image template​

  1. Click New Image Template and give it a name
  2. Select a base template (e.g. Instagram)
  3. Click Create
  4. Copy the template ID from the Manage Templates page

Creating an image template

Step 2 — Build your Bubble.io app​

Design the app layout​

Create a page with two sections — one for PDF generation and one for image generation. Each section needs:

  • A Multiline TextField for the user to enter data (JSON or key-value pairs)
  • An Input Field for the recipient email address
  • A Button to trigger generation

App design with PDF and image sections

Install the APITemplate.io plugin​

  1. In your Bubble editor, go to Plugins → Add plugins
  2. Search for APITemplate.io
  3. Install the APITemplate.io - PDF & Image API plugin
  4. Go to the API Keys section on the plugin page and paste your API key

Installing the APITemplate.io plugin

Step 3 — Generate PDFs​

Set up a workflow on the Generate PDF button:

  1. Double-click the button and select Start/Edit Workflow
  2. Click Click here to add an action → go to Plugins → select Generate PDF
  3. Configure the action:
FieldDescription
Template IDThe ID of your PDF template (from Manage Templates)
JSON DataMap to your Multiline TextField's value
ExpirationNumber of days the generated PDF remains accessible
RegionYour APITemplate.io region
FilenameDesired filename for the PDF
Export TypeSelect URL to receive a download link

Configure the Generate PDF action

  1. Add a second action — Send Email — and map the body to the Download URL from the Generate PDF result

Send email with the generated PDF link

Result​

When a user clicks Generate PDF, the workflow creates a PDF and emails the download link:

PDF generation demo

Step 4 — Generate images​

Set up a workflow on the Generate Image button following the same pattern:

  1. Double-click the button and select Start/Edit Workflow
  2. Click Click here to add an action → go to Plugins → select Generate Image
  3. Configure the action:
FieldDescription
Template IDThe ID of your image template
Payload TypeChoose JSON or Dictionary (key-value pairs)
PayloadMap keys from your template to values from the input field
ExpirationNumber of days the generated image remains accessible
RegionYour APITemplate.io region

Configure the Generate Image action

  1. Add a Send Email action and map the body to the Download URL from the Generate Image result

Result​

When a user clicks Generate Image, the workflow creates an image and emails the download link:

Image generation demo

Example use cases​

  • Invoicing app — user fills out invoice details in a form, workflow generates a PDF invoice, download URL is saved and displayed
  • Certificate generator — form submission triggers a personalized certificate PDF
  • Social media tool — user enters product data, workflow generates branded images for social media
  • Report builder — aggregate data in Bubble's database and generate a PDF report on demand

Tips​

  • Use the Dictionary payload type for image generation — it's simpler for flat key-value data
  • Use JSON payload type for PDF templates that need hierarchical or complex data
  • Combine the plugin with Bubble's built-in Send Email action to deliver generated files automatically
  • Store the download_url in your Bubble database so users can access their generated files later

Further reading​