Introduction

This guide will help Bubble developers integrate ApyHub APIs into their applications. ApyHub provides a suite of APIs for file conversion, data transformation, and more. In this guide, you’ll learn how to set up and use the following APIs in Bubble:

1. Convert Word to PDF

2. Convert HTML to Word

3. Convert HTML to PDF

4. Convert JSON to CSV

Prerequisites

Before you begin, ensure you have the following:

• A Bubble account to create and edit apps.

• AnApyHub account to obtain your API token.

• Basic familiarity with Bubble’s interface, workflows, and API connector.

Setting Up the API Connector

Step 1: Add the API Connector Plugin

1. Go to thePlugins tab in your Bubble app.

2. Search for and add theAPI Connector plugin.
   

Step 2: Configure the APIs

For each API, create a new API call in the API connector. Below are the details for each API.

API 1: Convert Word to PDF

• Endpoint:https://api.apyhub.com/convert/word-file/pdf-url

• Method:POST

• Headers:

  • Content-Type:application/json
  • apy-token:Your_ApyHub_Token

API 2: Convert HTML to Word

• Endpoint:https://api.apyhub.com/convert/html-file/doc-url

• Method:POST

• Headers:

  • Content-Type:application/json
  • apy-token:Your_ApyHub_Token

API 3: Convert HTML to PDF

• Endpoint:https://api.apyhub.com/convert/html-file/pdf-url

• Method: POST

• Headers:

  • Content-Type:application/json
  • apy-token:Your_ApyHub_Token

API 4: Convert JSON to CSV

• Endpoint:https://api.apyhub.com/convert/json-raw/csv-url

• Method:POST

• Headers:

  • Content-Type:application/json
  • apy-token:Your_ApyHub_Token

Building the Workflow

Step 1: Create the UI

1. Add the following elements to your Bubble app:

• File upload input.

• Dropdowns for input and output formats.

• Buttons to trigger conversions.

• Input for JSON input.

• Display areas for results (e.g., download links).

Step 2: Set Up Workflows

For each API, create a workflow that triggers when the user clicks the "Convert" button. Here’s how:

1. Get File:

• Use the file upload element to get the file.

1. Call the API:

• Use the API connector to call the appropriate API.

• Pass the file URL or JSON data as the request body.

For JSON to CSV

1. Save and Display the Result:

• Save the API response (e.g., converted file URL) in a Bubble data type.

• Display the result (e.g., a download link) to the user.

Conclusion

Congratulations! You’ve successfully integrated ApyHub APIs into your Bubble app. This guide covered the setup for four APIs, including file conversion and JSON to CSV transformation. You can now expand the app’s functionality by exploring otherApyHub APIs.

Link to our demo app:https://apyhub-integration.bubbleapps.io/version-test