Embed Daily video calls anywhere in your Bubble app

Do not index

Most tutorials for the Daily video chat plugin for Bubble show video calls in full-screen mode, but did you know you can embed a Daily video call anywhere on your page? Whether you want it embedded in a specific part of your layout or styled to blend seamlessly into your app’s design, here’s a step-by-step guide to help you do just that.

Why Customize Your Video Call Layout?

Embedding Daily in a custom position gives you flexibility with your page design, allowing you to integrate video calls into specific sections of your app without taking over the entire screen. This can be especially useful for:

Dashboard Views: Add a video call to a specific section of a dashboard or user profile.

Multi-Functional Pages: Incorporate video without interrupting the rest of the page’s functions.

Enhanced User Experience: Keep users engaged by blending video with other interactive content.

Ready to set it up? Here’s how:

Step 1: Enable ID Attributes for HTML Elements

To start, you’ll need to enable ID attributes on HTML elements in Bubble.

Open the General tab in your Bubble settings.

Check the box that allows users to add ID attributes to HTML elements.

This step is essential to help the Daily plugin identify where to embed the video.

Step 2: Create a Group for the Video Position

Next, add a group element on the page where you’d like the video to appear:

Drag a group element to the desired spot on your page.

Set the size, position, and width to your preference.

Assign an ID to the group element (e.g., “video-call-container”).

This group will serve as the container for the Daily video, allowing you to control its placement and dimensions.

Step 3: Select Custom Position When Joining the Call

When users join the video room, you’ll need to select the custom position option and specify the group element’s ID.

In your app’s workflow, set up the “Join Room” action.

Choose the custom position setting and enter the element ID you created in Step 2 (e.g., “video-call-container”).

This will ensure that the video overlays within the group and respects its position on the page.

And that’s it! You now have a customized, embedded video call experience.

Learn More

For a video walkthrough, check out this guide, or see the full written documentation for additional options.

Get the free Daily video chat plugin here to start building customizable video experiences in your Bubble app today!