> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pdfnoodle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bubble Integration

> Generate PDFs in your Bubble app using pdf noodle

Integrate pdf noodle with [Bubble](https://bubble.io) to generate PDFs directly from your no-code application. Create invoices, reports, certificates, and more without writing code.

## Prerequisites

Before you begin, make sure you have:

* A pdf noodle account ([sign up here](https://app.pdfnoodle.com/auth/sign-up))
* Your API key from [API Settings](https://app.pdfnoodle.com/settings/api)
* At least one template created in pdf noodle
* A Bubble app

***

## Setting Up the API Connector

Bubble connects to pdf noodle using the **API Connector plugin**.

<Steps>
  <Step title="Install API Connector">
    In your Bubble app, go to **Plugins** → **Add plugins** → Search for **API Connector** → **Install**
  </Step>

  <Step title="Add a New API">
    Open the API Connector plugin and click **Add another API**. Name it `pdfnoodle`.
  </Step>

  <Step title="Configure Authentication">
    Set up shared headers for all calls:

    | Key             | Value                 |
    | --------------- | --------------------- |
    | `Authorization` | `Bearer YOUR_API_KEY` |
    | `Content-Type`  | `application/json`    |

    Check **Private key in header** to keep your API key secure.
  </Step>

  <Step title="Add the Generate PDF Call">
    Click **Add another call** and configure:

    | Setting       | Value                                   |
    | ------------- | --------------------------------------- |
    | **Name**      | `generate_pdf`                          |
    | **Method**    | `POST`                                  |
    | **URL**       | `https://api.pdfnoodle.com/v1/pdf/sync` |
    | **Data type** | `JSON`                                  |
    | **Body type** | `JSON object`                           |
  </Step>

  <Step title="Set the Body Parameters">
    Add the request body:

    ```json theme={null}
    {
      "templateId": "<templateId>",
      "data": {
        "customerName": "<customerName>",
        "invoiceNumber": "<invoiceNumber>",
        "total": <total>
      }
    }
    ```

    Mark each parameter (e.g., `<templateId>`) as dynamic so you can pass values from your app.
  </Step>

  <Step title="Initialize the Call">
    Click **Initialize call** with test values to verify it works. You should see a response with the PDF URL.
  </Step>
</Steps>

***

## Finding Your Template ID

1. Go to [app.pdfnoodle.com](https://app.pdfnoodle.com)
2. Navigate to the **Templates** section
3. Copy the Template ID shown in the list next to your template

***

## Using in Workflows

Once the API is configured, use it in your Bubble workflows:

<Steps>
  <Step title="Add Workflow Trigger">
    Create a workflow triggered by a button click or other event.
  </Step>

  <Step title="Add API Action">
    Add action: **Plugins** → **pdfnoodle - generate\_pdf**
  </Step>

  <Step title="Map the Parameters">
    Set the dynamic values:

    | Parameter       | Value                                      |
    | --------------- | ------------------------------------------ |
    | `templateId`    | Your template ID (static or from database) |
    | `customerName`  | `Current User's name`                      |
    | `invoiceNumber` | `Current Order's id`                       |
    | `total`         | `Current Order's total`                    |
  </Step>

  <Step title="Use the Response">
    The result contains `signedUrl` with the PDF link. You can:

    * Display it in a link element
    * Open it in a new tab
    * Save it to your database
  </Step>
</Steps>

***

## Example: Download Invoice Button

Create a button that generates and downloads an invoice:

**Workflow:**

1. **When** Button "Download Invoice" is clicked
2. **Action** pdfnoodle - generate\_pdf
   * templateId: `your-invoice-template-id`
   * customerName: `Current User's name`
   * invoiceNumber: `Current Order's id`
   * total: `Current Order's total`
3. **Action** Open external website
   * URL: `Result of step 2's signedUrl`

***

## Displaying PDFs

You can display the generated PDF in your app:

**Using a Link:**

```
Link destination: Result of generate_pdf's signedUrl
```

**Using an iframe (for preview):**
Add an HTML element with:

```html theme={null}
<iframe src="PDF_URL_HERE" width="100%" height="600px"></iframe>
```

***

## Error Handling

<AccordionGroup>
  <Accordion title="API Call Fails">
    * Check your API key is correct
    * Verify the template ID exists
    * Ensure all required parameters are provided
    * Check the Bubble debugger for error details
  </Accordion>

  <Accordion title="Empty Response">
    * Make sure you initialized the API call
    * Check that the response is being captured correctly
    * Verify your pdf noodle account has available credits
  </Accordion>

  <Accordion title="Slow Response">
    * Large PDFs take longer to generate
    * Consider using the async endpoint for complex documents
    * Show a loading indicator while generating
  </Accordion>
</AccordionGroup>

***

## API Endpoints

| Endpoint                    | Description                               |
| --------------------------- | ----------------------------------------- |
| `POST /v1/pdf/sync`         | Generate PDF from template (synchronous)  |
| `POST /v1/pdf/async`        | Generate PDF from template (asynchronous) |
| `POST /v1/html-to-pdf/sync` | Convert HTML to PDF (synchronous)         |

<Info>
  See the complete [API Reference](/api-reference) for all endpoints and options.
</Info>

***

<Note>
  You can also generate PDFs using the API Connector plugin by calling the pdf noodle API directly. See the [API Reference](/api-reference) for all available endpoints and options.
</Note>

## Resources

* [Bubble Integration Page](https://pdfnoodle.com/integrations/bubble) - pdf noodle + Bubble overview
* [Bubble Automation Guide](https://pdfnoodle.com/blog/how-to-automate-pdf-generation-with-bubble-and-pdforge) - Step-by-step tutorial
* [Bubble Manual](https://manual.bubble.io) - Official Bubble docs
* [API Connector Guide](https://manual.bubble.io/core-resources/bubble-made-plugins/api-connector) - Bubble API Connector docs
* [pdf noodle API Reference](/api-reference) - Full API documentation