Importly

Using Importly with Bubble

Integrate Importly's media import capabilities into your Bubble.io applications to download and process videos and audio from URLs. This guide walks you through setting up API connections and building workflows in Bubble.

What You Can Build

  • Video Management Platforms: Let users import videos from any URL
  • Content Curation Tools: Build libraries of imported media
  • Social Media Tools: Download and process videos for editing
  • Educational Platforms: Import course content from various sources
  • Media Archives: Create automated archiving systems

Prerequisites

  1. A Bubble.io account (free or paid)
  2. An Importly account with an API key
  3. Basic understanding of Bubble workflows and API calls

Setup Guide

Step 1: Install the API Connector Plugin

  1. In your Bubble editor, go to Plugins
  2. Click Add plugins
  3. Search for API Connector
  4. Install the API Connector plugin (built by Bubble)

Step 2: Configure Importly API Connection

  1. Go to Plugins → API Connector
  2. Click Add another API
  3. Name it: Importly

Step 3: Add Your API Key

  1. In the Importly API configuration, add a Shared header:
    • Key: Authorization
    • Value: Bearer YOUR_API_KEY_HERE
  2. Get your API key from Importly Dashboard

Step 4: Create Import API Call

Create a new API call for starting imports:

Call Name: Start Import

Type: POST

URL: https://api.importly.io/import

Headers:

  • Content-Type: application/json (add this in addition to Authorization)

Body type: JSON

Body:

json
1{
2  "url": "<video_url>",
3  "includeVideo": true,
4  "includeAudio": true,
5  "videoQuality": "1080p",
6  "audioQuality": "medium",
7  "webhookUrl": "<webhook_url>"
8}

Parameters to create:

  • video_url (text) - Make this a parameter by wrapping in < >
  • webhook_url (text, optional) - For receiving completion notifications

Click Initialize call and provide a test URL to set up the data structure.

Step 5: Create Check Status API Call

Call Name: Check Import Status

Type: GET

URL: https://api.importly.io/import/status?id=<job_id>

Parameters:

  • job_id (text)

Initialize this call with a test job ID.

Step 6: Create Metadata API Call (Optional)

For getting video information without downloading:

Call Name: Get Metadata

Type: GET

URL: https://api.importly.io/metadata?url=<video_url>

Parameters:

  • video_url (text)

Building Your Bubble Interface

Creating the Import Form

  1. Add an Input element for video URL

    • Placeholder: "Enter video URL (YouTube, Vimeo, etc.)"
    • Field name: input_video_url

  2. Add a Dropdown for video quality

    • Choices: 1080p, 720p, 480p, 360p
    • Default: 1080p
    • Field name: dropdown_quality

  3. Add a Button: "Import Video"

  4. Add a Text element to show status

    • Make it dynamic and initially hidden

Setting Up the Database

Create a new Data Type: Import

Fields:

  • job_id (text) - The Importly job ID
  • url (text) - Original video URL
  • status (text) - queued, processing, completed, failed
  • media_url (text) - Download link when complete
  • file_size (number) - Size in bytes
  • duration (number) - Duration in seconds
  • credits_used (number) - Credits charged
  • created_date (date)
  • completed_date (date)
  • error_message (text) - If failed

Workflow: Start Import

Create a workflow on the "Import Video" button:

Step 1: Call Importly API

  • Action: Plugins → Importly - Start Import
  • Parameters:
    • video_url: input_video_url's value
    • webhook_url: (leave empty or set up webhook endpoint)

Step 2: Create Database Record

  • Action: Data (Things) → Create a new thing
  • Type: Import
  • Fields:
    • job_id: Result of step 1's data jobId
    • url: input_video_url's value
    • status: "queued"
    • created_date: Current date/time

Step 3: Show Status Message

  • Action: Element Actions → Show status text
  • Set text value: "Import started! Job ID: [Result of step 1's data jobId]"

Step 4: Clear Input

  • Action: Element Actions → Reset input_video_url

Workflow: Check Status (Polling)

Create a recurring workflow to check status:

Create a Custom Event: Check Import Status

Step 1: Get Pending Imports

  • Action: Do a search for Imports
  • Constraints: status = "queued" or status = "processing"

Step 2: For Each Import

  • Use Schedule API Workflow on a list
  • List: Result of step 1
  • Workflow: Create another custom event below

Create Another Custom Event: Check Single Import

  • Parameter: import (Import data type)

