How would you approach utilizing WebSocket for real-time communication: Step-by-

Bubble's database has native real-time capabilities. When you bind a Repeating Group to a Do a Search for expression, it automatically updates when records are created, modified, or deleted. This happens through Bubble's internal WebSocket connection. Test this by opening two browser tabs of the same page and creating a record in one — the other tab should show the new record within 1-3 seconds without refreshing.

Bubble's native real-time has limitations: updates take 1-3 seconds (not instant), it only works for data-bound elements, and heavy real-time usage increases WU consumption. You need external WebSockets when you need sub-second message delivery (live chat), presence detection (showing who is online), real-time typing indicators, live cursor tracking, or when Bubble's polling creates too much WU overhead.

Sign up at pusher.com and create a Channels app. Note your app_id, key, secret, and cluster. In Bubble, go to the Plugins tab and install the Toolbox plugin if not already installed. Create an API Connector call to Pusher's HTTP API for triggering events. Set the method to POST, URL to https://api-{cluster}.pusher.com/apps/{app_id}/events, and configure authentication using your Pusher credentials.

1{
2  "name": "new-message",
3  "channel": "chat-room-123",
4  "data": {
5    "message": "Hello!",
6    "sender": "user_abc",
7    "timestamp": "2026-03-28T15:00:00Z"
8  }
9}

On the page where users need real-time updates, add a Page is loaded workflow with a Run JavaScript action from the Toolbox plugin. Load the Pusher JavaScript client library and subscribe to your channel. When a new event arrives, use the JavaScript to Bubble bridge to pass the data back to Bubble, then display it using custom states or trigger a custom event. This creates a persistent connection that receives messages instantly.

1// Load Pusher client (add to page header or Run JavaScript)
2var pusher = new Pusher('YOUR_PUSHER_KEY', { cluster: 'us2' });
3var channel = pusher.subscribe('chat-room-123');
4channel.bind('new-message', function(data) {
5  // Pass data back to Bubble via JavaScript to Bubble bridge
6  bubble_fn_newMessage(JSON.stringify(data));
7});

When an action occurs that should notify other users in real time (e.g., a new chat message is sent), add the API Connector call to Pusher in your workflow. Pass the channel name and event data. Pusher broadcasts the event to all connected clients on that channel. Combine this with database writes — save the message to your database AND trigger the Pusher event so that users see it instantly while the database record is also persisted.

Create a Notification Data Type with fields for recipient (User), message (text), read (yes/no), and type (Option Set). When an event occurs (new order, new message, etc.), create a Notification record AND trigger a Pusher event on a user-specific channel (e.g., user-{unique_id}). On the frontend, subscribe to the user's channel and update a notification counter custom state when events arrive. Display unread notifications in a dropdown with a Repeating Group.