How do I embed video calls in Tadabase?

In this episode, we'll learn how to embed a video call platform inside your Tadabase application using:

• Connection Fields
• Custom Component
• Whereby

Features Discussed:

1. Whereby (Time: 2:33)
   Learn how to integrate Whereby, a video conferencing tool, into your application. For example, embed live video meetings directly into your platform, allowing users to start or join virtual meetings seamlessly, ideal for remote consultations or team meetings.
2. Connection Fields (Time: 8:52)
   Learn how to structure relationships across three tiers: Rooms, Meetings, and Meeting Invitations. For example, set up a system where each Room hosts multiple Meetings, and each Meeting has several Invitations, ensuring all components are logically linked for better event management.
3. Rollup (Time: 12:03)
   Learn how to use a Rollup field to count records in the Meeting Invitations table and establish connections between related data. For example, create a Rollup field to calculate the total number of invitations sent for each meeting, providing an overview of participant engagement.
4. Form Component (Time: 14:51)
   Learn how to manage meeting invitations with a form component, including adding custom fields like status or guest notes. Implement record rules to automate tasks such as sending confirmation emails or updating meeting status based on responses.
5. Record Rules (Time: 16:29)
   Learn how to set up a form component to add new meetings, allowing automatic insertion and updating of records using record rules. For example, when scheduling a new meeting, configure the form to update existing records, send notifications, or set reminders.
6. Table Component with Conditional Filtering (Time: 23:56)
   Learn how to configure a table component to filter data based on whether the meeting is hosted by the logged-in user. For example, display all relevant columns for hosts, including a "Join as Participant" column, while hiding it for non-hosts.
7. Custom Component (Time: 28:16)
   Learn how to create a custom component that displays detailed meeting information for invitations and integrates with Whereby for seamless video conferencing. This component can show meeting details like agenda, participants, and scheduled time, with a direct link to join via Whereby.

Transcript Summary

Introduction

Hey everybody, welcome back to another episode of Build It with Tadabase. In this week's episode, we're talking about embedding video calls inside your Tadabase applications. This build will function as a module that you can integrate into your existing application. If you want to offer video calls for you and your teammates directly inside your app, this tutorial is for you.

We'll be using basic Tadabase techniques like connection fields, custom components, and leveraging a service called Whereby for the embedded video calls.

Overview of the System

The system we're building is a module for embedding video calls within an application. This approach uses services like Whereby for embedding, allowing you to host video calls directly in your Tadabase app. The service was suggested by a user, and we'll walk you through how to embed it into your app.

You could use other platforms like Zoom if they allow embedding, but today we're focused on Whereby.

Finished Module Preview

Let’s first look at the finished module before we dive into building it. On this page, we can see a list of meeting invitations. Users can join meetings hosted by them or by others. By clicking “Join as Host,” a video call is embedded directly into the app, allowing you to participate in a meeting without leaving your Tadabase environment.

Setting Up the Data Tables

Step 1: Creating the Rooms and Meetings Tables

We need to create two tables:

1. Rooms Table: This table will track rooms that are created in Whereby.
2. Meetings Table: This table will be associated with a room and track the details of individual meetings.

Step 2: Adding Fields to the Rooms Table

The Rooms table will store data like:

• Room name
• Host link
• Participant link
• End date
• Room size (e.g., 2-4 or 2-200 participants)
• Whether the room is locked

Step 3: Adding Fields to the Meetings Table

The Meetings table will store:

• Meeting name
• Date and time
• Hosted by (linked to users)
• Host and participant links (pulled from the room table)

Step 4: Creating Meeting Invitations Table

Next, we create a table for meeting invitations. Each invitation will be linked to:

• A user
• A meeting
• A room
• Whether the user is attending (yes, no, maybe)

Building the Pages

We’ll create three essential pages:

1. Rooms Page: Where admins can create new rooms.
2. Meetings Page: A page to create meetings associated with rooms.
3. Meeting Invitations Page: Where users can send invitations to meetings and track responses.

Detail Pages

We’ll set up two detailed pages:

• Join as Host: Embeds the host link for the meeting.
• Join as Participant: Embeds the participant link.

Adding the Custom Component

We’ll be embedding Whereby rooms using a custom component. You can embed the video call using Whereby’s embed element, which loads the room based on the host or participant link.

In the custom component, we'll reference the Whereby URL and dynamically pull in the host or participant link based on the user's role in the meeting.

Final Touches: Adding Filters and Notifications

To ensure that users only see meetings they are part of, we’ll add filter tabs:

• Hosted by Me: Shows meetings hosted by the logged-in user.
• Hosted by Others: Shows meetings hosted by others.

Lastly, we’ll add a notification system to send an email when someone is invited to a meeting.

Conclusion

That's it for this episode of Build It with Tadabase! We've built a module that integrates Whereby video calls into your Tadabase application. You can expand this further by adding real-time notifications or integrating other video services. Let me know how you plan to use this in your applications, and feel free to reach out with any questions.