Connecting Xano Realtime with Bubble

If you want to push live data to your Bubble frontend — think chat, notifications, financial tickers, or GPS tracking — connecting Xano Realtime via WebSocket is the way to go. In this guide, you'll walk through every step of setting up the Xano Connector plugin in Bubble, configuring channels, handling authentication, and sending and receiving real-time messages.

What You Need Before Opening Bubble

Before touching Bubble, gather three key pieces of information from your Xano dashboard. First, grab your instance URL from the API section. Second, navigate to Realtime Settings (via the three-dot menu on your dashboard) to find your connection hash. If this is your first time enabling Realtime, give it a moment to provision. Third, set up or identify a channel — this is where your messages will flow.

Configuring the Xano Connector Plugin

In Bubble, install the Xano Connector plugin (built by community member Eli B. Chip). Once installed, fill in two value inputs: your API Group URL (the one containing your auth endpoints) and your Realtime hash from Xano. This plugin handles both the WebSocket connection and authentication automatically.

Setting Up Elements and Workflows

Add a Xano Realtime Listener element to your page and set the channel name (e.g., "realtime") and message type. Pair it with a Repeating Group using the Realtime message type as content, sourcing data from the listener's messages output. In your page-load workflow, add the Join Realtime Channel action and specify your channel name so the connection is established immediately.

Handling Anonymous vs. Authenticated Clients

By default, channels may block anonymous clients. You can toggle Allow Anonymous Clients in your Xano channel settings if you want unauthenticated users to receive updates — perfect for public data feeds. For authenticated scenarios, use the Xano Auth element in Bubble to log users in. The plugin stores the auth token in local storage automatically. Before joining the channel, call Set Realtime Auth Token using the token from the Xano Auth element so Xano can verify the user.

Presence Updates and Public Messaging

When joining a channel, you can pass a JSON object with "presence": true to enable presence updates — every connected client gets notified when others join or leave. Toggle this to false if you prefer to keep things quiet. To allow clients to send messages directly to a channel, enable Client Public Messaging in your Xano channel settings. Authenticated-only messaging is also supported with no extra token work required, since the join token carries over.

Sending Messages and Accessing Channel History

Use the Send Realtime Channel Message action in your Bubble workflow to publish messages, passing the channel name and message content. To retrieve past messages, call Get Realtime Channel History on demand, or pass "history": true in your join payload to automatically load previous messages when a user connects. Both approaches give you flexible control over what your users see the moment they land on the page.