Actions:

  1. Call Check Status API

    • API Call: Importly - Check Import Status
    • job_id: This import's job_id

  2. Update Import Record (Only when Result of step 1's data status = "completed")

    • Action: Data (Things) → Make changes to thing
    • Thing: This import
    • Changes:
      • status: Result of step 1's data status
      • media_url: Result of step 1's data result mediaUrl
      • file_size: Result of step 1's data result fileSize
      • duration: Result of step 1's data result duration
      • credits_used: Result of step 1's data result creditsUsed
      • completed_date: Current date/time

  3. Update Status for Other States

    • Add similar steps for "failed" status
    • Set error_message field if failed

Schedule the Status Checker

Create a Backend Workflow that runs every 30 seconds:

  1. Go to Backend workflows
  2. Create a recurring event
  3. Interval: Every 30 seconds
  4. Action: Trigger the Check Import Status custom event

Displaying Imports

Create a Repeating Group

  1. Add a Repeating Group
  2. Data source: Do a search for Imports
    • Sort by: created_date (descending)
  3. Layout: Depends on your design

Inside the Repeating Group

Add these elements:

  1. Text - Video URL

    • Value: Current cell's Import's url

  2. Text - Status badge

    • Value: Current cell's Import's status
    • Conditional formatting for colors

  3. Text - Progress info

    • Only show when: Current cell's Import's status = "completed"
    • Value: "Duration: " & Current cell's Import's duration & "s | Size: " & Current cell's Import's file_size / 1000000 & " MB"

  4. Link - Download button

    • Only show when: Current cell's Import's status = "completed"
    • Link: Current cell's Import's media_url
    • Text: "Download Video"

  5. Icon - Status indicator

    • Use conditional formatting to show different icons

Using Webhooks with Bubble (Advanced)

To receive real-time notifications when imports complete:

Step 1: Create Webhook Endpoint

  1. Go to Backend workflows
  2. Create a new API Workflow
  3. Name it: importly_webhook
  4. Set it as a Public API workflow
  5. Expose it as: POST

Step 2: Define Parameters

Add parameters:

  • type (text)
  • jobId (text)
  • status (text)
  • mediaUrl (text)
  • fileSize (number)
  • duration (number)
  • creditsUsed (number)
  • error (text, optional)

Step 3: Process Webhook Data

Add actions to the workflow:

  1. Search for Import

    • Search for: Imports
    • Constraint: job_id = jobId

  2. Update Import

    • Only when: type = "import.completed"
    • Update all relevant fields from parameters

Your webhook URL will be:

https://your-app.bubbleapps.io/version-test/api/1.1/wf/importly_webhook

Step 4: Use Webhook URL in Import Call

Update your "Start Import" API call to include:

json
1{
2  "webhookUrl": "https://your-app.bubbleapps.io/api/1.1/wf/importly_webhook"
3}

Example: Simple Video Importer App

Here's a complete example you can build in under 30 minutes:

Page 1: Import Form

  • Input for URL
  • Dropdown for quality
  • Import button
  • Status message

Page 2: My Imports

  • Repeating group showing all imports
  • Status badges
  • Download links for completed imports
  • Refresh button

Workflows:

  1. Start Import → Store in database
  2. Check Status (recurring) → Update database
  3. Delete import button → Remove record

Optimizing for Bubble's Workflow Units

  • API calls consume workflow units
  • Check status every 30-60 seconds (not every second)
  • Use webhooks to avoid constant polling
  • Implement pagination for large import lists
  • Cache completed imports to reduce searches

Common Use Cases in Bubble

1. User Content Library

Users can import videos to their personal library:

  • Each user has their own imports
  • Add privacy rules to show only current user's imports
  • Create collections/folders

2. Admin Content Management

Admin panel for importing content:

  • Admin-only page
  • Bulk import capabilities
  • Content moderation before publishing

3. Video Downloader Tool

Public tool for downloading videos:

  • Simple interface
  • No login required (or with login)
  • Show download history

4. Integration with Bubble's File Storage

Download and re-upload to Bubble:

  1. Get media URL from Importly
  2. Use plugin to download file
  3. Upload to Bubble's file storage
  4. Delete from Importly after 7 days

Error Handling

Add conditional workflows for errors:

When API Call Returns Error:

  • Check HTTP status code
  • Display user-friendly error message
  • Log error to database

Common Error Codes:

  • 401: Invalid API key → Check plugin configuration
  • 402: Insufficient credits → Show upgrade prompt
  • 429: Rate limit → Show "Try again later" message
  • 400: Invalid URL → Show validation error

Best Practices

  1. Input Validation: Validate URLs before calling API
  2. User Feedback: Show loading states and progress
  3. Error Messages: Display helpful error messages
  4. Rate Limiting: Don't let users spam the import button
  5. Credit Tracking: Show user's remaining credits
  6. Cleanup: Delete old imports to save database space
  7. Privacy: Set appropriate privacy rules on Import data type

Performance Tips

  1. Use Custom States for temporary data instead of database
  2. Limit repeating group items with pagination
  3. Use Only when conditions to prevent unnecessary API calls
  4. Index frequently searched fields in database
  5. Cache video metadata for faster loading

Pricing Considerations

  • Bubble: API calls count toward your workflow/capacity usage
  • Importly: Charged per MB downloaded
  • Strategy:
    • Use metadata endpoint to check size first
    • Implement credit balance checks
    • Show estimated cost before import

Example Conditional (Show Download Button)

Only show download button when complete:

Current cell's Import's status is "completed"
AND
Current cell's Import's media_url is not empty

Testing Your Integration

  1. Test with a short video first (YouTube video < 1 minute)
  2. Verify job ID is saved correctly
  3. Confirm status updates are working
  4. Check that download links work
  5. Test error cases (invalid URL, etc.)

Troubleshooting

API Calls Failing

  • Check API key is correct in plugin settings
  • Verify Bearer token format: Bearer YOUR_KEY (with space)
  • Initialize API calls with real test data

Status Not Updating

  • Ensure backend workflow is running
  • Check workflow unit consumption
  • Verify job_id is being saved correctly

Download Links Not Working

  • Links expire after 7 days
  • Check that media_url field is populated
  • Test link directly in browser

Webhook Not Receiving Data

  • Ensure API workflow is set to public
  • Check parameter names match exactly
  • Test webhook URL with a tool like Postman

Resources

Need Help?

ZapierMake.com