To successfully implement ZegoCloud Voice and Video in your Bubble app, follow this step-by-step guide to using the element's actions and events.
⚙️ 1. Setup & Initialization
Before any calls can happen, you must configure your credentials and initialize the engine.

Plugin Settings: Enter your App ID and Server Secret in the Plugin Tab (as seen in your screenshot).

Add Element: Drag the Zego Cloud (Testing) element onto your page.

Action: Initialize ZegoCloud: Trigger this action on "Page Is Loaded" or via a button click. This prepares the SDK for use.

Action: Check/Request Permissions: Use this before logging into a room to ensure the user has granted Camera and Microphone access.

📞 2. Managing the Call Flow (Actions)
Follow this logical sequence to start a video or voice session:

Generate ZegoCloud Token: Use this to create a secure access token for the user.

Login To Room: Connect the user to a specific Room ID. Users in the same Room ID can interact with each other.

Publish Stream: This starts sending the user's local camera/microphone feed to the Zego servers so others can see/hear them.

Play Stream: Use this to view another participant's feed. You will typically use the Stream ID provided when another user starts publishing.

Stop Publishing / Playing: Use these to pause your own feed or stop receiving a specific peer's feed without leaving the room.

Logout Room: Disconnects the user from the session.

Destroy ZegoCloud Instance: Clean up memory and resources when the user leaves the page or ends their session entirely.

📡 3. Monitoring Connection (Events)
Use these events in your Workflow Tab to update your UI or trigger notifications:

Room State Updated: Triggers when the connection to the room changes (e.g., Connected, Disconnected, or Reconnecting). Use this to show a "Connected" badge.

Publisher State Updated: Triggers when the user successfully starts or stops sending their own video/audio.

Player State Updated: Triggers when a remote stream (from someone else) starts, stops, or fails. Use this to dynamically show/hide video containers for other participants.

Zego Error Happened: A critical safety event. Use this to show an alert to the user if their internet drops or if their credentials are invalid.

🚀 Quick Start Workflow Example
To get a basic call running, chain your actions like this:

Button Click -> Check Permissions

Next Action -> Initialize ZegoCloud

Next Action -> Generate Token

Next Action -> Login To Room

Next Action -> Publish Stream (Now you are live!)

💡 Pro Tip
When a user joins a room, use the Player State Updated event to identify the Stream ID of other people in the room, then immediately trigger the Play Stream action so your user can see them automatically.


Demo Page URL: https://hks-demos.bubbleapps.io/version-test/zegocloud_2?debug_mode=true

Demo Editor URL: https://bubble.io/page?id=hks-demos&tab=Design&name=zegocloud_2&type=page&elements=cmNSS

Need more features? reach us out at https://www.hkstechlabs.com/