What is Whereby and Why Use It with Bubble.io?
Whereby is a versatile, browser-based video conferencing solution that can be seamlessly integrated with no-code platforms like Bubble.io. For Bubble developers looking to add video conferencing capabilities to their applications without diving into complex code, Whereby offers a powerful embedded API that makes implementation straightforward and efficient.
The key advantages of using Whereby with Bubble.io include:
Browser-based operation - No downloads required for participants, making it accessible for all users
Embeddable interface - Can be integrated directly into your Bubble app's UI
Host and participant roles - Different permission levels for meeting control
API-driven integration - Can be connected using Bubble's API Connector plugin
Technical Implementation: Connecting Whereby to Bubble.io
Implementing Whereby video conferencing in your Bubble application involves several key steps. Here's a comprehensive guide to setting up the integration:
Step 1: Setting Up Your Bubble App Structure
Before connecting to Whereby, you'll need to prepare your Bubble app:
Create necessary data types - Set up a "Meeting" data type with fields such as:
- Label (for meeting title)
- Starts At (date/time)
- URL (to store Whereby room URL)
- Host URL (for host-specific access)
- Meeting ID (to reference the Whereby meeting)
Design your interface - Create pages and elements for:
- Meeting creation form
- Meeting listing (using Repeating Groups)
- Meeting room page (where the video conference will be embedded)
Step 2: Setting Up the Whereby API Connection
To connect your Bubble app with Whereby:
1. Sign up for Whereby's embedded API - Visit Whereby's website to sign up for embedded API access
2. Install the API Connector plugin - Add the API Connector plugin to your Bubble app
3. Configure the API connection:
- Create a new API and name it "Whereby Embedded"
- Set Authentication to "Private key in header"
- Enter "Authorization" as the header name
- Use "Bearer [your-API-key]" as the value (capitalization matters)
4. Create an API call for meeting creation:
- Endpoint: https://api.whereby.dev/v1/meetings
- Method: POST
- Body: JSON format with required parameters (at minimum, the end date)
- Example: {"endDate": "
Step 3: Implementing Meeting Creation Workflow
With your API configured, create a workflow to generate new meetings:
1. Add API call to your "Create Meeting" workflow:
- Place the Whereby API call at the beginning of the workflow
- Format the end date parameter properly (ISO format is recommended)
- Set the end date to be 1 hour (or your preferred duration) after the start time
2. Save the Whereby meeting details to your database:
- Store the room URL (for participants)
- Store the host URL (for meeting creators)
- Save the meeting ID and other relevant information
Step 4: Embedding the Video Conference
To display the actual video conference in your app:
1. Create a meeting page with dynamic content:
- Set the page type to "Meeting"
- This allows Bubble to load the specific meeting when accessed
2. Add an HTML element to embed the Whereby interface:
- Insert an HTML element on your meeting page
- Add the iframe code from Whereby documentation
- Dynamic HTML content: