Disclaimer: This article contains affiliate links. I may earn a small commission if you purchase something through my website.
In this Bubble tutorial, I’ll look at how you can use Bubble with PDF Otter to fill out PDF forms, such as invoices, questionnaires, customs forms, etc., and then download them directly from Bubble.
Watch the tutorial below or scroll down to the text version!
PDF Otter is a simple SaaS tool for filling out PDF forms. For example, if you’re building something in Bubble that requires completing a form that’s required to look like a specific document (such as customs declaration), PDF Otter can be very helpful.
This is how you can integrate the software with Bubble to do that:
- Get a PDF Otter account. It’s simple, just register here. Make sure you make a note of your API key – initially, it’ll be a free test one, you can request a production key later.
- Choose the PDF form you’d like to fill out and add it to your PDF Otter workspace by clicking “Add Template”. Then click “Edit” next to it.
- You’ll have your form on the page. Add the fields that need to be completed by the user on clicking anywhere on the document and dragging them to the right place. You can customise the font and size. Make sure to complete the Data Key – it’ll serve as the dynamic value that we’ll be using in the Bubble workflow.
- For any checkboxes on the form, add text fields. We’ll format them in Bubble.
- Once you’re done with the form, click “Save“ and then go to the dropdown “Create PDFs”. Choose “by API”. You’ll see a JSON schema that we’ll modify for Bubble.
- Create a new Bubble app and install the API connector plug-in. Then add a new API and give it a name (e.g. “NoCodingWithKate PDF Otter”. The authorisation type will be HTTP Basic Auth. For your username, copy and paste your PDF Otter API key, but leave the password field blank.
- Add a new API call and change the data type to “File”. Then add a header “Content-Type” with the value “application/json”.
- Change the cURL to “POST” and copy-paste the endpoint from the PDF Otter schema, without the \ at the end (e.g. ” https://www.pdfotter.com/api/v1/pdf_templates/tem_nzzy9rHbRqL4uJ/fill”).
- For the body of the request, your object will be “data” and it will contain they key-value pairings which will correspond to the data keys in the entries on your PDF Otter form. For example:
- As you can see, my body contained the “data” object and four key-value pairings. They will be dynamic values in Bubble, so make sure to put “< >” around the values. Once you’ve done so, enter your parameters below. Uncheck “Private” on all of them, but if you don’t need to make all the fields in your form mandatory for completion, you can check “Allow Blank” next to the relevant field.
- Click “Initialize Call”. If you’ve done everything correctly, nothing will happen. Now, we need to create a data type for our forms. Go to the “Data” tab and create a new type (I called it “PDF Forms”).
- Your data type will have four fields:
– “File”, which will be a file;
– “Title”, which will be text,
– “Link”, which will also be text,
– “Saved”, which will also be text.
- Create some input and checkbox fields on the design tab – the amount will depend on your form. For my form, I had two input fields, one multiline input field, and one checkbox. Give them names you can easy remember (e.g. name, organisation, Terms and Conditions, etc.).
- Add a Link element below your fields. We’re doing this because the PDF will be hosted on the AWS server and accessible via a link. Make the destination “External URL” but don’t specify it yet. Uncheck “This Element is Visible on Page Load”. Then, add a button below the link. Let’s call it “Generate PDF”.
- Now, let’s add some workflows on that button. Click “Start/Edit Workflow”. The first step will be to create a new thing, and the new thing will be “PDF Forms”, or whatever you named the data type.
- For the “File” parameter, choose “Get Data from an External API”, and select the PDF Otter API call you created. You’ll see a list of parameters taken from the JSON body. The dynamic data that will replace the dynamic values you wrote will come from the input fields you created on the Bubble page. For example: for the “Name” parameter, the data will be “Input Name’s Value”, for the “Organisation” parameter, it’ll be “Input Organisation’s Value”, etc.
- As you can see, for the checkboxes on the forms, we put “Checkbox [name] is checked:formatted as text. For the times it’s checked, i.e. the “Yes” value, you can put an “X” in the pop-up window. For the No, you can enter two spaces to avoid it resetting to a “Null” value.
- For the “Title” field, enter any title you want. For the “Link” field, copy the File field’s expression, paste it and add “URL” at the end. For the “Saved” field, copy the same expression and add “saved to S3” at the end. Type in any name you want in the pop-up.
- The second step of our workflow will be “Show Element”. And in this case, the element will be the link we put on the page.
- Return to the design tab and click on the “Link” element. In the “Destination URL”, specify the destination as the PDF Form’s last item’s Link.
- That’s it! Click “Preview” and enter your data in the forms, check the boxes you need to check, and click “Generate PDF”. You’ll see the Download link. Click on it.
- If everything is set-up correctly, your completed PDF form will be at the other end of the link. You can now download it!
Thanks to PDF Otter, we’re able to generate completed PDF forms in Bubble. Whatever your use case may be, you can make use of this integration.
You can also save these PDF forms as templates. For example, if you have a lot of similar PDF documents in your work, you can fill out one, save it in Bubble as a template and re-use it again and again to generate new ones.
Enjoyed this tutorial?
Subscribe to my channel and buy me a coffee!
Previous Bubble tutorials:
