Add video calls to your Bubble mobile app

Add video calls to your Bubble mobile app with Bundle - Daily Mobile Call. You’ll create a call screen, add a Home button to open it, and test a call with a second person.

​

Video walkthrough

​

Demo app and editor

• No Code Video Chat Plus demo app
• Tutorial view in the Bubble editor

The demo link opens the web app. Use the mobile editor’s simulator to try the call screen.

​

Before you start

You need:

• A Bubble account and mobile app.
• The Video, Audio & Live Bundle.
• A Daily account. You’ll create a public room below.

In Bubble, open Plugins → Add plugins. Search for Video, Audio & Live Bundle and install it. Any native build you use must include the bundle’s libraries and camera and microphone permissions. See phone testing for Dev build access and installation.

​

Create a public Daily room

1. Open Rooms in your Daily dashboard.
2. Choose Create room and enter a room name, such as native-video-tutorial.
3. Leave Public: anyone with the link can join selected.
4. Choose Create room. Check the name and public access in the confirmation, then choose Create room again.
5. Open the new room in the rooms list. Choose Copy room link and keep the full HTTPS URL.

Use this same URL in Bubble and for the second caller. A room URL is not a Daily API key. This public room does not need a meeting token. For more help, see Daily’s room setup guide or our Daily getting-started guide.

​

Build the native call screen

​

1. Add a mobile view and call element

1. In Bubble’s mobile Design editor, open App Manager → Add New Interface → Mobile view.
2. Name the view native_video_call_tutorial_v3.
3. Choose Not Scrollable, then Create.
4. In Visual Elements, choose Bundle - Daily Mobile Call. Click the new view to place it.
5. Select the element to open its properties.

You can use another view name. Choose that same view when you set up the Home button below. The video uses a testing copy of the bundle. Install the public bundle linked above in your own app.

​

2. Set the element’s properties

Paste the URL you copied from Daily into Daily room URL. Use these settings for the public room: The microphone and camera switches set the starting state. People can change them during a call. You can also set Background color, Join button color and Join button text color. These are optional.

​

3. Add a Home button to open the call screen

1. Open Home in App Manager.
2. In Visual Elements, choose Button. Click the Home view to place it.
3. Set the button’s label to Open tutorial video call.
4. Select the button’s Interaction tab and click Add workflow.
5. Bubble creates This element is tapped and opens the action menu. Choose Navigation → Go to view.
6. Keep Navigation type set to Stack. Set Target view to native_video_call_tutorial_v3, or the view you created above.
7. Leave Reset navigation stack off. Wait for Bubble to show Saved.

You should now have one button, one tap event and one Go to view action. The action must point to your call screen.

​

Test a call in the simulator

​

1. Open the call screen

1. With Home open in the mobile editor, click Preview.
2. Select Simulated device and wait for it to load.
3. In the demo, tap Tap to Start. Sign in to Bubble if asked, then select the test branch.
4. On Home, tap Open tutorial video call. Check that your call screen opens.

Test the Home button you just built so you know its navigation works.

​

2. Check the pre-join screen

1. Allow camera and microphone access if asked. Wait for Ready to join.
2. Under Your name, replace Demo guest with Alex.
3. Dismiss the keyboard so you can see Join call.

The local camera preview is black in this simulator setup, even with the camera on. The other caller’s video can still appear.

​

3. Join the call

Tap Join call. Check that you see 1 person in call and a red Leave button.

​

4. Add a second caller

1. Keep the first caller in the call. Open the same Daily room URL in another browser or on another device.
2. Allow camera and microphone access. Enter a different name, such as Test.
3. Choose Join or Join meeting, as shown by that client.
4. On the native call screen, check for 2 people in call and the other caller’s video.

The simulator’s small You tile may stay black. It shows your local preview, not the other caller’s video.

​

5. Use the controls and leave

The microphone and camera controls sit below the video. They control your microphone and camera. Turning your camera off does not hide the other caller’s video. Tap Leave when you’re done. If you see You left the call, tap Restart preview to try again. Some builds return straight to Ready to join. To test audio, speak and listen from both devices. A participant count alone does not confirm that audio works.

​

Try it on your phone

You need a Bubble plan with Dev build access, such as a paid mobile plan or an eligible Agency plan. Check your account’s build access first.

1. In the simulator preview, open Preview on your phone → Create a dev build.
2. Follow Bubble’s build and installation steps. Include the bundle’s native libraries and clear camera and microphone permission text.
3. Install the Dev build on your phone. Sign in if asked and select your development branch.
4. Open the call screen and allow camera and microphone access.
5. Join from another device. Test video and audio in both directions, then leave.

Use a Dev build for this check. A browser preview or BubbleGo alone cannot test the bundle’s native libraries. See Bubble’s mobile preview and Dev build guide for store connections and build delivery.

​

Optional: create rooms from Bubble workflows

Use a workflow if each call needs its own room.

1. In the plugin’s API Key setting, enter Bearer followed by your Daily API key. Keep this key on the server.
2. Run the bundle’s Create room action on the server. Choose public or private access.
3. Save the returned URL on your session or appointment record.
4. Pass that URL to the call screen and use it as Daily room URL. Create the room before the preview starts.

If the mobile workflow does not list Create room, use a backend workflow. Check the user’s access before creating the room. Never send the Daily API key to the app or put it in an element field. See the Create room action reference and Daily room API reference.

​

Optional: use a private room

The video uses a public room without a token. For a private room:

1. Create a private Daily room. Save its name and full URL.
2. Check that the user can access the call. Create a meeting token on the server for that Room Name.
3. Set Expires (Unix Timestamp). Turn Is Owner on only for users who need owner access.
4. Pass the returned Token to the element’s Meeting token field. Use the same room’s URL in Daily room URL.
5. Test a valid token, an expired token and a token for a different room.

Keep the token separate from the room URL. Never use your Daily API key as a meeting token. If the mobile workflow does not list Create meeting token, use a backend workflow that checks the user’s access. See the Create meeting token action reference and Daily meeting-token API reference.