Extend the plugin

This guide is intended for advanced users who want to extend the functionality of the Daily plugin for Bubble by adding custom API calls. In this example, we’ll show how to include meeting session information, but the same approach can be used for any API call available in Daily’s documentation that isn’t already included in the plugin. If you’re new to the plugin, we recommend starting with this beginner tutorial.

For a video guide, you can watch the Youtube tutorial.

Otherwise, continue reading for detailed instructions.

​

1. Access the Plugins Tab

To get started, navigate to the Plugins tab in your Bubble app. This is where you will manage and install plugins, including the API Connector for extending the Daily plugin.

​

2. Install the API Connector Plugin

If you haven’t already installed the API Connector plugin, follow these steps:

1. Click ‘Add Plugins’ in the plugin management interface.
2. Search for ‘API Connector’.
3. Click ‘Install’ to add it to your app.

​

3. Configure a New API

Once the API Connector is installed, you’ll need to configure a new API call. Click ‘Add another API’ to begin the setup process.

​

4. Fill Out API Header Details

Configure the API call header to authenticate your Daily API requests:

1. API Name: Choose a memorable name for this API integration.
2. Authentication: Set this to ‘Private key in header’.
3. Key: Use ‘Authorization’ for the key.
4. Key Value: Enter ‘Bearer [Your API Key]‘. You can find your API key on your Daily developer dashboard.
5. Click ‘Expand’ to configure the API call details.

​

5. Set Up the API Call

Now, you’ll set up the actual API call:

1. Name: Give the API call a clear name, such as ‘Get Meeting Info’.
2. Use as: Select ‘Action’ if you’ll use this in a workflow, or ‘Data’ to use it as a data source.
3. Method and Endpoint: For fetching meeting information, use a GET method and the endpoint https://api.daily.co/v1/meetings.
4. Click ‘Initialize call’ to make the API available within your app.

​

6. Format API Types

Ensure that any date fields, such as meeting start and join times, are formatted as Unix timestamps. This will make it easier to display them as readable dates within your Bubble app.

​

7. Using the Custom API Call

Now that your API call is set up, you can use it within your Bubble app as either an action in workflows or as a data source.

​

Use as Action Example

1. In your workflow, add an action that triggers the API call by selecting the name you assigned during setup.
2. Use the resulting data from the API call as needed within your workflow logic.

​

Use as Data Example

1. Add a group to your page that requires a data source. The data type should match the name of the API call you set up.
2. Set the data source to ‘Get external data from API’ and select the custom API call.
3. Populate the elements inside the group (e.g., text elements) with the data returned from the API.

In the case where the API returns multiple objects, you can set the data source to a list and display each object in a repeating group.

Inside the repeating group, add elements such as text fields to display specific information, like the meeting start time.