Add Text, Images, and Signatures in a PDF using Bubble API Connector

Step 1 – Open My Templates

To get started, go to the My templates tab and click on the New Template button.

Step 2 – Create New Template

Fill out the template creation form and click on Create template.

Step 3 – Open New Template

Now, click on the Edit icon to open the template.

Step 4 – Start with a Blank Page

Click on the Start with a blank page button and close the assistant.

Step 5 – Add Elements

Let’s add four input elements for the Source URL, Annotation Strings, Images Strings, and Async and a button to submit the request.

Step 6 – Add Plugin

Let’s go to the Plugins tab and add a plugin.

Step 7 – Install API Connector

Look up the API Connector and click on the Install button.

Step 8 – Add API

Once the API Connector is installed, click on the Add another API button.

Step 9 – Set up API Connector

Let’s configure the API Connector.

• In the API Name field, type in PDF.co PDF Editor or your preferred API Name.
• In the Name field, enter PDF Editor or your preferred Name.
• In the Use as dropdown box, select the Action option.
• In the Data type dropdown box, leave it to the default JSON or choose your preferred Data type.
• Select POST and enter the PDF.co Editor Web API endpoint https://api.pdf.co/v1/pdf/edit/add. You can find more information about the API in the documentation.
• Under Headers, add x-api-key as the Key with your PDF.co API Key as the Value. You can get your API Key login to pdf.co app.
• Also under Headers, add accept as the Key and application/json as the Value.

Step 10 – Add Parameters

Let’s add the PDF.co PDF Editor parameters.

• In the first Key field, enter the URL parameter, and the value https://bytescout-com.s3-us-west-2.amazonaws.com/files/demo-files/cloud-api/pdf-to-text/sample.pdf and tick off the Queryst check box.
• In the second Key field, type in the annotationsString parameter, the value 150;100;0;Sample Text, and tick off the Queryst check box.
• In the third Key field, type in the imagesString parameter, the value 100;180;0-;bytescout-com.s3-us-west-2.amazonaws.com/files/demo-files/cloud-api/pdf-edit/logo.png, and tick off the Queryst check box.
• In the fourth Key field, type in the async parameter, the value false, and tick off the Queryst check box.
• Add a checkmark to the Capture response headers check box and click on the Initialize call button.

Step 11 – Initialize Call Result

When the API Connector is set up correctly, PDF.co PDF Editor will return the sample values below.

Step 12 – Add Event

Now, go to the Workflow tab and click on the box to add an event. Select the Elements, and An element is clicked options.

Step 13 – Add Action

Click on the add an action button and choose the PDF.co PDF Editor – PDF Editor plugin.

Step 14 – Map Dynamic Values

Let’s map the Input elements’ dynamic values with the PDF Editor parameters.

• In the url field, select the Input Enter Source URL’s value.
• In the annotationsString field, select the Input Annotation String’s value.
• In the imagesString field, select the Input Images String’s value.
• In the async field, select the Input Async’s value.

Step 15 – Set Destination

Now, select the Open an external website in the next step and choose the PDF Editor’s body URL result in the Destination field.

Step 16 – Preview

Click on the Preview button.

Step 17 – Add Text, Images, and Signatures

Enter the sample PDF link, text to insert, image to insert, and async value. Then, click the Edit PDF button.

Step 18 – Edited PDF Result

Here’s what the Edited PDF output looks like.