How to Integrate Whereby Video Conferencing with Bubble.io?

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": "<end date>"} where <end date> is a dynamic value

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: <iframe src="[Current Page's Meeting's URL]" allow="camera; microphone; fullscreen; speaker; display-capture" style="width: 100%; height: 500px;"></iframe>

3. Implement conditional logic for host vs. participant:

- Check if current user is the meeting creator

- If yes, use the host URL in the iframe

- If no, use the regular room URL

Security Best Practices for Whereby Integration

Securing your video conferencing implementation is crucial:

Implement proper privacy rules:

- Set up user authentication (registration and login)

- Create privacy rules to restrict meeting access based on user roles

- Make only essential meeting fields public (e.g., URL for joining)

- Keep host URLs strictly private to meeting creators

Manage API keys securely:

- Never expose your Whereby API key in client-side code

- Use different API keys for development and production

- Regularly rotate API keys for enhanced security

Whereby Pricing Considerations

When implementing Whereby with Bubble.io, consider these pricing aspects:

Whereby Embedded Plans:

- Free tier: Limited functionality, suitable for testing

- Pro plan: More features, higher participant limits, and longer meeting durations

- Enterprise: Custom solutions for larger organizations

Usage-based factors:

- Number of meeting minutes consumed

- Concurrent meetings

- Maximum participants per meeting

Additional costs:

- Recording features (if needed)

- Custom branding options

- API call volume

Always check Whereby's current pricing page for the most up-to-date information, as pricing models can change.

Alternative Video Conferencing Options for Bubble.io

While Whereby offers an excellent solution, consider these alternatives for comparison:

Zoom API:

- Pros: Widespread adoption, feature-rich, reliable

- Cons: More complex implementation, requires app download for optimal experience

Twilio Video:

- Pros: Highly customizable, robust infrastructure, pay-as-you-go pricing

- Cons: More technical to implement, potentially higher costs for high usage

Agora.io:

- Pros: Designed for developers, excellent performance in low-bandwidth situations

- Cons: Steeper learning curve, requires more technical knowledge

Daily.co:

- Pros: Simple API, browser-based like Whereby, good free tier

- Cons: Less name recognition, fewer enterprise features

Conclusion: Is Whereby Right for Your Bubble.io Project?

Whereby stands out as an excellent choice for Bubble.io developers seeking to implement video conferencing with minimal technical overhead. Its browser-based approach eliminates friction for users, while the straightforward API integration works well with Bubble's no-code philosophy.

The implementation process involves setting up your Bubble data structure, connecting to Whereby's API, creating a meeting creation workflow, and embedding the video interface in your app. With proper attention to security through privacy rules and user authentication, you can create a robust, secure video conferencing solution.

For most small to medium-sized applications, Whereby provides an ideal balance of simplicity, functionality, and cost-effectiveness. However, for enterprise applications with specific requirements around customization or security, comparing multiple options is recommended before making a final decision.

By following the implementation steps outlined in this guide, you can successfully integrate Whereby video conferencing into your Bubble.io application, enhancing its functionality without writing a single line of code.