DEV Community

Cover image for ApyHub API Integration Guide for Bubble Developers
Sohail Pathan for ApyHub

Posted on • Originally published at apyhub.com

ApyHub API Integration Guide for Bubble Developers

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.

  • An ApyHub 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 the Plugins tab in your Bubble app.

  2. Search for and add the API Connector plugin.
    install-new-plugin-screen

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

word-to-pdf-extension

API 2: Convert HTML to Word

html-to-word-integration

API 3: Convert HTML to PDF

html-to-pdf-extension

API 4: Convert JSON to CSV

json-to-csv-integation

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).

document-converter-tool-screen


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.

calling-word-to-pdf-api

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.

save-and-display-the-result

final-app

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 other ApyHub APIs.

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

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay